SVG 2 草案已于2023年3月8日发布。如果你想直接看看草案庞大的目录，请点击此处。
SVG 的应用方式
我2019年为了构建以太坊上的 NFT 图片的存储方案，曾经调查和学习过 SVG。很奇怪为什么2011年发展到 SVG 1.1，然后就完全冰封了似的。
虽然我的《区块链概论》和道易程白皮书当时都是在 Gitbook 上，以 Markdown 的格式编写，但由于 Gitbook 的 Markdown 编辑器实在是难用，加上它也不让我看到 Markdown 源码，再加上知识宽度的限制，所以没有注意到 SVG 在 Markdown 这一领域突飞猛进。
最近的发现真有点石破天惊的感觉：
先介绍下UML
UML（Unified Modeling Language，统一建模语言）是一种为面向对象系统的产品进行说明、可视化和编制文档的一种标准语言，是非专利的第三代建模和规约语言。UML是面向对象设计的建模工具，独立于任何具体程序设计语言。建模（modeling）又称模型化，可以简单地理解为画图，UML 覆盖了用例图、类图、序列图、状态图、活动图、组件图、部署图、对象图、包图、组合图等，分别用以不同的建模用途。
所以，UML原本的用法就是画图。画好了以常用的图像格式输出就完事了。
Gravizo
Gravizo 衔接 Markdown 和 UML 和 SVG，就产生了极好的一个裂变：
Use Gravizo is very easy, only need to call the url https://g.gravizo.com/svg? followed by your graph description in DOT, PlantUML or UMLGraph syntax.
它可以让你直接插入代码，而在网页编辑器里画出各种图形。如源码为：
<img src='https://g.gravizo.com/svg?
digraph G {
main -> parse -> execute;
main -> init;
main -> cleanup;
execute -> make_string;
execute -> printf
init -> make_string;
main -> printf;
execute -> compare;
}
'/>你看到的将是：
显然这里输出的是 img 格式的图片。
Mermaid 流程图
Mermaid是一个基于 Javascript 的图解和制图工具。它基于 markdown 语法来简化和加速生成流程图的过程。实际应用已经不止于生成流程图。
你可以在 Mermaid 在线编辑器 中写入代码：
graph LR
A[新月沃地] -->|约10000年前| B((埃及))
A -->|约10000年前| C((希腊))
B -->|约8000年前| D((欧洲))
C -->|约8000年前| E((亚洲))
D -->|约5000年前| F((印度))
E -->|约5000年前| G((中国))你得到的 SVG 图片为：
这是另一个在线编辑: https://mermaidjs.github.io/mermaid-live-editor/
以下为 SVG 2 草案的目录，涵盖了 SVG 的基础知识、绘图、样式、动画、事件处理、SVG 集成、SVG 版本和迁移以及 SVG 实现等方面的内容，旨在完成标准的制订，收获反馈，并帮助读者全面了解和掌握 SVG 的使用方法。
SVG 2 目录
1.
介绍
1.1. 关于 SVG
1.2. 与其他标准工作的兼容性
1.3. 与该标准之前版本的关系
1.4. 规范术语
2.
一致性标准
2.1. 概述
2.2. 处理模式
2.2.1. 特性
2.2.2. 动态交互模式
2.2.3. 动画模式
2.2.4. 安全动画模式
2.2.5. 静态模式
2.2.6. 安全静态模式
2.3. SVG 子资源文档的处理模式
2.3.1. 示例
2.4. 文档一致性类别
2.4.1. 符合标准的 SVG DOM 子树
2.4.2. 符合标准的 SVG 标记片段
2.4.3. 符合标准的 XML 兼容 SVG 标记片段
2.4.4. 符合标准的 XML 兼容 SVG DOM 子树
2.4.5. 符合标准的独立 SVG 文件
2.4.6. 错误处理
2.5. 软件一致性类别
2.5.1. 符合标准的 SVG 生成器
2.5.2. 符合标准的 SVG 作者工具
2.5.3. 符合标准的 SVG 服务器
2.5.4. 符合标准的 SVG 解释器
2.5.5. 符合标准的 SVG 查看器
2.5.5.1. 打印实现注释
2.5.6. 符合标准的高质量 SVG 查看器
3.
渲染模型
3.1. 介绍
3.2. 渲染树
3.2.1. 定义
3.2.2. 渲染与非渲染元素
3.2.3. 控制可见性：‘display’ 和 ‘visibility’ 属性的效果
3.2.4. 重用图形
3.3. 绘图模型
3.4. 渲染顺序
3.4.1. 在 SVG 中建立堆叠上下文
3.5. 元素的渲染方式
3.6. 组的渲染方式
3.6.1. 对象和组的不透明度：‘opacity’ 属性的效果
3.7. 图形元素类型
3.7.1. 绘制形状和文本
3.7.2. 绘制栅格图像
3.8. 过滤绘制区域
3.9. 剪裁和遮罩
3.10. 父级合成
3.11. ‘overflow’ 属性的效果
4.
基本数据类型和接口
4.1. 定义
4.2. 属性语法
4.2.1. 实数精度
4.2.2. 限制在特定范围内的值
4.3. SVG DOM 概述
4.3.1. SVG DOM 支持的依赖项
4.3.2. 命名约定
4.3.3. SVG DOM 中的元素
4.3.4. 在 DOM 中反映内容属性
4.3.5. 同步反映的值
4.3.6. 反映空的初始值
4.3.7. 无效值
4.4. SVG 元素的 DOM 接口
4.4.1. 接口 SVGElement
4.4.2. 接口 SVGGraphicsElement
4.4.3. 接口 SVGGeometryElement
4.5. 基本数据类型的 DOM 接口
4.5.1. 接口 SVGNumber
4.5.2. 接口 SVGLength
4.5.3. 接口 SVGAngle
4.5.4. 列表接口
4.5.5. 接口 SVGNumberList
4.5.6. 接口 SVGLengthList
4.5.7. 接口 SVGStringList
4.6. 反映可动画 SVG 属性的 DOM 接口
4.6.1. 接口 SVGAnimatedBoolean
4.6.2. 接口 SVGAnimatedEnumeration
4.6.3. 接口 SVGAnimatedInteger
4.6.4. 接口 SVGAnimatedNumber
4.6.5. 接口 SVGAnimatedLength
4.6.6. 接口 SVGAnimatedAngle
4.6.7. 接口 SVGAnimatedString
4.6.8. 接口 SVGAnimatedRect
4.6.9. 接口 SVGAnimatedNumberList
4.6.10. 接口 SVGAnimatedLengthList
4.7. 其他 DOM 接口
4.7.1. 接口 SVGUnitTypes
4.7.2. 混入 SVGTests
4.7.3. 混入 SVGFitToViewBox
4.7.4. 混入 SVGURIReference
5.
文档结构
5.1. 定义 SVG 文档片段：‘svg’ 元素
5.1.1. 概述
5.1.2. 命名空间
5.1.3. 定义
5.1.4. ‘svg’ 元素
5.2. 分组：‘g’ 元素
5.2.1. 概述
5.2.2. ‘g’ 元素
5.3. 定义可重用内容，‘defs’ 元素
5.3.1. 概述
5.3.2. ‘defs’ 元素
5.4. ‘symbol’ 元素
5.4.1. 属性
5.4.2. 符号注释
5.5. ‘use’ 元素
5.5.1. use 元素阴影树
5.5.2. 重用图形的布局
5.5.3. 样式作用域和继承
5.5.4. use 元素阴影树中的动画
5.5.5. use 元素阴影树中的事件处理
5.6. 条件处理
5.6.1. 条件处理概述
5.6.2. 定义
5.6.3. ‘switch’ 元素
5.6.4. ‘requiredExtensions’ 属性
5.6.5. ‘systemLanguage’ 属性
5.7. ‘desc’ 和 ‘title’ 元素
5.7.1. 定义
5.8. ‘metadata’ 元素
5.9. HTML 元数据元素
5.10. 外来命名空间和私有数据
5.11. 公共属性
5.11.1. 定义
5.11.2. 所有元素的公共属性：‘id’
5.11.3. ‘lang’ 和 ‘xml:lang’ 属性
5.11.4. ‘xml:space’ 属性
5.11.5. ‘tabindex’ 属性
5.11.6. ‘autofocus’ 属性
5.11.7. ‘data-*’ 属性
5.12. WAI-ARIA 属性
5.12.1. 定义
5.12.2. 角色属性
5.12.3. 状态和属性（所有 aria- 属性）
5.12.4. 隐含和允许的 ARIA 语义
5.13. DOM 接口
5.13.1. 扩展 Document 接口
5.13.2. 接口 SVGSVGElement
5.13.3. 接口 SVGGElement
5.13.4. 接口 SVGDefsElement
5.13.5. 接口 SVGDescElement
5.13.6. 接口 SVGMetadataElement
5.13.7. 接口 SVGTitleElement
5.
13.8. 接口 SVGSymbolElement
5.13.9. 接口 SVGUseElement
5.13.10. 接口 SVGSwitchElement
5.14. 使用引用图像元素：‘image’ 元素
6.
绘图：路径
6.1. 定义路径
6.1.1. path 数据语法
6.2. ‘d’ 属性
6.2.1. 子路径指令
6.2.2. 实现路径对象和起点对象
6.2.3. 计算路径
6.3. ‘path’ 元素
6.4. 路径方向的变化
6.4.1. DOM 接口
6.5. 使用‘line’、‘polyline’ 和‘polygon’ 元素
6.5.1. ‘line’ 元素
6.5.2. ‘polyline’ 元素
6.5.3. ‘polygon’ 元素
7.
绘图：基本形状
7.1. 椭圆
7.1.1. ‘ellipse’ 元素
7.2. 圆
7.2.1. ‘circle’ 元素
7.3. 矩形
7.3.1. ‘rect’ 元素
7.4. 使用视口和视窗
7.5. DOM 接口
8.
绘图：文本
8.1. 使用文本
8.2. ‘text’ 元素
8.2.1. 概述
8.2.2. ‘text’ 元素
8.3. ‘tspan’ 元素
8.4. ‘tref’ 元素
8.5. ‘altGlyph’ 元素
8.6. ‘altGlyphDef’、‘altGlyphItem’ 和‘glyphRef’ 元素
8.7. 变换文本
8.8. 位置对齐
8.9. 文本长度
8.10. 测量文本
8.11. DOM 接口
9.
绘图：标记
9.1. 定义和使用标记
9.1.1. ‘marker’ 元素
9.2. DOM 接口
10.
渐变和图案
10.1. 渐变
10.1.1. 概述
10.1.2. 线性渐变：‘linearGradient’ 元素
10.1.3. 径向渐变：‘radialGradient’ 元素
10.1.4. ‘stop’ 元素
10.2. ‘pattern’ 元素
10.3. 引用外部图形
10.4. 渲染外部图形
10.4.1. pattern 重用
10.4.2. DOM 接口
10.5. DOM 接口
11.
裁剪、遮罩、过滤效果
11.1. ‘clipPath’ 元素
11.1.1. clipPath 单位
11.1.2. 在 clipPath 中使用图元
11.1.3. ‘clipPath’ 元素
11.2. ‘mask’ 元素
11.2.1. 定义遮罩
11.2.2. 应用遮罩
11.2.3. 遮罩图像的组成部分
11.2.4. ‘mask’ 元素
11.2.5. 子区域限制框
11.3. ‘filter’ 元素
11.3.1. 过滤器区域
11.3.2. ‘filter’ 元素
11.3.3. ‘feBlend’ 元素
11.3.4. ‘feColorMatrix’ 元素
11.3.5. ‘feComponentTransfer’ 元素
11.3.6. ‘feComposite’ 元素
11.3.7. ‘feConvolveMatrix’ 元素
11.3.8. ‘feDiffuseLighting’ 元素
11.3.9. ‘feDisplacementMap’ 元素
11.3.10. ‘feFlood’ 元素
11.3.11. ‘feGaussianBlur’ 元素
11.3.12. ‘feImage’ 元素
11.3.13. ‘feMerge’ 元素
11.3.14. ‘feMorphology’ 元素
11.3.15. ‘feOffset’ 元素
11.3.16. ‘feSpecularLighting’ 元素
11.3.17. ‘feTile’ 元素
11.3.18. ‘feTurbulence’ 元素
11.3.19. 过滤器模块
11.4. 透明度
11.4.1. 符号混合
11.5. ‘enable-background’ 属性
11.6. ‘filterRes’ 属性
11.7. ‘filterUnits’ 和 ‘primitiveUnits’ 属性
11.8. ‘x’, ‘y’, ‘width’ 和 ‘height’ 属性
11.9. ‘filterTransform’ 属性
11.10. ‘in’ 和 ‘result’ 属性
11.11. 作用于‘desc’ 和‘title’元素的透明度
11.12. 过滤器中的色彩插值
11.13. 过滤器模块的顺序
11.14. 过滤器模块的影响
11.15. 过滤器的目标和背景合成
11.16. ‘lighting-color’ 属性
12.
DOM 动画
12.1. 动画概述
12.2. 关键属性
12.3. 动画元素
12.3.1. 动画子元素
12.3.2. ‘animate’ 元素
12.3.3. ‘set’ 元素
12.3.4. ‘animateMotion’ 元素
12.3.5. ‘animateTransform’ 元素
12.3.6. ‘animateColor’ 元素
12.3.7. ‘animate’ 元素
12.3.8. 动画与事件
12.3.9. 动画的计算方式
12.4. 动画的继承
12.5. 动画的效果
12.6. 时基属性
12.6.1. ‘begin’ 属性
12.6.2. ‘dur’ 属性
12.6.3. ‘end’ 属性
12.6.4. ‘min’ 和 ‘max’ 属性
12.6.5. ‘restart’ 属性
12.6.6. ‘repeatCount’ 和 ‘repeatDur’ 属性
12.6.7. ‘repeat’ 元素
12.7. 重写动画属性
12.8. 动画时间的相互影响
12.8.1. 动画实例化
12.8.2. 动画之间的相互作用
12.9. 定时容器
12.9.1. 定时容器和子容器的关系
12.9.2. ‘timeContainer’ 元素
12.10. 动画的执行
12.10.1. 定义
12.10.2. 动画的周期
12.10.3. ‘simpleDur’ 属性
12.10.4. ‘activeDur’ 属性
12.10.5. 动画的播放顺序
12.10.6. ‘fill’ 属性
12.10.7. ‘keyTimes’ 属性
12.10.8. ‘keySplines’ 属性
12.11. 时基同步
12.11.1. ‘syncBehavior’ 属性
12.11.2. ‘syncTolerance’ 属性
12.11.3. ‘syncMaster’ 属性
12.12. 动画的 DOM 接口
12.12.1. 扩展 Document 接口
12.12.2. 接口 SVGAnimationElement
12.12.3. 接口 SVGAnimateElement
12.12.4. 接口 SVGSetElement
12.12.5. 接口 SVGAnimateMotionElement
12.
12.6. 接口 SVGAnimateTransformElement
12.12.7. 接口 SVGAnimateColorElement
12.12.8. 扩展 SVGElement 接口
12.12.9. 扩展 SVGSVGElement 接口
12.12.10. 接口 SVGAnimateElement
12.12.11. 接口 SVGSetElement
12.12.12. 接口 SVGAnimateMotionElement
12.12.13. 接口 SVGAnimateTransformElement
13.
事件处理
13.1. 概述
13.2. 事件类型
13.2.1. 鼠标事件
13.2.2. 键盘事件
13.2.3. 文档事件
13.2.4. 用户界面事件
13.2.5. 聚焦事件
13.2.6. 设备事件
13.2.7. 动画事件
13.3. 事件处理机制
13.3.1. 事件捕获和冒泡
13.3.2. 事件监听器
13.4. 事件的 DOM 接口
14.
SVG 集成
14.1. SVG 集成概述
14.2. SVG 文档
14.2.1. ‘use’ 元素
14.2.2. ‘symbol’ 元素
14.2.3. ‘switch’ 元素
14.2.4. ‘foreignObject’ 元素
14.3. SVG 和 HTML 的集成
14.3.1. 在 HTML 中嵌入 SVG
14.3.2. 在 SVG 中嵌入 HTML
14.4. SVG 和 CSS 的集成
14.4.1. 在 CSS 中嵌入 SVG
14.4.2. 在 SVG 中嵌入 CSS
14.5. SVG 和 ECMAScript 的集成
14.5.1. 在 ECMAScript 中嵌入 SVG
14.5.2. 在 SVG 中嵌入 ECMAScript
14.6. SVG 和 XLink 的集成
14.6.1. 在 XLink 中嵌入 SVG
14.6.2. 在 SVG 中嵌入 XLink
14.7. SVG 和 MathML 的集成
14.7.1. 在 MathML 中嵌入 SVG
14.7.2. 在 SVG 中嵌入 MathML
14.8. SVG 和 XForms 的集成
14.8.1. 在 XForms 中嵌入 SVG
14.8.2. 在 SVG 中嵌入 XForms
14.9. SVG 和 XPath 的集成
14.9.1. 在 XPath 中嵌入 SVG
14.9.2. 在 SVG 中嵌入 XPath
14.10. SVG 和 XPointer 的集成
14.10.1. 在 XPointer 中嵌入 SVG
14.10.2. 在 SVG 中嵌入 XPointer
14.11. SVG 和 XInclude 的集成
14.11.1. 在 XInclude 中嵌入 SVG
14.11.2. 在 SVG 中嵌入 XInclude
14.12. SVG 和 WAI-ARIA 的集成
14.12.1. 在 WAI-ARIA 中嵌入 SVG
14.12.2. 在 SVG 中嵌入 WAI-ARIA
15.
SVG 版本和迁移
15.1. SVG 版本概述
15.2. 从 SVG 1.0/1.1 迁移到 SVG 1.2
15.2.1. 迁移步骤
15.3. 从 SVG 1.2 迁移到 SVG 2.0
15.3.1. 迁移步骤
15.4. 未来 SVG 版本的迁移
15.4.1. 迁移步骤
15.5. DOM 接口
16.
SVG 实现
16.1. 概述
16.2. SVG 实现的要求
16.3. SVG 的实现方法
16.3.1. SVG 的浏览器实现
16.3.2. SVG 的服务器端实现
16.3.3. SVG 的客户端实现
16.3.4. SVG 的插件实现
16.4. SVG 实现的测试
16.4.1. 测试工具
16.4.2. 测试方法
16.5. SVG 实现的性能优化
16.5.1. 性能优化的方法
16.6. SVG 实现的安全性
16.6.1. 安全性的要求
16.6.2. 安全性的方法
16.7. SVG 实现的兼容性
16.7.1. 兼容性的要求
16.7.2. 兼容性的方法
16.8. SVG 实现的可维护性
16.8.1. 可维护性的要求
16.8.2. 可维护性的方法
16.9. SVG 实现的可扩展性
16.9.1. 可扩展性的要求
16.9.2. 可扩展性的方法
16.10. SVG 实现的可移植性
16.10.1. 可移植性的要求
16.10.2. 可移植性的方法
16.11. SVG 实现的可操作性
16.11.1. 可操作性的要求
16.11.2. 可操作性的方法
16.12. SVG 实现的可视化
16.12.1. 可视化的方法
16.12.2. 可视化的工具
16.13. SVG 实现的国际化
16.13.1. 国际化的方法
16.13.2. 国际化的工具