SVG:可缩放矢量图形
可缩放矢量图形 (SVG) 是一种基于 XML 的标记语言,用于描述二维 矢量图形。
因此,它是一种基于文本的开放式 Web 标准,用于描述可以以任何尺寸清晰渲染的图像,并且专门设计用于与其他 Web 标准(包括 CSS、DOM、JavaScript 和 SMIL)良好配合。本质上,SVG 之于图形,就像 HTML 之于文本。
SVG 图像及其相关行为定义在 XML 文本文件中,这意味着它们可以被搜索、索引、脚本化和压缩。此外,这意味着它们可以通过任何文本编辑器或绘图软件创建和编辑。
与传统的位图图像格式(如 JPEG 或 PNG)相比,SVG 格式的矢量图像可以在任何尺寸下渲染而不会损失质量,并且可以通过更新其中的文本轻松本地化,而无需图形编辑器来完成。通过适当的库,SVG 文件甚至可以进行实时本地化。
SVG 自 1999 年以来一直由 万维网联盟 (W3C) 开发。
教程
SVG 教程旨在引导您完成相关主题的学习,假设您没有任何先验经验,从基础开始,逐步过渡到更高级的技术。
- 从零开始介绍 SVG
-
本教程旨在解释 SVG 的内部原理,并包含大量技术细节。如果您只想绘制精美的图像,您可能会在 Inkscape 的文档页面 上找到更有用的资源。W3C 的 SVG Primer 也提供了对 SVG 的良好介绍。还可以查看这个以圣诞倒计时为主题的 SVG 教程,它将引导您编写 25 个节日 SVG。
指南
SVG 指南可以帮助您在 Web 上使用 SVG,涵盖嵌入、MIME(媒体)类型、处理脚本、动画、滤镜等主题。
- 将 SVG 效果应用于 HTML 内容
-
现代浏览器支持在 CSS 样式中使用 SVG,以对 HTML 内容应用图形效果。
- 内容类型
-
SVG 使用多种数据类型。本文列出了这些类型及其语法和用途描述。
- 命名空间速成课
-
命名空间对于支持多种 XML 方言的用户代理至关重要。浏览器必须非常严格;现在花时间理解命名空间将为您节省未来的麻烦。
- 脚本
-
有几种方法可以使用 JavaScript 创建和操作 SVG。本文档描述了事件处理、交互性和处理嵌入式 SVG 内容。
- 使用 SMIL 的 SVG 动画
-
SMIL 是一种基于 XML 的语言,用于编写交互式多媒体演示文稿。作者可以在 SVG 中使用 SMIL 语法来定义动画元素的计时和布局。
- SVG 作为图像
-
SVG 可用作 HTML、CSS、某些 SVG 元素以及通过 Canvas API 中的图像格式。本页面列出了您可以提供 SVG 作为图像源的功能。
- SVG 滤镜
-
SVG 支持滤镜,因此作者可以应用阴影或模糊等效果,甚至合并不同滤镜的结果。
- SVG 在 HTML 中的介绍
-
本文展示了如何使用内联 SVG,并包含示例进行说明。
参考
SVG 参考文档包含有关元素、属性和 DOM 接口的全面信息,并列出了相关的规范和标准文档。
- SVG 元素
-
用于构建、绘制和布局矢量图形的 SVG 元素。
- SVG 属性
-
可用的 SVG 属性,可用于指定元素的处理或渲染方式。
- SVG DOM 接口
-
用于使用 JavaScript 与 SVG 交互的 SVG DOM API。