SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。
SVG是W3C制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。
SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
SVG 图像可通过文本编辑器来创建和修改；
SVG 图像可被搜索、索引、脚本化或压缩；SVG 是可伸缩的；SVG 图像可在任何的分辨率下被高质量地打印；
SVG 可在图像质量不下降的情况下被放大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
svg {
border: 1px solid silver;
}
</style>
</head>
<body>
<!-- 基本形状 -->
<svg width="200" height="150">
<!-- 矩形 - rect元素属性：x：矩形左上角的坐标(用户坐标系)的x值。y：矩形左上角的坐标(用户坐标系)的y值。width：矩形宽度。height：矩形高度。 -->
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="2" />
<!-- 矩形 - rx：实现圆角效果时，圆角沿x轴的半径。ry：实现圆角效果时，圆角沿y轴的半径。 -->
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="2" />
<!-- 圆 - circle元素：r：圆的半径。cx：圆心坐标x值。cy：圆心坐标y值。 -->
<circle cx="125" cy="25" r="15" stroke="red" fill="transparent" stroke-width="2" />
<!-- 椭圆 - ellipse元素：rx：半长轴(x半径)。ry：半短轴(y半径)。cx：圆心坐标x值。cy：圆心坐标y值。 -->
<ellipse cx="170" cy="25" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="2" />
<!-- 直线 - line元素：x1：起点x坐标。y1：起点y坐标。x2：终点x坐标。y2：终点y坐标。 -->
<line x1="10" x2="40" y1="50" y2="80" stroke="orange" fill="transparent" stroke-width="2" />
<!-- 折线 - polyline元素：points：一系列的用空格，逗号，换行符等分隔开的点。每个点必须有2个数字：x值和y值 -->
<polyline points="50,50 50,60 60,60 60,70 70,70 70,80" stroke="orange" fill="transparent" stroke-width="2" />
<!-- 多边形 - polygon元素：points：一系列的用空格，逗号，换行符等分隔开的点。每个点必须有2个数字：x值和y值。 -->
<polygon points="220,100 300,210 170,250" stroke="green" fill="transparent" stroke-width="2" />
<!-- path元素的d属性，代表路径数据。在d的值中，M代表移至(Move to)，L代表划线至(Line to),Q代表二次贝塞尔曲线，T代表没有控制点的二次贝塞尔曲线
，C代表三次贝塞尔曲线，S代表省略第一个控制点的三次贝塞尔曲线，H代表水平划线，V代表垂直划线，A代表绘制圆弧，Z代表闭合路径。
以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。-->
<path d="M20,130 Q40,105 50,130 T90,130" fill="none" stroke="blue" stroke-width="2" />
</svg>
<!-- <g>元素代表“组”，组内的元素作为一个整体。如果为组添加了变换属性，那么组中所有内容都会进行变换。变换属性包含了旋转、变形、缩放和斜切。 -->
<svg width="200" height="150">
<g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup">
<rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
</g>
</svg>
<!-- SVG中的<defs>元素用于定义留待将来使用的内容。可以用<use>元素将<defs>定义的内容链接到需要展示的地方。 -->
<svg width="200" height="150">
<defs>
<g id="ShapeGroup">
<rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
</g>
</defs>
<use xlink:href="#ShapeGroup" transform="translate(60,0) rotate(90) scale(0.4)"></use>
<use xlink:href="#ShapeGroup" transform="translate(80,30) rotate(0) scale(0.75)"></use>
<use xlink:href="#ShapeGroup" transform="translate(20,60) rotate(39) scale(0.25)"></use>
</svg>
<!-- 图案和渐变 -->
<svg width="200" height="150">
<defs>
<!-- 图案填充 patternUnits值默认为objextBoundingBox，指pattern大小是占所填充图形的大小 -->
<pattern id="RectPattern" width=".2" height=".2">
<rect x="0" y="0" width="5" height="5" stroke="black" fill="green" stroke-width="1" />
</pattern>
<pattern id="TrianglePattern" width="10" height="10" patternUnits="userSpaceOnUse">
<polygon points="5,0 10,10 0,10" />
</pattern>
<!-- linearGradient元素 - 定义线性渐变，x1,y1,x2,y2属性定义了渐变的方向，默认不写的话是水平渐变 -->
<linearGradient id="LineGradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#000"></stop>
<stop offset="100%" stop-color="#f00"></stop>
</linearGradient>
<!-- radialGradient - 定义径向渐变，cx,cy,r属性定义了径向渐变的圆心和半径 ，fx,fy属性定义颜色中心处的位置-->
<radialGradient id="RadialGradient" cx="0.5" cy="0.5" r="1" fx="0.75" fy="0.75">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<rect x="5" y="5" width="90" height="60" stroke="red" fill="url(#LineGradient)" />
<rect x="100" y="5" width="90" height="60" stroke="red" fill="url(#RadialGradient)" />
<rect x="5" y="70" width="90" height="60" stroke="red" fill="url(#RectPattern)" />
<rect x="100" y="70" width="90" height="60" stroke="red" fill="url(#TrianglePattern)" />
</svg>
<!-- SVG文本 -->
<svg width="300" height="150">
<!-- 文本元素text text-anchor设置水平对齐的方式，start、middle、end。默认值是start。-->
<text x="10" y="20" stroke="#00f" fill="#00f" font-size="20px" font-weight="bold">
你好，SVG
<!-- 文本区间 - tspan元素，它用于渲染一个区间内的文本；它只能出现在text元素或者tspan元素的子元素中。典型的用法就是强调显示部分文本。rotate用于设置字体的旋转角度，x、y用于设置包含的文本的绝对坐标值 -->
<tspan font-weight="bold" fill="red">今天是个好天气</tspan>
</text>
<text x="10" y="70" stroke="#00f" fill="#00f" font-size="13px" font-weight="bold">
<!-- 文本路径 - textPath元素:xlink:href属性获取指定的路径并把文本对齐到这个路径上,艺术字效果 -->
<textPath xlink:href="#my_path">今天是个好天气</textPath>
</text>
<path d="M20,50 Q40,25 50,50 T90,50" id="my_path" fill="none" stroke="blue" stroke-width="5" />
</svg>
<!-- SVG图片 -->
<svg width="200px" height="150px">
<image xlink:href="images/1.jpg" x="0" y="0" height="150px" width="200px" />
</svg>
<!-- SVG滤镜 -->
<svg width="200px" height="150px">
<defs>
<!-- <filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜
<filter> 标签必须嵌套在 <defs> 标签内。 -->
<filter id="Gaussian_Blur">
<!-- <feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度,in="SourceGraphic" 这个部分定义了由整个图像创建效果 -->
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
</defs>
<image xlink:href="images/1.jpg" x="0" y="0" height="150px" width="200px" filter="url(#Gaussian_Blur)" />
</svg>
<!-- SVG动画实例
attributeName表示要变化的元素属性名称
attributeType支持三个固定参数：CSS、XML、auto，用来表明attributeName属性值的列表。x、y以及transform属于XML；opacity等CSS属于CSS；auto为默认值
from 动画的起始值
to 指定动画的结束值
by 动画的相对变化值
values 用分号分隔的一个或多个值，可以看成是动画的多个关键值点
begin 指动画开始的时间 beigin="3s;6s"表示的是3s之后动画走一下，6s时候动画再走一下
begin=[元素的id].begin/end +/- 时间值 表示其它动画begin或者end之前或者之后动画开始，可以实现两个独立元素的动画级联效果。
begin=[元素的id].[事件类型] +/- 时间值 表示事件触发之后动画开始
begin=[元素的id].repeat(整数) +/- 时间值 指其它动画重复N次之后动画开始
begin="indefinite"，表示“无限等待”。
dur属性值只有两种：常规时间值 | "indefinite" "indefinite"指动画不执行
calcMode, keyTimes, keySplines 控制动画曲线 calcMode属性支持4个值：discrete | linear | paced | spline
repeatCount表示动画执行次数
repeatDur定义重复动画的总时间
fill表示动画间隙的填充方式。支持参数有：freeze | remove。其中remove是默认值，表示动画结束直接回到开始的地方。freeze 表示动画结束后元素保持了动画时的状态
accumulate 累积 支持参数有：none | sum。默认值是none， sum表示动画结束时候的位置作为下次动画的起始位置
additive控制动画是否附加。支持参数有：replace | sum。默认值是replace ，sum表示动画会附加到其他低优先级的动画上
内置的API:svg.pauseAnimations()暂停和svg.unpauseAnimations()启动动画
-->
<svg width="200px" height="150px">
<text font-size="20" y="30" x="0">
蒲公英
<set attributeName="x" attributeType="XML" to="60" begin="2s" />
</text>
<text font-size="20" y="60" x="0">
蒲公英
<animate attributeName="x" to="60" begin="0s" dur="2s" repeatCount="indefinite" />
</text>
<text font-size="20" y="90" x="0">
蒲公英
<!-- <animateTransform>用于实现transform变换动画效果 -->
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="1.2" begin="0s" dur="2s" repeatCount="indefinite" />
</text>
<text font-size="20" y="120" x="0">
蒲公英
<!-- <animateMotion>可以让SVG各种图形沿着特定的path路径运动 -->
<animateMotion path="M 0 0 H 30 V 30 Z" begin="0s" dur="3s" repeatCount="indefinite" />
</text>
</svg>
<svg width="200px" height="150px">
<text font-size="20" y="30" x="0">
蒲公英
<animate attributeName="x" values="0;50;0;70;0" dur="2s" repeatCount="indefinite" />
</text>
<text font-size="20" y="60" x="0">
蒲公英
<animate id="x1" attributeName="x" to="70" dur="2" fill="freeze" />
<animate attributeName="y" begin="x1.end" to="80" dur="2" fill="freeze" />
</text>
<g>
<circle id="circle" cx="10" cy="85" r="10" />
<text font-size="20" y="90" x="30">
蒲公英
<animate id="x2" attributeName="x" begin="circle.click" to="70" dur="2" />
</text>
</g>
<text font-size="20" y="120" x="0">
蒲公英
<animate id="x3" attributeName="x" to="70" dur="2" repeatCount="3" />
<animate attributeName="y" begin="x3.repeat(2)" to="150" dur="2" fill="freeze" />
</text>
</svg>
<svg width="200px" height="150px" onclick="func(this)">
<g>
<text font-size="20" y="30" x="50">
蒲公英
<animate id="animate1" attributeName="x" begin="indefinite" to="70" dur="1" repeatCount="indefinite" />
</text>
<a xlink:href="#animate1">
<text y="30" fill="#cd0000" font-size="20">点击</text>
</a>
</g>
<text font-size="20" y="60" x="0">
蒲公英
<animate attributeName="x" dur="3" values="40;60;80;100" calcMode="discrete" repeatCount="indefinite" />
</text>
<text font-size="20" y="90" x="0">
蒲公英
<animate attributeName="x" dur="3" values="40;60;80;100" calcMode="paced" repeatCount="indefinite" />
</text>
<text font-size="20" y="120" x="0">
蒲公英
<animate attributeName="x" dur="3" values="40;60;100" keyTimes="0; .8; 1" calcMode="spline" keySplines=".5 0 .5 1; 0 0 1 1" repeatCount="indefinite" />
</text>
</svg>
<script>
function func(this_obj) {
if (!this_obj.paused) {
this_obj.paused = true;
this_obj.pauseAnimations();
} else {
this_obj.paused = false;
this_obj.unpauseAnimations();
}
}
</script>
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="150px" version="1.1">
<rect id="rec" x="300" y="100" width="300" height="100" style="fill: lime">
<animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" />
<animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" />
<animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="400" />
<animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="150" />
<animate attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze" />
</rect>
<g transform="translate(50,50)">
<text id="TextElement" x="0" y="0" style="font-size: 24; visibility: hidden">
It's SVG!
<set attributeName="visibility" attributeType="CSS" to="visible" begin="0s" dur="5s" fill="freeze" />
<animateMotion path="M 0 0 L 100 50" begin="1s" dur="5s" fill="freeze" />
<animate attributeName="fill" attributeType="CSS" from="red" to="blue" begin="1s" dur="5s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" begin="1s" dur="5s" fill="freeze" />
</text>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150" version="1.1">
<rect x="0" y="0" width="200" height="150" style="fill: blue">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
</rect>
</svg>
<!-- 超链接 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="150" version="1.1">
<a xlink:href="http://www.w3schools.com" target="_blank">
<rect x="0" y="0" width="200" height="150" style="fill: blue; stroke: pink; stroke-width: 5; opacity: 0.9" />
</a>
</svg>
</body>
</html>
