SVG 意为可缩放矢量图形（Scalable Vector Graphics）
个人认为现在svg可能有点过时了，svg的很多功能css3或者canvas都能做到很好的效果，
但是刚刚研究了一下还是看到了一些很实在的写法。
优势：
SVG 图像可通过文本编辑器来创建和修改SVG 图像可被搜索、索引、脚本化或压缩SVG 是可伸缩的SVG 图像可在任何的分辨率下被高质量地打印SVG 可在图像质量不下降的情况下被放大SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）这些优势是官方给出的，对于前端来说优势比较明确的可能是可操作的dom结构
svg一般使用的场景：
1，划一条直线：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /></svg>
2，一个圆
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg>
3.椭圆
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="100" cy="80" rx="200" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" /></svg>
4，一个五角星
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/></svg>
5，折线
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" /></svg>
6，路径上文字
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <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 SVG</textPath> </text></svg>
7，动画文字
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g transform="translate(100,100)"> <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24"> It's SVG! <animateMotion path="M 0 0 L 100 100" dur="5s" fill="freeze" /> </text> </g></svg>
还有各种滤镜，虚化，动画等等。大部分都是css3动画可以实现的了
我的博客即将搬运同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=3o2gu4wiqq68k
转载于:https://www.cnblogs.com/937522zy/p/9579097.html
相关资源：nacos1.0.0 超强稳定版.zip