绘制svg，插入到html及插件配置

乌鸦的二叉树

已于 2025-03-22 16:39:25 修改

阅读量1.2k

点赞数 8

文章标签： vscode html 前端

于 2025-03-22 16:16:56 首次发布

本文链接：https://blog.youkuaiyun.com/X211001241008/article/details/146437923

版权

文章目录

前言
一、svg
二、SVG配置
三、SVG Editor配置
- 1.新建
总结

前言

在使用vscode写网页时，有时候会需要自己用svg画图，一般的方法是直接在<body>里插入<svg>，但这样会让代码显得臃肿,而且也不方便挪动，不能变成某一元素的背景图，如果能像.png一样是一个地址就好了。
本文就是介绍如何添加.svg文件并配置合适的插件，这里介绍的插件是SVG以及SVG Editor。

一、svg

先新建text文件，编辑代码后改为svg文件。
在这里插入图片描述
得到的svg文件可以用<img>标签插入到html中。

二、SVG配置

1、引言

如果你想更方便的写svg，那么SVG插件必不可少，SVG插件可以快速地补全代码。

2、基本操作

2.1 初次编辑

新建svg文件,点击加载图片出错下面的蓝色字体，就会打开一个新的a.svg,写入代码后，点击原来的a.svg，就能看到画出的图。
在这里插入图片描述

2.2 再次编辑

方法一
此时，你还可以在新的a.svg里编辑图片，但如果你关闭了所有a.svg，再次打开a.svg只会出现图片，而无法修改。
这时候可以在文件上方右键点击，再点击预览 SVG或preview SVG。
注意：刚下载SVG插件可能没有preview SVG按钮，可以重新打开VS code或打开命令面板搜索preview SVG
命令面板打开方法：按Ctrl+Shift+P 或设置里的第一个
VScode顶部的搜索框并非命令面板
在这里插入图片描述
方法二
也可以直接将svg后缀改为text，修改后再改为svg就可以了。

面板的功能大致如下。分别点击<svg>，代码与图片交互，点击图片，就可以打开编辑页面。
在这里插入图片描述

2.3 特殊情况

如果你关闭svg文件前只写了框架，打开preview SVG后就没有图片，上面的第一种方法也就不能用。
在这里插入图片描述

2.4 查看所有svg文件

打开命令面板，搜索SVG: Preview All Svg，就可以看到所有svg图片；点击图中方框，还可以编辑代码。
在这里插入图片描述

三、SVG Editor配置

1.新建

SVG Editor的新建方式略微不同。
扩展下载后，打开命令面板，搜素New File with SVG Editor,点击后就可以编辑了。其功能大部分和SVG标签一致，可以在MDN上找到SVG教程。插入形状的代码可以自动呈现在代码区。
在这里插入图片描述
比较特别的是node，可以将其他标签转为path，或在使用path后自动跳转到node，用来将直线轮廓变为贝塞尔曲线，也就是说用node代替了<path>里的C,Q指令。
path使用：右键点击在画布上确定几个点，左键点击结束，拖拽端点可以找到挪动确定贝塞尔曲线形状的点。首尾的容易拖拽，中间的点不容易拖拽。