svg
svg（Scalable Vector Graphics）是一种图像文件格式，是可缩放的矢量图像。
svg是用XML定义的语言，用来描述二维矢量及矢量/栅格图像。
不同于常规的jpg格式图像文件，缩放不会影响图像质量，不会失真模糊。并且可以直接用svg代码来描述图像，可以使用任何文字处理工具打开svg图像文件，随时可以插入到HTML中通过浏览器打开，通过代码编辑使svg图像具有交互功能。
早期浏览器不支持svg，需通脱< object >元素。
除了通过直接嵌入在html中，svg也可以当做.svg后缀文件作为普通图片通过标签引入至网页中，通过< img >、< object >元素展示svg图像的时候，svg就变成了另外一种图片格式，对于JavaScript开发来说不甚友好，更好的方式是直接将svg图片的代码嵌入到html文档中。
svg标签：
| svg元素标签 | 作用 |
|---|---|
| a | 定义超链接 |
| animate | 动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里，属性从开始值变成结束值。 |
| animateMotion | 元素定义了一个元素如何沿着运动路径进行移动 |
| animateTransform | 元素变动了目标元素上的一个变形属性，从而允许动画控制转换、缩放、旋转或斜切。 |
| circle | 是一个SVG的基本形状，用来创建圆,基于一个圆心和一个半径 |
| clipPath | 定义一条剪切路径，可作为其他元素的 clip-path 属性的值。剪切路径限制了图形的可见范围。从概念上来说，如果图形超出了当前剪切路径所包围的区域，那么超出部分将不会绘制 |
| color-profile | 该元素允许描述用于图像的颜色配置文件 |
| defs | 允许我们定义以后需要重复使用的图形元素。 建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加SVG内容的易读性和可访问性。 在defs元素中定义的图形元素不会直接呈现 |
| desc | SVG绘画中的每个容器元素或图形元素都可以提供一个desc描述性字符串，这些描述只是纯文本的。如果当前的SVG文档片段在视媒体中呈现，desc元素不会呈现为图形的一部分。替代性提词既可以看到也可以听到，它显示了desc元素但是不会显示路径元素或者别的图形元素。desc元素提升了SVG文档的可访问性 |
| discard | |
| ellipse | ellipse元素是一个SVG基本形状，用来创建一个椭圆，基于一个中心坐标以及它们的x半径和y半径 |
| feBlend | feBlend滤镜把两个对象组合在一起，使它们受特定的混合模式控制。这类似于图像编辑软件中混合两个图层。该模式由属性mode定义 |
| feColorMatrix | 该滤镜基于转换矩阵对颜色进行变换。每一像素的颜色值(一个表示为[红,绿,蓝,透明度] 的矢量) 都经过矩阵乘法 (matrix multiplated) 计算出的新颜色 |
| feComponentTransfer | 滤镜基元对每个像素执行颜色分量的数据重映射.它允许进行像亮度调整,对比度调整,色彩平衡或阈值的操作 |
| feComposite | 该滤镜执行两个输入图像的智能像素组合，在图像空间中使用以下Porter-Duff合成操作之一：over、in、atop、xor |
| feConvolveMatrix | 元素应用了一个矩阵卷积滤镜效果 |
| feDiffuseLighting | 滤镜光照一个图像，使用alpha通道作为隆起映射 |
| feDisplacementMap | 映射置换滤镜，该滤镜用来自图像中从in2到空间的像素值置换图像从in到空间的像素值 |
| feDistantLight | 该滤镜定义了一个距离光源，可以用在灯光滤镜feDiffuseLighting元素或feSpecularLighting元素的内部 |
| feDropShadow | |
| feFlood | 该滤镜用flood-color元素定义的颜色和flood-opacity元素定义的不透明度填充了滤镜子区域 |
| feFuncA | 滤镜，为它的父元素 feComponentTransfer 的输入图形的透明度（alpha）组件定义了变换函数 |
| feFuncB | 滤镜，为它的父feComponentTransfer元素的输入图形的蓝色成分定义了变换函数 |
| feFuncG | 滤镜，为它的父feComponentTransfer元素的输入图形的绿色成分定义了变换函数 |
| feFuncR | 滤镜，为它的父feComponentTransfer元素的输入图形的红色成分定义了变换函数 |
| feGaussianBlur | 滤镜对输入图像进行高斯模糊，属性stdDeviation中指定的数量定义了钟形 |
| feImage | 滤镜从外部来源取得图像数据，并提供像素数据作为输出（意味着如果外部来源是一个SVG图像，这个图像将被栅格化。） |
| feMerge | 滤镜允许同时应用滤镜效果而不是按顺序应用滤镜效果 |
| feMergeNode | 拿另一个滤镜的结果，让它的父feMerge元素处理 |
| feMorphology | 该滤镜用来侵蚀或扩张输入的图像。它在增肥或瘦身效果方面特别有用 |
| feOffset | 该输入图像作为一个整体，在属性dx和属性dy的值指定了它的偏移量 |
| fePointLight | 光源元素 |
| feSpecularLighting | 该滤镜照亮一个源图形，使用alpha通道作为隆起映射 |
| feSpotLight | 是一种光源元素，用于SVG文件 |
| feTile | 输入图像是平铺的，结果用来填充目标。它的效果近似于一个pattern图案对象 |
| feTurbulence | 该滤镜利用Perlin噪声函数创建了一个图像 |
| filter | 作用是作为原子滤镜操作的容器。它不能直接呈现。可以利用目标SVG元素上的filter属性引用一个滤镜 |
| foreignObject | |
| g | 元素g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。此外，g元素也可以用来定义复杂的对象，之后可以通过use元素来引用它们 |
| hatch | |
| hatchpath | |
| image | 表现为图像文件或者其他SVG文件。svg图像格式转换软件支持JPEG、PNG格式，是否支持动图GIF不明确 |
| line | 是一个SVG基本形状，用来创建一条连接两个点的线 |
| linearGradient | 用来定义线性渐变，用于图形元素的填充或描边 |
| marker | 定义了在特定的path元素、line元素、polyline元素或者polygon元素上绘制的箭头或者多边标记图形 |
| mask | 用于定义这样的遮罩元素 |
| mesh | |
| meshgradient | |
| meshpatch | |
| meshrow | |
| metadata | 数据的结构化数据。SVG内容里面包含的元数据必须放在metadata元素里面 |
| mpath | 元素的mpath子元素使animateMotion 元素能够引用一个外部的path元素作为运动路径的定义 |
| path | 是用来定义形状的通用元素。所有的基本形状都可以用path元素来创建 |
| pattern | 使用预定义的图形对一个对象进行填充或描边，就要用到pattern元素 |
| polygon | 定义了一个由一组首尾相连的直线线段构成的闭合多边形形状。最后一点连接到第一点 |
| polyline | 是SVG的一个基本形状，用来创建一系列直线连接多个点。典型的一个polyline是用来创建一个开放的形状，最后一点不与第一点相连 |
| radialGradient | 用来定义径向渐变，以对图形元素进行填充或描边 |
| rect | 是SVG的一个基本形状，用来创建矩形，基于一个角位置以及它的宽和高。它还可以用来创建圆角矩形 |
| script | 一个SVG脚本元素等同于HTML中的script元素，因此这个位置是面向脚本的（例如，ECMAScript）。任何定义在script元素中的函数拥有一个跨当前文档的全局范围 |
| set | 可以用来设定一个属性值，并为该值赋予一个持续时间。它支持所有的属性类型， 包括那些原理上不能插值的， 例如值为字符串和布尔类型的属性 |
| solidcolor | |
| stop | 一个渐变上的颜色坡度，是用stop元素定义的 |
| style | 元素样式表直接在SVG内容中间嵌入。SVG的style元素的属性与HTML中的相应的元素并无二致 |
| svg | 如果svg不是根元素，svg 元素可以用于在当前文档（比如说，一个HTML文档）内嵌套一个独立的svg片段 。 这个独立片段拥有独立的视口和坐标系统 |
| switch | 对它的直接子元素上的属性requiredFeatures、属性requiredExtensions 和 属性systemLanguage按照顺序进行评估，然后处理和呈现第一个评估为true的子元素。 其他子元素会被绕过不会被呈现。如果某个子元素是容器元素比如说是一个
|
| symbol | 用来定义一个图形模板对象，它可以用一个use元素实例化 |
| text | 定义了一个由文字组成的图形。注意：我们可以将渐变、图案、剪切路径、遮罩或者滤镜应用到text上 |
| textPath | 除了笔直地绘制一行文字以外， SVG 也可以根据 path 元素的形状来放置文字。 只要在textPath元素内部放置文本，并通过其xlink:href属性值引用path元素，我们就可以让文字块呈现在path元素给定的路径上了 |
| title | SVG绘图中的每个窗口元素或图形元素都可以提供一个title描述性字符串，该描述只能是纯文本 |
| tspan | 在 text元素中，利用内含的tspan元素，可以调整文本和字体的属性以及当前文本的位置、绝对或相对坐标值 |
| unknown | |
| use | use元素在SVG文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的DOM中，然后将其粘贴到use元素的位置，很像HTML5中的克隆模板元素。因为克隆的节点是不可见的，所以当使用CSS样式化一个use元素以及它的隐藏的后代元素的时候，必须小心注意。隐藏的、克隆的DOM不能保证继承CSS属性，除非你明文设置使用CSS继承 |
| view | view元素是查看图片的一个限定方法，就像一个缩放级别或者一个详细视图。 |
☆☆☆mdn:https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute
svg-viewbox
viewBox属性的值是一个包含4个参数的列表 min-x, min-y, width and height， 以空格或者逗号分隔开， 在用户空间中指定一个矩形区域映射到给定的元素,查看属性preserveAspectRatio。
☆不允许宽度和高度为负值,0则禁用元素的呈现。
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="150" height="100" viewBox="0 0 3 2">
<rect width="150" height="100" x="0" fill="#008d46" />
</svg>
绘制矩形
<svg width="120" height="120"
viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100"/>
</svg>
带圆角矩形
<svg width="120" height="120"
viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100" rx="35" ry="35"/>
</svg>
绘制圆形
<svg viewBox="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="60" r="10"/>
</svg>
其中，r是元的半径，cx/cy为圆的中心点的坐标。
椭圆
线
绘制虚线带箭头
<?xml version="1.0"?>
<svg class="svg" width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<style>
/* <![CDATA[ */
.svg {
fill:#41e;
}
/* ]]> */
</style>
<defs>
<marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5"
markerWidth="6" markerHeight="6" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<polyline points="10,90 50,80 90,20" fill="none" stroke-dasharray="4 4" stroke="black"
stroke-width="2" marker-end="url(#Triangle)" />
</svg>
后续继续更新加内容…