什么是SVG? https://www.w3school.com.cn/svg/svg_intro.asp
svg实例汇总 https://www.runoob.com/svg/svg-examples.html
svg全称为Scalable Vector Graphics，是一种使用XML技术描述二维图形的语言，简单来说 - 矢量图(不失真)
在HTML5出现之后,将SVG内容直接定义在HTML页面中
SVG的优势
可以使用文本编辑器创建和修改，SVG可被搜索、索引等，SVG绘制的图像不失真的
-
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
-
SVG 用来定义用于网络的基于矢量的图形
-
SVG 使用 XML 格式定义图形
-
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
-
SVG 是万维网联盟的标准
-
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
与其他图像格式相比，使用 SVG 的优势在于：
-
SVG 可被非常多的工具读取和修改（比如记事本）
-
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
-
SVG 是可伸缩的
-
SVG 图像可在任何的分辨率下被高质量地打印
-
SVG 可在图像质量不下降的情况下被放大
-
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
-
SVG 可以与 Java 技术一起运行
-
SVG 是开放的标准
-
SVG 文件是纯粹的 XML
SVG 的主要竞争者是 Flash。
-
SVG与Canvas的区别
SVG不依赖于分辨率，使用DOM或绑定事件，实现大型渲染区域的应用(地图类)
Canvas依赖于分辨率，不能使用DOM或绑定事件的，运行时以图片形式出现".jpg"
设置样式
1.通过元素的属性方式
fill - 设置填充样式
fill-opacity - 设置填充透明度
stroke - 设置描边样式
stroke-width - 设置边框的宽度
2.通过style属性,使用类似于CSS属性设置方式
注意 - 不能使用CSS中的样式进行设置
transform属性，用于设置转换效果
方法有：rotate()、scale()、translate()
将SVG插入到HTML中主要有以下几种方式：
//优势：所有主要浏览器都支持，并允许使用脚本 //缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
<ember src="xxx.svg" type="image/svg+xml" />
//将 SVG 作为object对象导入
//注意，MIME type必须是*image/svg+xml*。
//可以使用CSS控制SVG的样式
//优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
//缺点：不允许使用脚本
<object data="circle1.svg" type="image/svg+xml"></object>
//将 SVG放入 iframe 中导入
//可以使用CSS控制SVG的样式
//优势：所有主要浏览器都支持，并允许使用脚本
//缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
<iframe src="circle1.svg"></iframe>
//将 SVG 作为图像导入
//这可能是将SVG导入HTML文档的最简单的方法。将`.svg`文件把它加到一个普通`<img>`标签内。
//你需要确保你的[服务器支持`.svg`文件]，可能大多数都是支持的，但是还是查一下的好。
//SVG作为图像引用时:-------------------
//- 大多数浏览器不会加载SVG自身引用的文件(其他图像，外部脚本，字体文件等)
//- 依据浏览器的安全策略，SVG中定义的脚本也可能不会执行
<img src="example.svg" alt="example">
///同时你也可以在CSS中把`.svg`文件作为一个[background-image]导入。
//注意要加一个备用的.png图像，以防浏览器无法显示svg。
.svg-bg {
background: url("example.png"); /* fallback */
background-image: url("example.svg");
}
//使用a标签链接到svg文件
<a href="circle1.svg">View SVG file</a>
//使用内联svg,之间在html中嵌入。
//直接嵌入的SVG会继承父文档的样式，默认情况下采用inline的方式进行显示。
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
</svg>
</body>
</html>
svg样式：
//fill填充颜色 stroke 轮廓线颜色 stroke-width 轮廓线宽度 stroke-linecap 属性 strokelinecap属性定义不同类型的开放路径的终结：线条的两端是矩形还是圆角等
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" /><!-- 矩形 -->
<path stroke-linecap="round" d="M5 40 l215 0" /><!-- 圆角 -->
<path stroke-linecap="square" d="M5 60 l215 0" /><!-- 方形 -->
</g>
</svg>
//
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>
SVG滤镜用来增加对SVG图形的特殊效果。所有互联网的svg滤镜定义在<defs>元素中。<defs>元素定义短并含有特殊元素（如滤镜）的定义。<filter>标签用来定义svg滤镜，使用必需的id来定义向图形应用哪个滤镜。
SVG可用的滤镜是：
-
feBlend - 与图像相结合的滤镜
-
feColorMatrix - 用于彩色滤光片转换
-
feComponentTransfer
-
feComposite
-
feConvolveMatrix
-
feDiffuseLighting
-
feDisplacementMap
-
feFlood
-
feGaussianBlur
-
feImage
-
feMerge
-
feMorphology
-
feOffset - 过滤阴影
-
feSpecularLighting
-
feTile
-
feTurbulence
-
feDistantLight - 用于照明过滤
-
fePointLight - 用于照明过滤
-
feSpotLight - 用于照明过滤
除此之外，可以在每个 SVG 元素上使用多个滤镜！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- SVG内容直接定义在html页面中 -->
<!-- 直接嵌入的SVG会继承父文档的样式，默认情况下采用inline的方式进行显示。 -->
<!-- SVG绘制图形使用‘/’单标签表示结束符 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="1000">
<!-- 矩形元素 -->
<rect x="30" y="30" width="300" height="100" rx="20" ry="20" style="fill:olive;stroke-width:5;stroke:red;"/>
<!-- x和y - 绘制矩形的左上角坐标值
width和height - 设置绘制矩形的宽度和高度
rx和xy - 设置矩形的圆角
矩形的轮廓线为5px的红色轮廓，填充色为牛油果绿-->
<!-- 椭圆元素 -->
<ellipse cx="400" cy="220" rx="100" ry="200" style="fill:pink;stroke-width:2;stroke:black;fill-opacity:0.7;stroke-opacity:0.9"/>
<!-- cx和cy - 绘制椭圆的圆心坐标值
rx和ry- 绘制椭圆的水平方向/垂直方向的半径 【注意：当rx和ry的值相同时,绘制的是圆形】
fill-opacity 填充色透明度 stroke-opacity 轮廓线透明度 -->
<!-- 圆形元素 -->
<circle cx="100" cy="350" r="40" stroke="black" stroke-width="2" fill="red" />
<!-- cx cy表示圆心的x,y坐标。 r表示圆的半径。 -->
<!-- 直线元素 -->
<line x1="0" y1="0" x2="100" y2="300" style="stroke-width:2;stroke:red;"/>
<!-- <line x1="起点坐标" y1="" x2="终点坐标" y2="" /> -->
<!-- 注意：绘制直线时,默认描边颜色为白色 -->
<!-- 多边形元素:比如三角形 -->
<polygon points="10,150 200,150 300,550" style="fill:orange;stroke:orangered;stroke-width:2;"/>
<!-- points--折线中所有的点坐标，都设置在该属性中 -->
<!-- 曲线元素：折线 -->
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke-width:2;stroke:blue;" />
<!-- 特效元素如下 ：注意：线性渐变或射线渐变,设置基准线(圆)的坐标值必须是百分值，允许为负值，允许为大于 100% 的值
设置渐变颜色位置必须是百分值只能是从 0% ~ 100%----------------------------------------------------------->
<!-- 线性渐变------基准线 -->
<!-- <defs>
<linearGradient id="grad" x1="基准线的起点坐标" y1="" x2="基准线的终点坐标" y2="" >
<stop offset="0%~100%" stop-color="颜色" />
</linearGradient>
</defs>
<rect fill="url(#渐变元素的id)" /> -->
<!-- 线性元素 实例--------------------------------------------- -->
<defs>
<!-- 水平渐变 【垂直渐变：<linearGradient id="grad000" x1="0%" y1="0%" x2="0%" y2="100%" >】 -->
<linearGradient id="grad000" x1="0%" y1="0%" x2="100%" y2="0%" >
<stop offset="0%" stop-color="red" stop-opacity="0.7" />
<stop offset="100%" style="stop-color:yellow;stop-opacity:1;" />
</linearGradient>
</defs>
<ellipse cx="800" cy="70" rx="85" ry="55" fill="url(#grad000)" />
<!-- 放射性渐变----------------基准圆 -->
<!-- <defs>
<radialGradient id="grad" fx="起点基准圆的圆心x" fy="" cx="终点基准圆的圆心" cy="" r="终点基准圆的半径" >
<stop offset="0%~100%" stop-color="颜色" />
</radialGradient>
</defs>
<rect fill="url(#渐变元素的id)" /> -->
<!-- 放射性渐变--------------实例------------------------------------------- -->
<defs>
<radialGradient id="grad111" fx="50%" fy="50%" cx="50%" cy="50%" r="50%" >
<stop offset="0%" style="stop-color:teal;stop-opacity:0;" />
<stop offset="100%" style="stop-color:rgb(163, 37, 163);stop-opacity:1;" />
</radialGradient>
</defs>
<rect x="500" y="300" width="300" height="100" fill="url(#grad111)" />
<!-- svg路径===================【是一个闭环 z关闭后，会回到起点。默认填充黑色】================================================== -->
<!-- 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 关闭路径-->
<!-- ！！！注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位 -->
<path d="M550 0 L475 200 L625 200 Z" fill="none" stroke="red" stroke-width="5"/>
<!-- 从150 0位置开始，到75 200，再到225 200,结束 -->
<!-- 下面的例子创建了一个二次方贝塞尔曲线，A 和 C 分别是起点和终点，B 是控制点：================================ -->
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue"
stroke-width="5" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g font-size="30" font="sans-serif" fill="black" stroke="none"
text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
<!-- ================================================================================================= -->
<!-- svg文本=============================-旋转黑色文字============================================================= -->
<text x="0" y="15" fill="black" transform="rotate(30 20,40)">I love SVG</text>
<!-- 路径上的文本----------------------------- -->
<defs>
<path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
</defs>
<text x="0" y="100" style="fill:blue;">
<textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text>
<!-- 文本内容分小组--------------------------------------------------- -->
<text x="500" y="20" style="fill:red;">Several lines:
<tspan x="500" y="45">First line</tspan>
<tspan x="500" y="70">Second line</tspan>
</text>
<!-- 链接文本--------------------------------------------------------->
<a xlink:href="https://www.baidu.com" target="_blank">
<text x="800" y="215" fill="black">I love SVG</text>
</a>
<!-- 滤镜模糊--高斯模糊==============【注意： Internet Explorer和Safari不支持SVG滤镜！】===================================================--->
<!-- <filter></filter>滤镜元素 -->
<!-- <feGaussianBlur></feGaussianBlur>该标签用于创建模糊效果 -->
<!-- 滤镜模糊效果实例------------------------------------------------------------------- -->
<defs>
<!-- filter定义一个滤镜的唯一名称 x和y表示什么？？？？？？？？？？-->
<filter id="f1" x="0" y="0">
<!-- feGaussianBlur定义模糊效果 in="SourceGraphic"表示由整个图像创建效果 stdDeviation定义模糊量 -->
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" x="500" y="500" stroke="green" stroke-width="25" fill="yellow" filter="url(#f1)" />
<!-- filter="url(#f1)"用来将rect矩形元素链接到#f1滤镜 -->
<!-- 阴影效果============实例1================================================== -->
<defs>
<filter id="ff" x="0" y="0" width="200%" height="200%" >
<!-- feOffset元素创建阴影效果 将svg图像在xy屏幕平移 dx dy表示水平/垂直平移量-->
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<!-- feBlend混合偏移图像顶部 -->
<feBlend in="SourceGraphic" in2="offout" mode="normal" />
</filter>
</defs>
<rect width="90" x="800" y="450" height="90" stroke="purple" stroke-width="5" fill="yellow" filter="url(#ff)" />
<!-- 阴影效果----------------实例2---------------阴影变模糊----------------------------------------- -->
<defs>
<filter id="gg" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<!-- <feGaussianBlur>元素的stdDeviation属性定义模糊量 -->
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<!-- 混合 -->
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" x="800" y="650" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#gg)" />
<!-- 阴影效果---------------实例3-------------制作黑色阴影---------------------------------- -->
<defs>
<filter id="kk" x="0" y="0" width="200%" height="200%">
<!-- in="SourceAlpha"表示在Alpha通道使用残影，而不是整个rgba像素 -->
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<!-- 定义模糊量 -->
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<!-- 混合 -->
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" x="800" y="800" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#kk)" />
<!-- 阴影效果-------------实例4-------------给阴影设置颜色-------------------------------------------- -->
<defs>
<filter id="xx" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<!-- <feColorMatrix>过滤器是用来转换偏移的图像使之更接近黑色的颜色。 '0.2'矩阵的三个值都获取乘以红色，绿色和蓝色通道。降低其值带来的颜色至黑色（黑色为0） -->
<feColorMatrix
result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0
0 0.2 0 0 0
0 0 0.2 0 0
0 0 0 1 0" />
<!-- 定义模糊量 -->
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
<!-- 混合 -->
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" x="850" y="300" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#xx)" />
</svg>
</body>
</html>