未来众创聚集地 潜水
  • 1发帖数
  • 0主题数
  • 0关注数
  • 0粉丝
开启左侧

VSCode大招:如何安装和使用SVG Viewer插件

[复制链接]
未来众创聚集地 发表于 2021-9-18 05:15:05 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

                               
登录/注册后可看大图

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]

精彩评论1

 楼主| 未来众创聚集地 发表于 2021-9-17 17:04:59 | 显示全部楼层
转发了
猜你喜欢
在线客服邮箱
wxcy#wkgb.net

邮箱地址#换为@

Powered by 创意电子 ©2018-现在 专注资源实战分享源码下载站联盟商城