前言

前几天在电脑上下载了一个开源项目，在通过Visual Studio Code浏览浏览该项目目录结构时，发现项目中有svg格式的文件，打开后只能看到一堆XML格式的内容，无法实时预览最后的显示效果。虽然可以另外通过浏览器软件（Firefox、Chrome等）来进行打开预览，但毕竟不太方便。于是就尝试着在Visual Studio Code 扩展查找一款能直接在编辑器中就能打开、预览、编辑svg文件的扩展。万能的Visual Studio Code 扩展果然是不负众望，有好些款基本符合需求的扩展（如：SVG、SVG Viewer、Svg Preview、SVG Editor等）。于是经对比（综合评级、下载量、更新频度和支持功能特性等因素）后选择了系统排序第一的SVG扩展。简单使用发现还不错，故在此向各位朋友们做个介绍分享。

一、扩展简介

SVG是一款强大的SVG语言支持扩展，能处理SVG所需的几乎所有功能：SVG编码、压缩、美化、预览多合一。

（1）扩展名称：SVG

（2）扩展简述：SVG编码、压缩、美化、预览多合一

（3）开发者： jock

（4）最新版本： v1.3.8 (2020/08/01)

（5）GitHub项目地址：https://github.com/lishu/vscode-svg2

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于XML的标记语言描述二维的矢量图形。SVG 是由 W3C 发布的一个基于文本的开放网络标准。SVG能够优雅而简洁地渲染不同大小的图形，并和CSS、DOM、JavaScript、SMIL等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。

SVG 图像及其相关行为被定义于XML文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。

和传统的点阵图像模式（如 JPEG 和 PNG）不同，SVG格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容。

二、扩展安装

Visual Studio Code 上安装 SVG 扩展非常简单，步骤如下：

（1）打开 Visual Studio Code 软件，鼠标点击左侧的扩展图标（见标号1处）

（2）在右侧出来的扩展: 商店下的搜索栏中输入“SVG”（见标号2处）；

（3）选择 SVG 扩展，点击右侧的Install按钮（见标号3处）进行扩展安装；

（4）本扩展安装过程很快，安装完毕不用重启即可使用。

三、扩展使用简介

安装完 SVG 扩展后，就可以在 Visual Studio Code中对svg文件进行相关操作了。

3.1 打开/编辑SVG

3.2 预览SVG

通过选择具体svg文件，然后鼠标右键弹出菜单窗口中，选择【预览 SVG】子菜单项后，就会在编辑器右侧新增一个预览窗口（如下图示），可以通过预览窗口上方的【Zoon In】或【Zoom Out】按钮进行缩放，可以点【100%】恢复原状。

3.3 导出png

在预览窗口中还可以通过点击【Export PNG】按钮，弹出【另存为】对话框窗口，选择保存路径及文件名，点击【保存】按钮后，即可将svg格式文件导出为png格式文件。

3.4 压缩SVG

还可以通过选择具体svg文件（如：xcode.svg），然后通过鼠标右键在弹出菜单窗口中选择【压缩 SVG】子菜单项对现有svg文件进行压缩处理（通过从图像中删除所有不必要的代码，这将大大减少文件大小），压缩完成后会在当前位置生成一个xcode.min.svg文件。

3.5 其他特性

• 在编辑svg代码时，具有SVG全自动完成特性。

• 在查看/编辑svg代码时，支持文档符号树结构。

• 在查看/编辑svg代码时，支持MDN参考快速学习

• 在查看/编辑svg代码时，支持快速拾色器特性。

• 美化SVG

使用SVGO进行格式化支持，可以美化SVG并对标签属性进行排序。SVGO是一组可以激活或取消激活的插件（此扩展程序中的大多数默认设置）。

• 等

结束语

Visual Studio Code 安装上这款 SVG 扩展后，就可以直接在编辑器中打开svg文件，然后进行预览、编辑、压缩、美化、导出png格式文件等操作了。希望介绍的这款扩展能对您有所帮助！

如果这篇文章对您有所帮助，喜欢的话就点个赞加关注支持一下哈：)