首先说一下svg的优势：

SVG 意为可缩放矢量图形(Scalable Vector Graphics)

SVG 使用 XML 格式定义图像

svg 与 jpeg 和 gif 图像比起来，尺寸更小，且可压缩性更强。

svg 是可伸缩的

svg 图像可在任何的分辨率下被高质量地打印

svg 可在图像质量不下降的情况下被放大

svg 图像中的文本是可选的，同时也是可搜索的(很适合制作地图)

svg 可以与 java 技术一起运行

svg 是开放的标准

svg 文件是纯粹的 xml

如何使用？

svg教程 https://www.runoob.com/svg/svg-tutorial.html

为毛我这里直接上链接了为什么还要写这篇文章，因为咱还是嫌弃他麻烦，什么圆形，矩形，直线，斜线啥的好麻烦(关键还需要自己写代码 嘘！) 我这里直接使用svg工具在线去生成svg代码

上链接：http://www.zuohaotu.com/svg/ svg在线编译器

使用

首先随便画点东西在这~

然后点击视图最后一个源文件

点击过后就会生成svg代码

咱这边新建一个html文件把他复制进去

浏览器运行

和咱们画的一模一样

这里咱们检查代码

还是有些用不到的代码存在 为了方便咱们更好的使用接下来改下他生成的svg代码

首先先把这些无用代码删掉

接下来介绍一个line

如何更改咱们画出来的元素

line里面有stroke属性直接修改即可

svg的宽高可直接修改

修改完代码如下~

本文地址：https://blog.csdn.net/sslcsq/article/details/112537590

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！