SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的矢量图像格式，由 W3C 制定。与 JPEG、PNG、GIF 等栅格图像 不同，SVG 使用数学描述（如路径、形状、文本等）来定义图像，因此可以无损缩放到任意尺寸。
一、总体结构：纯文本 XML
SVG 文件本质上是一个 XML 文档 ，通常以 .svg 为扩展名，也可以内嵌在 HTML 中（inline SVG）。
最简 SVG 示例：
xml
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>二、基本文件结构
一个完整的 SVG 文件通常包含以下部分：
xml
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200"
height="200"
viewBox="0 0 200 200"
>
<!-- 可选：定义区（defs） -->
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
<symbol id="icon-star" viewBox="0 0 16 16">
<path d="M8 0L10 6H16L11 9L13 15L8 12L3 15L5 9L0 6H6Z"/>
</symbol>
</defs>
<!-- 图形元素 -->
<rect x="10" y="10" width="180" height="180" fill="url(#grad1)" />
<use href="#icon-star" x="80" y="80" width="40" height="40" />
<!-- 其他元素：文本、路径、组等 -->
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">
Hello SVG
</text>
</svg>三、核心组成部分详解
1. XML 声明（可选）
xml
<?xml version="1.0" encoding="UTF-8"?>- 非必需（尤其在 HTML 内嵌时），但建议保留以确保编码正确。
2. 根元素 <svg>
必须包含命名空间声明：
xml
xmlns="http://www.w3.org/2000/svg"常用属性：
| 属性 | 说明 |
|---|---|
width / height |
显示尺寸（可带单位：px, em, % 等） |
viewBox |
定义用户坐标系："min-x min-y width height"，支持缩放和裁剪 |
preserveAspectRatio |
控制 viewBox 如何适配容器（如 "xMidYMid meet"） |
version |
SVG 版本（如 "1.1"，现代浏览器通常忽略） |
✅ 关键概念 ：
viewBox使 SVG 具备响应式能力。例如viewBox="0 0 100 100"表示内部使用 100×100 的逻辑坐标系，无论外部容器多大都能自适应。
3. <defs> 区域（Definitions）
用于定义可复用 的图形对象，不会直接渲染 ，需通过引用（如 <use>）显示。
支持定义：
<linearGradient>/<radialGradient>：渐变<pattern>：图案填充<symbol>：带独立 viewBox 的可复用图标<clipPath>：裁剪路径<mask>：遮罩<filter>：滤镜效果（如模糊、阴影）
4. 图形元素（可渲染）
SVG 提供多种基本图形和路径：
| 元素 | 用途 |
|---|---|
<rect> |
矩形 |
<circle> / <ellipse> |
圆 / 椭圆 |
<line> |
直线 |
<polyline> / <polygon> |
折线 / 多边形 |
<path> |
最强大 ：通过 d 属性描述任意路径（贝塞尔曲线、弧线等） |
<text> |
文本（支持字体、旋转、路径文本等） |
<image> |
嵌入位图（如 PNG、JPEG） |
<g> |
分组：对多个元素统一变换或样式 |
<path> 示例：
xml
<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="none"/>M= Move toC= Cubic Bezier curve
5. <use> 元素
引用 <defs> 中定义的内容（如 <symbol>、<g>）：
xml
<use href="#my-icon" x="20" y="30" />- 现代标准使用
href（旧版用xlink:href，需声明xmlns:xlink）
6. 样式与交互
-
内联样式 ：
style="fill:red; opacity:0.8" -
CSS 类 ：
class="icon"+ 外部 CSS -
事件 ：支持
onclick、onmouseover等（可用于交互动画） -
SMIL 动画 （已逐渐被 CSS/JS 动画取代）：
xml<circle r="10"> <animate attributeName="r" values="10;50;10" dur="2s" repeatCount="indefinite"/> </circle>
四、SVG 文件类型
| 类型 | 说明 |
|---|---|
| Standalone SVG | 独立 .svg 文件，可被浏览器直接打开 |
| Inline SVG | 直接写在 HTML 中，便于 CSS/JS 控制 |
| SVG Sprite | 多个图标合并到一个 <defs> 或 <symbol> 中，按需引用 |
| Compressed SVGZ | 使用 GZIP 压缩的 SVG（.svgz），需服务器正确配置 MIME 类型 |
五、优势与局限
✅ 优势：
- 无限缩放不失真
- 文件小（尤其简单图形）
- 可搜索、可编辑、可脚本化
- 支持 CSS 和 DOM 操作
- 良好的可访问性 （可加
<title>、<desc>）
❌ 局限：
- 不适合照片级复杂图像（此时用 JPEG/WebP 更高效）
- 渲染性能：超复杂路径可能影响性能
- 安全风险：内嵌 JS 的 SVG 可能被用于 XSS（需过滤）
六、MIME 类型与最佳实践
七、参考规范
- W3C SVG 1.1: https://www.w3.org/TR/SVG11/
- SVG 2（草案）: https://www.w3.org/TR/SVG2/
如需深入了解 路径语法（Path d 属性） 、渐变与滤镜 、响应式 SVG 设计 或 如何将位图转为 SVG，我可以进一步展开说明。