欢迎来到svg编辑器新品发布会，我是本次大会的主持人三儿。（有没有一种打开苹果新品发布会推文的错觉 ）

首先要向大家隆重宣布，吊足大家胃口胖友们期待已久的svg编辑器正式上线啦！

我们的svg编辑器有非常多热门、有趣、创意十足的svg效果，比如横版无缝拼接视频、音频海报、小程序无角标、gif图跟随阅读播放等。

不用代码，不用花费高额的价钱定制，自己就可以DIY和其它知名品牌一样的svg效果，是不是有亿点点心动！

那在正式开始使用之前，三儿给胖友们整理了一份svg编辑器使用手册，并附上了全面的功能解析，帮助胖友们快速上手，强烈建议大家收藏！

01 如何进入svg编辑器

—通过135编辑器进入

进入135编辑器后，在左侧工具栏找到『svg编辑器』，点击进入即可。

—直接输入网址

胖友们也可以直接在浏览器粘贴网址进入，svg编辑器网址为：

https://www.135editor.com/svgeditor/

02 整体界面展示

Svg编辑器界面主要分为 4 个部分：左侧效果选择区、上方工具栏、右侧效果设置区以及中间的效果编辑区。

—左侧效果选择区

左侧效果选择区域主要是编辑器效果的展示，你可以在素材、组合或是样式里选择你喜欢的svg效果进行编辑。

—上方工具栏

上方工具栏则是一些简单的编辑操作，共有10个功能。包括上移/下移、间距、删除、新建、保存、同步、导出、预览、个人中心。

—右侧效果设置区

作品效果的修改都在右侧区域完成，该区域主要分为 2 个部分，一是编辑，二是教程。

—中间效果编辑区

中间的效果编辑区是对整个作品的展示，不仅可以及时看到作品的展示效果，还可以对不同区块进行上移/下移、间距、删除等操作，使作品的整体搭配更加协调、美观。

03 核心功能介绍

—素材/组合效果，可自定义程度高

相比单个的svg样式，素材的灵活度更高、可搭配性强，多种素材可自由组合。

目前的素材分类有无缝图、点击、滑动、长按、图片轮播、超链接、小程序、音频、视频、点A见B、百叶窗、淘口令等，每一个大分类下又有多种不同效果选择，比如视频这个分类之下又有无缝拼接视频和横屏无缝拼接视频两种效果。

除了素材效果以外，svg编辑器还为大家准备好了 4 种图文展开的效果，分别是点击直接展开-自定义触发、点击换图展开-自定义触发、自动换图展开-自定义触发、点击缩回再展开-自定义触发，如果自己在效果组合上还不太拿手，可以尝试使用组合素材。

—教程引导/案例展示，更好地引导使用

素材和组合的每一种效果都附有使用教程，鼠标悬浮于效果右上方的问号按钮处，会弹出该样式的id、教程及展示效果案例，扫码可查看案例效果。

—『间距』新功能，作品展现更美观

间距功能属于一个新的编辑功能。使用方法：在编辑区域选中某个样式区块，点击上方菜单栏的间距，可调整选中该区块内外边距的距离。

内边距为该素材在红色框线内的位置，外边距为该区块和上下区块之间以及两侧边距的距离。

—同步/导出代码，怎么方便怎么来

编辑好的文章可以通过两种方式复制到微信公众号后台，一是同步到微信公众号，二是复制代码。

同步：点击上方菜单栏同步，在弹出菜单栏中根据提示填写相关内容即可。授权公众号的方法和135编辑器授权同步一致（点我查看如何授权公众号）

导出：制作完成的svg作品代码可以复制，复制的代码可以直接粘贴到135编辑器使用（点击html进入代码模式，粘贴代码即可），也可以在微信后台保存使用（点我查看如何复制代码到微信公众号后台）

—按引导编辑效果，操作更加简化

三儿必须要吹爆这个功能，以往在135编辑器需要通过动画功能或代码才能完成对svg样式的修改，但在svg编辑器，只需要在右侧的效果设置区根据提示修改效果即可。

以超链接-无角标素材为例，右侧需要修改的地方分别为添加封面图、添加跳转网页链接，根据提示上传图片及链接即可，操作可以说是非常简单了。

—图片可直接拖动，方便快捷

如图，该功能可以实现直接从左侧上传里拖动图片到右侧效果设置区替换图片，无需重复上传，一步到位。

04 和135使用上的区别

—效果可实现性更高

以往我们使用135编辑器时，习惯于查找svg样式，但相对135编辑器的svg样式来说，svg编辑器内的素材和组合效果是一种升级和增强，很多样式实现不了的效果在素材和组合里会现。

—效果可自定义性更强

通常来说，135编辑器内的svg样式是有一定限制的。以轮播图片样式为例，该样式在135内限制了图片的数量，即使是通过代码也无法增加，而在svg编辑器的素材效果里，图片数量可以在右侧的效果设置区域直接增加，无需代码操作。

因此，svg编辑器素材和组合效果灵活度更高，可自定义性强。

Svg编辑器上线初期

请大家多多关照

有什么建议都可以在留言中告诉三儿！