SVG - 教程

Scalable Vector Graphics 通常称为 SVG，是一种基于 XML 的格式，用于绘制矢量图像。它用于绘制两个维度的矢量图像。

本教程将教您 SVG 的基础知识。教程包含 SVG 的所有基本组件的章节，并提供了大量的示例。

教程适合

本参考是为初学者准备的，以帮助他们理解与 SVG 相关的基本概念。本教程将使您对 SVG 有足够的了解，从而使自己获得更高水平的专业知识。

先决条件

在继续本教程之前，您应该具备 XML、HTML 和 Javascript 的基本知识。

SVG 的常见问题

有一些关于 SVG 的非常常见问题（FAQ），本节尝试简要回答它们。

SVG 是做什么用的？

SVG 用于在 Web 上创建和显示图形。它是一种使用数学方程式来描述形状、线条和颜色的文件格式，允许在不损失质量的情况下放大或缩小图像。SVG 图形可用于网站上的徽标、图标、插图、图表和交互式元素。由于 SVG 图像是轻量级的，并且可以通过代码进行操作，因此它们非常适合创建在任何屏幕大小（从台式计算机到移动设备）上看起来清晰的响应式设计。此外，可以使用 CSS 或 JavaScript 对 SVG 图形进行动画处理和设置样式，使其适用于各种 Web 应用程序。

SVG 的完整形式是什么？

SVG 代表可缩放矢量图形。它是一种用于在 Web 上创建和显示图形的文件格式。SVG 文件使用数学方程式来描述形状、线条和颜色，从而允许在不损失质量的情况下放大或缩小图像。这使得 SVG 非常适合在网站上创建清晰且可调整大小的图形，例如徽标、图标和插图。

谁发明了 SVG？

SVG 是由万维网联盟（W3C）的一组工程师和开发人员发明的，该组织负责开发万维网标准。SVG 的最初开发始于 1990 年代后期，Web 开发社区中的个人和公司做出了贡献。目标是为矢量图形创建一种可以直接在 Web 浏览器中显示的标准文件格式，从而为 JPEG 和 GIF 等光栅图形格式提供更灵活和可扩展的替代方案。

如何打开 SVG 文件？

要打开 SVG 文件，您有多种选择。您可以使用 Chrome 或 Firefox 等网络浏览器，只需双击文件或右键单击并选择浏览器即可。或者，可以使用 Adobe Illustrator 或 Inkscape 等图形编辑软件打开和编辑 SVG 文件，从而提供更高级的编辑功能。某些图像查看器（如 Windows 照片或 macOS 预览）也可以显示 SVG 文件。此外，在线工具和网站允许您直接在浏览器中查看和编辑 SVG 文件，而无需下载任何软件。

如何创建和编辑 SVG 文件？

要创建和编辑 SVG 文件，您可以使用 Adobe Illustrator 或 Inkscape 等图形软件，您可以在其中绘制形状、线条和文本，应用颜色和样式，并根据需要排列元素。或者，Vectr 或 SVG-Edit 等在线编辑器允许您直接在 Web 浏览器中操作矢量图形，而无需安装任何软件。使用这些工具，您可以设计和自定义 SVG 文件，从而确保图形的灵活性和可扩展性。对编辑感到满意后，可以保存文件并在项目中使用它。

如何使用 SVG 源文件？

要使用 SVG 源文件，您首先使用 Web 浏览器、图形编辑器或在线 SVG 工具等软件打开它。打开后，您可以查看和编辑 SVG 的内容，例如形状、线条和文本。进行任何更改后，保存或导出修改后的 SVG 文件。最后，您可以将 SVG 嵌入到网页、文档或项目中，从而将图形作为设计或应用程序的一部分进行显示。

什么是 svg 元素？

SVG 元素是用于创建可缩放矢量图形（SVG）图像的构建块。这些元素包括矩形、圆形和多边形等形状，以及线条、路径和文本。每个 SVG 元素都由其自己的标签和属性定义，这些标签和属性指定其属性，例如大小、位置、颜色和样式。通过组合和排列这些元素，您可以创建复杂的图形和插图，这些图形和插图可以放大或缩小而不会降低质量。SVG 元素通常用于 Web 开发，为网站和应用程序创建图标、徽标、图表和其他图形元素。

SVG 是 2D 还是 3D？

SVG 主要是一种 2D（二维）格式。这意味着 SVG 图像由排列在平面（如纸）上的形状、线条和文本组成。虽然 SVG 确实支持一些用于创建伪 3D 效果的有限功能，例如透视变换和阴影，但它并不用于创建完整的 3D 图形，例如视频游戏或 3D 建模软件中的图形。相反，SVG 最适合创建用于 Web 设计、插图和用户界面的平面、可缩放图形。

如何更改 SVG 颜色？

要更改 SVG 图像的颜色，您可以使用 CSS 或内联样式。使用 CSS，您可以定位 SVG 中的特定元素，并使用形状填充和线条描边等属性应用所需的颜色。或者，您可以使用 style 属性直接将内联样式添加到单个 SVG 元素。这两种方法都允许您轻松自定义 SVG 图像中形状、线条和文本的颜色，以实现所需的视觉效果。

如何填写 svg？

要使用颜色填充 SVG 元素，可以使用 CSS 或内联样式。使用 CSS，您可以定位 SVG 中的特定元素，并使用 fill 属性应用所需的填充颜色。或者，您可以使用 style 属性直接将内联样式添加到单个 SVG 元素。这两种方法都允许您轻松自定义 SVG 图像中形状、线条和文本的填充颜色，从而在设计和视觉演示方面提供灵活性。

打印本页