创意电子

标题: VSCode大招：如何安装和使用SVG Viewer插件 [打印本页]

作者: 未来众创聚集地 时间: 2021-9-17 17:04
转发了

作者: 未来众创聚集地 时间: 2021-9-18 05:15
标题: VSCode大招：如何安装和使用SVG Viewer插件

SVG 指的是可缩放的矢量图形，并且 SVG 文件是存储网络矢量图像的文本文件。如果在文本编辑器中打开 SVG 文件，则通常会表现这些文件的文本内容。如果你正在直接编辑这些文件，则大概希望查看 Visual Studio Code 是怎样呈现这些文件的。
SVG Viewer 插件让你可以可视化 SVG 文件，从而节省了你使用其他应用程序查看工作的时间。从本质上讲，它可以节省你对 SVG 文件进行快速编辑的时间。
选项
以下 Visual Studio Code 设置可用于 SVG 查看器。这可以在User Settings或中设置Workspace Settings，如下
{
"svgviewer.transparencygrid": true,
"svgviewer.enableautopreview": true,
"svgviewer.previewcolumn": "Beside",
"svgviewer.transparencycolor": "#2BD163",
"svgviewer.showzoominout": true
}
安装和使用SVG Viewer插件
1.点击最左侧的活动栏里的【扩展插件】按钮，切换至安装扩展插件的视图，该视图已经为所有人提供了两万多款小巧而好用的扩展插件，这些扩展插件不仅都能省时省力，而且也能提高开发服从，如下图所示：

2.在【扩展插件】搜索栏里输入"SVG Viewer"，输入完成后，等几秒后才自动表现其对应的一些相关扩展插件，如下图所示：

3.直接点击【SVG Viewer】扩展插件列表的【安装（Install）】按钮，即直接安装【SVG Viewer】扩展插件，如下图所示：

4.安装完成后，直接重启 VS Code即可。
5.右击选定的项目文件夹区域，如下图所示：

6.将SVG图标素材复制到项目文件夹区域内，如下图所示：

7.右击SVG图标素材，然后在弹出的快捷菜单中选择【SVG Viewer：View SVG】项，如下图所示：

【作者声明】
本篇履历系本人依照真实经历原创，必要转载到博客、自媒体平台、技术网站等，未经许可，严格遵守本人的知识版权，推辞转载。如想转载，请联系本人授权。
联系邮箱：[email protected]

欢迎光临创意电子 (https://wxcydz.cc/)