SVG 前言

SVG 教程：可缩放矢量图形

SVG 代表 可缩放矢量图形（Scalable Vector Graphics）。它是一种基于 XML 的标记语言，用于描述二维矢量图形。与栅格图像（如 JPEG 或 PNG）不同，SVG 图形与分辨率无关，可以缩放到任意大小而不会损失清晰度或质量。

你需要了解的基础知识

在深入学习本教程之前，对以下知识有基本了解将会很有帮助：

• HTML： 了解 HTML 结构和元素。
• 基础 XML： 熟悉 XML 语法（标签、属性）将很有益，因为 SVG 是一种 XML 方言。

如果你需要复习这些主题的知识，可以在我们的主页或其他学习资源（如 MDN Web Docs）上找到相关的教程。

什么是 SVG？

• 可缩放矢量图形： 定义基于矢量的图形，可以完美缩放。
• Web 图形标准： 用于定义 Web 图形，从简单的图标到复杂的数据可视化。
• XML 格式： SVG 图形采用 XML 定义，使其易于人类阅读和机器解析。
• 无损质量： 图形在放大或调整大小时不会丢失质量。
• 可动画和可脚本化： 每个元素和属性都可以通过 Document Object Model (DOM) 进行动画处理（使用 CSS、SMIL 或 JavaScript）和操作。
• W3C 推荐标准： SVG 是由万维网联盟（W3C）开发的开放标准。当前广泛支持的版本是 SVG 1.1，SVG 2 提供了新的功能和改进（浏览器对 SVG 2 功能的支持各不相同）。
• 与 Web 标准集成： 与 HTML、CSS、DOM 和 JavaScript 无缝协作。

SVG 版本和 W3C 推荐标准

SVG 随着时间推移不断发展：

• SVG 1.0： 于 2001 年 9 月 4 日成为 W3C 推荐标准。
• SVG 1.1： 于 2003 年 1 月 14 日成为 W3C 推荐标准。第二版于 2011 年 8 月 16 日发布，至今仍是实现最广泛的版本。
• SVG Tiny 1.2： 于 2008 年 12 月 22 日成为 W3C 推荐标准，专为移动设备定制。
• SVG 2： 目前是 W3C 候选推荐标准。虽然尚未完全定稿或得到普遍支持，但其许多功能正在现代浏览器中逐步实现。它旨在使 SVG 更紧密地与 HTML 和 CSS 对齐。

查阅诸如 Can I use… 之类的资源是一个很好的做法，可以检查浏览器对特定 SVG 功能（尤其是 SVG 2 中的新功能）的支持情况。

SVG 的优势

对于许多用例，SVG 相较于栅格图像格式（如 JPEG、PNG、GIF）具有多项优势：

• 可伸缩性和分辨率无关性： SVG 在任何尺寸或分辨率下都显得清晰锐利，非常适合响应式设计。
• 可编辑和可修改： 可以使用任何文本编辑器创建和编辑，或使用矢量绘图工具进行图形编辑。其 XML 结构便于轻松修改属性。
• 更小的文件大小： 对于形状简单、细节较少的图形，SVG 文件大小通常比等效的栅格图像更小，尤其是在优化和压缩后（例如使用 SVGO）。
• 可访问性： SVG 中的文本仍然可访问、可选择和可搜索。正确使用 <title> 和 <desc> 等元素可以增强可访问性。
• 交互性和动画： SVG 可以轻松地使用 JavaScript 编写脚本，并使用 CSS 进行样式设置/动画处理，从而实现丰富的交互体验。
• 打印质量： 在任何分辨率下都能实现高质量打印。
• 开放标准： 不受专有软件或格式的限制。
• DOM 操作： 作为 DOM 的一部分，SVG 可以通过脚本动态操作。

虽然栅格图像更适合复杂的照片图像，但 SVG 在标志、图标、插图、图表和交互式矢量艺术方面表现出色。

创建 SVG 图像

你可以通过以下几种方式创建 SVG 图像：

• 文本编辑器： 在文本编辑器或 IDE（如 VS Code）中手动编写 SVG 代码。这对于简单的图形或需要精细控制时非常有用。
• 矢量图形软件： 使用专门的矢量绘图程序，如 Inkscape（免费、开源）、Adobe Illustrator（商业）、Figma（基于 Web、协作）、Affinity Designer（商业）或 Sketch（macOS、商业）。这些工具允许你进行可视化绘制，然后将结果导出为 SVG 代码。
• JavaScript 库： 使用 JavaScript 库，如 D3.js（用于数据可视化）、Snap.svg 或 GreenSock Animation Platform (GSAP) 来编程生成 SVG。

无论使用何种创建方法，输出都是基于 XML 的 SVG 文件或代码片段，可以嵌入到网页中。