SVG 图形技术概览
SVG，全称为可缩放矢量图形（Scalable Vector Graphics），以XML格式定义了矢量图形。它不同于基于像素的图像格式，因为它不涉及单位的概念，图形的大小放大或缩小都能保持原有的清晰度，而不会失真。
SVG 的优势特点
- 可伸缩性：SVG 图像可以任意缩放，不会影响图像质量。
- 高质量打印：SVG 图像能够以高分辨率进行打印。
- 交互性与多功能性：SVG 图像可以嵌入文本和事件，并支持搜索功能，使其在地图制作等领域具有独特的优势。
- 纯XML标准：SVG 是基于 W3C 标准，纯粹的 XML 格式，与 HTML5 有所区别。
SVG 的标签与属性
在 SVG 中，所有的代码都包裹在 svg 标签内，这些标签是闭合的，使用方式与 HTML 中的标签类似。svg 标签拥有多种属性，例如用于指定 SVG 大小 width 和 height。
示例：设置直线
在 SVG 中设置直线时，默认的宽高值是没有单位的，可以根据需要添加不同的单位。通过 viewBox 属性可以设定 SVG 的视口区域。
viewBox 属性详解
viewBox 属性的使用语法为：<svg viewBox="x1,y1,width,height"></svg>。这四个参数分别代表 SVG 中某一部分的左上角横纵坐标及视口的宽高。通过调整这些参数，可以实现 SVG 图形的局部放大效果。
SVG 在 HTML 中的嵌入方式
SVG 的代码可以直接嵌入 HTML 页面中，也可以通过 embed、object、iframe 等 HTML 元素将 SVG 文件嵌入页面中。嵌入的 SVG 文件必须使用 .svg 后缀。
嵌入方法详解
- embed 嵌入: 适用于所有浏览器，并支持脚本使用。尽管在 HTML4 和早期 HTML 中不推荐使用，但在 HTML5 中得到了支持。
- object 嵌入: 同样适用于所有浏览器，同时支持 HTML、HTML4 和 HTML5。但与 embed 不同的是，它不允许使用脚本。
- iframe 嵌入: 同样在所有浏览器中都能使用，且可以包含脚本。虽然在一些老版本的 HTML 标准中不推荐使用，但在 HTML5 中是支持的。
- 直接在 HTML 中嵌入: 通过 svg 标签直接在 HTML 内容中插入 SVG 内容。
- 链接到 SVG 文件: 使用 a 标签直接链接到 SVG 文件。
SVG 基本图形元素
线 - line
使用 line 标签创建线条，(x1,y1) 表示起点坐标，(x2,y2) 表示终点坐标。通过 stroke 属性绘制黑色线条，stroke-width 设置线宽。
矩形 - rect
创建矩形时需提供 width 和 height 参数。x 和 y 是可选参数，默认为 (0,0)，即 SVG 的左上角起点。rx 和 ry 是圆角半径的参数，如不设置则矩形无圆角。fill 属性用于定义填充颜色。
路径 - path
path 是 SVG 中最强大的基本形状元素之一，它可以创建其他基本形状，还能绘制复杂的形状如贝塞尔曲线、二次曲线等。