SVG 路径代码转换成对应的 SVG 图像

Image for post
Image for post

在网页上看到一些精致的图标想要保存下来,但是右键没有另存为选项(如图1),审查元素后发现是嵌入式的 SVG 图标(如图2)。那么如何将这一段代码转换成对应的 svg 图片?

Image for post
Image for post
图1 — 无法另存为图片
Image for post
Image for post
图2 — 审查元素后看到的 SVG 代码

解决方法:

在审查元素窗口内选择相应图标的 svg 标签,右键 呼出菜单,点选 Copy — Cut element。

Image for post
Image for post
复制 SVG 元素信息

然后打开一个文本编辑器,这里我使用 Sublime Text,把刚刚拷贝的一段代码粘贴在文本编辑器里,保存为.svg 后缀的文件。

Image for post
Image for post
将拷贝下来的代码保存为.svg 后缀的文件

接着就可以拖动进 Sketch 等设计软件进行编辑了!

Image for post
Image for post
可编辑的矢量图形

Written by

广州 · LRD.IM

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store