快速入门

意派 SVG 是一款功能强大的可视化 SVG 公众号图文编辑器，专为创建交互式 SVG 推文而设计。此教程将引导您了解编辑器的核心功能、组件用途及使用方法。

视频教程

常用组件

图片

图片组件用于添加各类视觉素材，支持 JPG、PNG 和 GIF 格式。

属性面板

在右侧属性面板中，您可以对图片进行以下设置：

• 显示方式：选择适应（缩放以适合）或填充（缩放以填充）
• 跳转链接：设置点击图片时的跳转链接，可选择跳转网址（跳转外链需在公众号后台开通微信支付）或小程序
• 交互行为：支持长按图片显示菜单以及点击弹出图片预览（需导出到公众号编辑器查看效果）

音频

音频组件用于嵌入公众号音频，需从公众号编辑器中获取音频代码。

使用方式

1. 前往公众号编辑器添加所需音频后使用Ctrl+C（Windows）/Cmd+C（macOS）复制音频
2. 选中画布中的音频组件后使用Ctrl+V（Windows）/Cmd+V（macOS）粘贴。

属性面板

在右侧属性面板中，您可以对音频进行以下设置：

• 音频代码：可以点击音频面板的代码按钮从公众号文章链接获取音频代码

视频

视频组件用于嵌入公众号视频，需从公众号编辑器中获取视频代码。

使用方式

1. 前往公众号编辑器添加所需视频后使用Ctrl+C（Windows）/Cmd+C（macOS）复制视频
2. 选中画布中的视频组件后使用Ctrl+V（Windows）/Cmd+V（macOS）粘贴。

属性面板

在右侧属性面板中，您可以对视频进行以下设置：

• 视频代码：可以点击视频面板的代码按钮从公众号文章链接获取视频代码
• 视频比例：设置视频的宽高比，支持 16:9、4:3、3:4 和 9:16 四种比例

图形

图形组件用于添加各种形状，如矩形、圆形（圆角设置9999），可作为背景或按钮使用。

属性面板

在右侧属性面板中，您可以对图形进行以下设置：

• 填充：设置填充颜色、透明度
• 描边：调整边框颜色、透明度、粗细和样式（实线/虚线）

文本

文本组件用于添加各类文字内容，可直接在编辑器中设置文字样式。

属性面板

在右侧属性面板中，您可以对文本进行以下设置：

• 字体设置：选择字体、字重和样式（常规/斜体）
• 对齐方式：设置对齐方式（左对齐、居中对齐、右对齐、两端对齐）
• 文本样式：调整字号、行高和字间距
• 文本装饰：添加下划线或删除线

轮播

轮播组件用于添加多张图片切换展示效果，支持设置切换效果、延迟时间和过渡时间。适用于多张图片连续展示的场景，每张图片皆可设置独立的点击跳转链接。

属性面板

在右侧属性面板中，您可以对轮播进行以下设置：

• 切换效果：选择水平推移、淡入淡出、缩放推移、卡片推移或九宫格推移效果
• 延迟时间：设置轮播切换的延迟时间
• 过渡时间：设置轮播切换的过渡时间
• 显示方式：选择适应（缩放以适合）或填充（缩放以填充）
• 跳转链接：设置点击轮播图片时的跳转链接（跳转外链需在公众号后台开通微信支付）

序列

序列组件用于添加多张图片逐帧动画效果，支持设置帧率和循环次数，适用于动画、抽签等场景，每张图片皆可设置独立的点击跳转链接。

小提示：建议在序列组件中使用相同尺寸的图片，且数量不宜过多，以免影响加载速度。

属性面板

在右侧属性面板中，您可以对序列进行以下设置：

• 播放帧率：设置每秒播放的帧数
• 循环次数：设置序列的循环次数

滑动

滑动组件用于添加多张图片的滑动展示效果，支持设置滑动方向和吸附效果，适用于背景滑动或局部内容滚动的场景。

小提示：滑动组件中不仅可以添加图片，还可以添加轮播、序列和画布等组件。

属性面板

在右侧属性面板中，您可以对滑动进行以下设置：

