SVG：可缩放矢量图形
可缩放矢量图形（Scalable Vector Graphics，SVG）基于 XML 标记语言，用于描述二维的矢量图形。作为一个基于文本的开放 Web 标准，SVG 能够优雅而简洁地渲染不同大小的图形，并和 CSS、DOM、JavaScript 和 SMIL 等其他 Web 标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。
什么是SVG
SVG 图像及其相关行为被定义于 XML 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。
和传统的点阵图像模式（如 JPEG 和 PNG）不同的是，SVG 格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容，无需图形编辑器。通过使用合适的库进行配合，SVG 文件甚至可以随时进行本地化。
SVG 是由万维网联盟（W3C）自 1999 年开始开发的开放标准。
SVG基本语法
作为 XML 的一种方言，SVG 必须正确的绑定命名空间（在 xmlns 属性中绑定）。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 绘制一个矩形 -->
<rect x="0" y="0" width="200" height="200" fill="red"/>
<!-- 绘制一个圆形 -->
<circle cx="100" cy="100" r="80" fill="green"/>
</svg>
SVG坐标系统
SVG 使用坐标系统来定位元素。默认情况下，SVG 的左上角为原点 (0, 0)，x 轴向右延伸，y 轴向下延伸。
坐标定位
如同 CSS 可以定义字体的绝对大小和相对大小，SVG 也可以定义绝对大小（比如使用像素或厘米等单位）或者相对大小（比如使用 em 单位）。
SVG基本元素
1. 矩形 - rect
使用 rect 元素可以绘制矩形。
<rect x="10" y="10" width="100" height="50" rx="5" ry="5" fill="blue"/>
2. 圆形 - circle
使用 circle 元素可以绘制圆形。
<circle cx="50" cy="50" r="40" fill="red"/>
3. 椭圆 - ellipse
使用 ellipse 元素可以绘制椭圆。
<ellipse cx="50" cy="50" rx="40" ry="20" fill="green"/>
4. 线条 - line
使用 line 元素可以绘制直线。
<line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
5. 折线 - polyline
使用 polyline 元素可以绘制折线。
<polyline points="0,0 50,50 100,0 150,50" fill="none" stroke="blue"/>
6. 多边形 - polygon
使用 polygon 元素可以绘制多边形。
<polygon points="50,0 100,100 0,100" fill="orange"/>
7. 路径 - path
path 元素是用来定义形状的通用元素。所有的基本形状都可以用 path 元素来创建。
<path d="M10 80 Q 95 10 180 80" stroke="green" fill="none"/>
SVG滤镜效果
SVG 支持滤镜，因此作者可以应用阴影或模糊等效果，甚至合并不同滤镜的结果。
高斯模糊
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>
<rect filter="url(#blur)" .../>
SVG动画
使用 SMIL 制作 SVG 动画，SMIL 是一种基于 XML 的语言，用于编写交互式多媒体演示。作者可以在 SVG 中使用 SMIL 语法来定义动画元素的时间和布局。
<circle cx="30" cy="30" r="20" fill="blue">
<animate attributeName="cx" from="30" to="170" dur="2s" repeatCount="indefinite"/>
</circle>
SVG在HTML中的应用
现代浏览器支持在 CSS 样式中使用 SVG，以便在 HTML 内容中应用图形效果。SVG 可在 HTML、CSS、某些 SVG 元素中作为图像格式使用，也可通过 Canvas API 使用。
内联SVG
可以直接在 HTML 中嵌入 SVG 代码，实现更灵活的交互和控制。
作为图像引用
<img src="image.svg" alt="SVG Image">
在CSS中引用
background-image: url('image.svg');
SVG的优势
- 无限缩放：无论放大到多大，都保持清晰的边缘
- 文件体积小：对于简单图形，SVG 文件比位图小得多
- 可编辑性：可以用任何文本编辑器修改 SVG 代码
- 可搜索：文本内容可以被搜索引擎索引
- 交互性：可以结合 JavaScript 实现交互效果
- 开放标准：W3C 制定的开放标准，不依赖特定厂商
SVG的局限性
- 不适合复杂图像：对于照片等具有丰富色彩和细节的图像，SVG 不是最佳选择
- 渲染性能：复杂的 SVG 图形可能需要更多计算资源
- 兼容性：虽然现代浏览器都支持 SVG，但一些旧版本浏览器可能存在兼容性问题
总结
SVG 作为 Web 标准的重要组成部分，为矢量图形在网页中的应用提供了强大的支持。它的开放性、可扩展性和与 Web 技术的深度集成使其成为图标、图表、简单图形等场景的理想选择。随着浏览器技术的不断进步，SVG 的应用将会更加广泛。