版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/CJXBShowZhouyujuan/article/details/75639703
HTML5 内联 SVG
什么是SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
SVG优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
SVG 与 Canvas两者间的区别
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
HTML 页面中的 SVG
下面，你会看到三种把 SVG 文件嵌入 HTML 页面的不同方法
使用 <embed> 标签
<embed> 标签被所有主流的浏览器支持，并允许使用脚本。
<embed src="rect.svg" width="300" height="100" type="image/svg+xml"pluginspage="http://www.adobe.com/svg/viewer/install/" />
使用 <object> 标签
<object> 标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。
<object data="rect.svg" width="300" height="100" type="image/svg+xml"codebase="http://www.adobe.com/svg/viewer/install/" />
使用 <iframe> 标签
<iframe> 标签可工作在大部分的浏览器中。
<iframe src="rect.svg" width="300" height="100"></iframe>
SVG 形状
SVG 有一些预定义的形状元素，可被开发者使用和操作：
- 矩形 <rect>
- 圆形 <circle>
- 椭圆 <ellipse>
- 线 <line>
- 折线 <polyline>
- 多边形 <polygon>
- 路径 <path>
SVG 滤镜
在 SVG 中，可用的滤镜有：
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight
- fePointLight
- feSpotLight
SVG 渐变必须在 <defs> 标签中进行定义。
SVG 渐变
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。
在 SVG 中，有两种主要的渐变类型：
- 线性渐变
- 放射性渐变