• 滑动方向：选择水平或垂直滑动
• 吸附效果：选择强制吸附或非强制吸附

布局

布局组件用于将多个元素进行分组和排列，支持多种布局方式。

流式布局

内容自上而下排列，适用于长图文拼接的场景。

分栏布局

内容分栏排列，由元素百分比决定分栏数量，可实现左右分栏或上下分栏。

重叠布局

内容重叠排列，适用于多层次的图文展示，如文字覆盖在图片上、图片叠加背景等，还可以结合滑动组件实现错层滑动效果。

画布

画布组件并不是指中间的白色画布区域，而是一种可以添加其他元素的“容器组件”，可实现添加元素的自由拖拽调整位置、缩放尺寸、旋转角度等操作。

小提示：画布中支持添加图片、图形、文本、轮播图和序列帧组件，可以双击组件上方的标签或图层面板中的图标定位到选中画布。

名片

名片组件用于接入微信生态的相关功能，如公众号、小程序和视频号。

公众号

使用方式

1. 前往公众号编辑器添加所需公众号后使用Ctrl+C（Windows）/Cmd+C（macOS）复制公众号
2. 选中画布中的公众号组件后使用Ctrl+V（Windows）/Cmd+V（macOS）粘贴。

属性面板

在右侧属性面板中，您可以对公众号进行以下设置：

• 公众号代码：可以点击公众号面板的代码按钮从公众号文章链接获取公众号代码

小程序

使用方式

1. 前往公众号编辑器添加所需小程序后使用Ctrl+C（Windows）/Cmd+C（macOS）复制小程序
2. 选中画布中的小程序组件后使用Ctrl+V（Windows）/Cmd+V（macOS）粘贴。

属性面板

在右侧属性面板中，您可以对小程序进行以下设置：

• 小程序代码：可以点击小程序面板的代码按钮从公众号文章链接获取小程序代码

视频号

使用方式

1. 前往公众号编辑器添加所需视频号后使用Ctrl+C（Windows）/Cmd+C（macOS）复制视频号
2. 选中画布中的视频号组件后使用Ctrl+V（Windows）/Cmd+V（macOS）粘贴。

属性面板

在右侧属性面板中，您可以对视频号进行以下设置：

• 视频号代码：可以点击视频号面板的代码按钮从公众号文章链接获取视频号代码

交互

交互组件用于实现点击展开、点击切换和点击弹窗效果。

点击切换

点击切换组件用于实现点击元素后切换显示其他元素的效果，切换前与切换后可以任意插入图片、布局、画布等元素。

小提示：可以点击组件上方的“切换前”或“切换后”标签选中层级添加元素。

属性面板

在右侧属性面板中，您可以对点击切换组件进行以下设置：

• 点击热区：设置点击切换的点击区域范围
• 延迟时间：设置点击切换的延迟时间
• 过渡时间：设置点击切换的过渡时间

点击展开

点击展开组件用于实现点击元素后展开其他元素的效果，展开前与展开后可以任意插入图片、布局、画布等元素。

小提示：可以在浮动面板中点击“添加展开后”实现多层展开效果。

属性面板

在右侧属性面板中，您可以对点击展开组件进行以下设置：

• 点击热区：设置点击展开的点击区域范围
• 延迟时间：设置点击展开的延迟时间
• 过渡时间：设置点击展开的过渡时间

点击弹窗

点击弹窗组件用于实现点击元素后弹出其他元素的效果，可自定义点击按钮、弹窗内容和关闭按钮。

小提示：可以在浮动面板中点击“添加弹窗”实现多个弹窗效果，点击弹窗本身可以作为画布使用，支持添加图片、图形、文本、轮播图和序列帧组件。

属性面板

在右侧属性面板中，您可以对点击弹窗组件进行以下设置：

• 弹窗效果：设置弹窗的出现方式（移动缩放、缩放、移动渐现、渐现）
• 前景图片：设置点击弹窗的前景图片，可与移动缩放效果结合使用实现互动地图

快捷键

编辑器提供了一系列快捷键，帮助您提高制作效率。

缩放

移动

编辑

选择