> ## 文章索引
> 在这里获取全部文章的索引：https://lrd.im/blog/llms.txt
> 这是 lrd.im 的个人博客，记录设计、技术与思考。

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

![封面图](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-12-09-429f8053ab12/01.jpg)

> 2019/07/05 补充：
> Sketch 55 版本中新增了粘贴 SVG 代码到 Sketch 中可以自动生成图形的功能。省略了本文内要把 SVG Code 粘贴至文本文档中的步骤。
> [查看 Sketch 55 介绍](https://medium.com/sketch-app-sources/sketch-55-how-it-speeds-up-your-workflow-db7d63801573)

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

![在 YouTube 网页上右键点击图标时弹出的浏览器菜单，菜单中没有 "图片另存为" 选项，仅显示 "在新标签页中打开链接" 等通用选项，说明该图标并非普通图片。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-12-09-429f8053ab12/02.png "图1 - 无法另存为图片")

![Chrome 浏览器审查元素面板截图：左侧为 YouTube 时下流行页面，右侧 DevTools Elements 面板中展示嵌入式 SVG 图标的 HTML 代码结构，高亮行为 `<yt-icon class="guide-icon style-scope ytd-guide-entry-renderer">`，其内含完整 SVG 路径数据](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-12-09-429f8053ab12/03.png "图2 - 审查元素后看到的 SVG 代码")

## 解决方法

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

![Chrome DevTools 截图：在 Elements 面板中选中 SVG 标签，右键菜单展开 Copy 子菜单，光标悬停于 Cut element 选项上，准备复制该 SVG 图标的完整代码。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-12-09-429f8053ab12/04.png "复制 SVG 元素信息")

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

![Sublime Text 编辑器截图，显示将复制的 SVG 代码粘贴至编辑器后保存为 test.svg 文件的状态，代码包含 viewBox、preserveAspectRatio 等属性及完整 path 路径数据。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-12-09-429f8053ab12/05.png "将拷贝下来的代码保存为.svg 后缀的文件")

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

![Sketch 设计软件界面截图，展示将 SVG 路径代码导入后的编辑状态：左侧图层面板显示 Shape 包含两个 Path 的层级结构，画布中央呈现一个火焰图标，右侧面板显示其尺寸为 13.74×18，填充为黑色。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-12-09-429f8053ab12/06.png "可编辑的矢量图形")