SVG图标可能大家都有用过，一提起SVG，第一个印象就是可以无损缩放图标，而且文件体积小，是做小图标的绝佳实现方式。遂总结关于SVG的使用方式以及一些思考…
一、SVG的使用
SVG的使用并不难，甚至一些svg图标可以通过iconfont平台直接下载，这里主要讲讲关于SVG中的各个属性以及用法
在一个HTML文件中，svg就是其标签之一，在网页中其基本用法如下：
<!DOCTYPE html>
<html>
<body>
<svg>
<circle cx="100" cy="50" r="50" fill="red" />
</svg>
</body>
</html>
为了兼容性可以如下方式引入svg
<embed src="circle1.svg" type="image/svg+xml" /> <object data="circle1.svg" type="image/svg+xml"></object> <iframe src="circle1.svg"></iframe>
而一个svg格式的文件如下：
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="150"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>
svg好比一个画板，学习过图形学的同学应该很容易理解，类似图形学中基本图形、画线等操作接下来一起看看吧！
1.1 矩形 react
react标签的属性：
- x：矩形左上角横坐标
- y：矩形左上角纵坐标
- width：矩形宽度
- height： 矩形高度
- style：行内样式，如下属性均可放到react标签中
- fill：封闭区域填充色，支持rgb、颜色名和十六进制
- fill-opacity：填充色透明度
- fill-rule：颜色填充规则，
nonzero | evenodd | inherit - stroke：画笔颜色
- stroke-width：画笔粗细
- stroke-opacity：画笔颜色透明度
- stroke-linecap：画线端点样式，round（平滑）
- stroke-linejoin：两线交点处样式，round（平滑）
- stroke-dasharray: 虚线
1.2 圆 circle
circle标签的属性
- cx：圆心横坐标
- cy：圆心纵坐标
- r：圆半径
1.3 椭圆 ellipse
ellipse与圆类似，不同之处在于可设置横纵半径：
- cx：椭圆中心横坐标
- cy：椭圆中心纵坐标
- rx： 椭圆横向半径
- ry：椭圆纵向半径
1.4 直线 line
line标签用于画线，两点确定一条直线：
- x1：起点横坐标
- y1：起点纵坐标
- x2：终点横坐标
- y2：终点纵坐标
1.5 多边形 polygon
polygon标签用于创建不少于三条边的封闭图形
- points: 顺序描述每个节点坐标
<svg height="210" width="500"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" /> </svg>
1.6 曲线 polyline
polyline表现用于直线段链接的曲线，不封闭：
- points：顺序描述每个节点坐标
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" /> </svg>
1.7 路径 path
path标签其功能与polyline类似，但其更具体，其属性如下（属性若小写则其后数值代表相对位移）：
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curveto
- A = elliptical Arc
- Z = closepath
<svg>
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
1.8 文本 text
text标签支持文本（字符串），类似span标签，其属性可以通过style或行内预置属性调整样式，这里不认为其预置样式有什么相较于css的优点，因此其主要属性如下：
- x：横坐标
- y：纵坐标
<svg height="100" width="90"> <text x="0" y="20" fill="red">I love SVG</text> </svg>
文本中还可嵌入tspan标签，该标签类似html的p标签，与text标签类似可设置x、y属性
<svg>
<text x="10" y="20" style="fill:red;">Several lines:
<tspan x="10" y="45">First line</tspan>
<tspan x="10" y="70">Second line</tspan>
</text>
</svg>
支持超链接
<!DOCTYPE html>
<html>
<body>
<svg>
<a xlink:href="https://blog.dyboy.cn" target="_blank">
<text x="0" y="15" fill="red">I love SVG</text>
</a>
</svg>
</body>
</html>
圆弧形的文字排版
<svg width="500" height="300">
<defs>
<path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
</defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">I love SVG I love DYBOY</textPath>
</text>
</svg>
1.9 滤镜
SVG的滤镜标签如下，用来增加对SVG图形的特殊效果：
- feBlend - 与图像相结合的滤镜
- feColorMatrix - 用于彩色滤光片转换
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset - 过滤阴影
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight - 用于照明过滤
- fePointLight - 用于照明过滤
- feSpotLight - 用于照明过滤
例如模糊效果：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>
二、SVG制作在线工具
在线体验地址：https://c.runoob.com/more/svgeditor/
三、总结
通过对SVG的简单使用，SVG就好比一张画布，svg标签内部包裹的这些标签就是xml描述性代码，浏览器根据这些描述性代码基于计算机图形学绘制出各种图形、效果。canvas与svg相似，另外svg的大规模使用可以参考Google的在线PPT，Google的工程师真的是把每个效果都用svg定义实现了，six！
Reference:
How to Hand Code SVG - Kezz Bracey
SVG element reference - MDN
版权声明：《 值得一学的SVG 》为DYBOY原创文章，转载请注明出处！
最后编辑:2020-12-14 14:12:11
2020-12-15 19:53
推荐阅读文章；https://juejin.cn/post/6892208975127773197
2021-02-24 16:05