上了!上了!SVG编辑器上线了!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

·END·

文章排版由135编辑器提供技术支持

■■ ■ ■