什么是 SVG 文件？ – 优点、缺点、XML 代码

让我们来谈谈 SVG

可扩展矢量图形 (SVG) 是一种用于创建二维矢量和混合矢量/光栅图形的 XML 语言。 SVG 文档是一种文本文件，将图像描述为几何图元：直线、曲线、形状、文本等。矢量对象被构造和存储为一组命令、数字、公式，而不是像位图那样存储在像素网格中。这意味着矢量 SVG 可以在不损失质量的情况下大幅调整大小，使其成为图标、徽标、SVG 精灵等的理想选择。由于 SVG 是用 XML 代码编写的，因此它们以纯文本而不是形状存储信息。这使得 Google 等搜索引擎能够读取 SVG 图形来查找其关键字，从而帮助网站提升搜索排名。

您可以使用 Inkscape、Adobe Illustrator、CorelDRAW 和 Figma 等图形编辑器创建 SVG 文件，这些编辑器提供了用户友好的界面，可用于以可视化方式创建和编辑 SVG 文件，因此非常受欢迎。但是，在本文中，我们将重点介绍如何通过编写 XML 代码或将光栅图像转换为 SVG 来创建 SVG。

SVG 文件 – XML 代码

SVG 文件是用 XML 标记语言编写的。 SVG 文档中的 XML 代码定义了构成图像的所有形状、路径、颜色和文本。 SVG 代码可以直接嵌入到 HTML 中或保存到 SVG 文件中并像任何其他图像一样插入。由于 SVG 文件的全部内容都是文本，因此您可以在文本编辑器中打开该文件，读取和编辑 SVG 代码。您可以使用 Chrome、Firefox 或 Edge 等现代 Web 浏览器打开和查看在线 SVG 图像，而无需下载它们。您可以通过 .svg 扩展名轻松识别 SVG 文件。然而，了解 SVG 基础知识以了解它应该如何显示会很有帮助。

元素和属性

每个 SVG 文档都基于 XML 主要结构元素：树状结构、标签、元素和属性。这些元素用于图像绘制、转换、样式化和放置。它们可以包含定义其属性的属性，即有关如何处理或呈现元素的详细信息。该元素借助尖括号中的开始标记和结束标记来写入。 SVG 文件应根据 XML 语法和 W3C SVG 2.0 规范编写。

让我们看一个简单的例子。我们生成一张由四个不同大小和颜色且具有一个中心的圆圈组成的 SVG 图像：

1<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
2    <circle cx="50" cy="50" r="40" fill="#B0C4DE" />
3    <circle cx="50" cy="50" r="30" fill="#DDA0DD" />
4    <circle cx="50" cy="50" r="20" fill="#FFB6C1" />
5    <circle cx="50" cy="50" r="10" fill="#5F9EA0" />
6</svg>

SVG 代码中的主要元素是 <svg> 元素，它定义了 SVG 文档片段。

width 和 height 属性用于设置 SVG 视口——即 SVG 内容的可见区域。
viewBox 属性定义了一个窗口，通过该窗口可以看到 SVG 的元素。在本例中，视图框从 (0,0) 延伸到 (300,300)。有关详细信息，请参阅 SVG 坐标系和单位文章。
SVG 中的 xmlns 属性代表 XML 命名空间，表示根据可缩放矢量图形规范可在 SVG 文档中使用的标准元素和属性。如果没有 xmlns 属性，SVG 代码可能无法正确呈现或根本无法呈现。
SVG <circle> 元素用于在屏幕上绘制一个圆圈。您需要设置 SVG 圆的中心和半径的位置。在示例中，我们使用 fill 属性用不同的颜色绘制圆圈。有关详细信息，请访问 SVG 形状文章。

这是生成的图像( circles.svg)：

文本“同一个中心的四个不同大小和颜色的圆圈”

点击图片！

在图像库中，我们展示了一些可以通过编写 XML 代码轻松手动创建的 SVG。单击图像，您将在浏览器中打开该图像。另外，您可以保存它并查看源代码。您会发现，一旦掌握了形状、路径、变换和颜色等基本元素，您就可以创建自己的矢量图像。


Snowflake	Aspose Logo	Owl (Picasso style)	Tulips pattern


Flower	Winter forest	Colorful Mosaic	Gradient shapes

SVG 绘图基础知识 章是介绍如何绘制 SVG 图像的教程，包括有关 SVG 坐标系和单位、SVG 基本形状、SVG 路径数据、SVG 文本、基本 SVG 变换、SVG 颜色、填充的文章SVG 中的 & 笔画、SVG 嵌入内容以及 SVG 过滤器和渐变。我们的 SVG 绘图教程根据简单的示例解释了从头开始创建 SVG 的常见规则和标准步骤。希望对您的工作或学习有所帮助。

SVG 格式的优点和缺点

优点	缺点
无限缩放 – 任何尺寸下都不会损失质量。	文件大小随细节增加而增大 – 复杂的插图可能会变得很大。
适用于简单的图形 – 基于文本的标记压缩效果很好。	不适合照片级真实感 – 自然色彩渐变有限。
可使用任何文本编辑器编辑 – 完全可编程。	学习曲线陡峭 – SVG 代码对初学者来说可能比较难懂。
内置压缩 (SVGZ) – 比纯 SVG 小 50-80%。	旧版浏览器 – IE8 及更早版本不支持。
辅助功能 – 屏幕阅读器和搜索引擎可以读取标记。	不支持原生 3D 效果 – SVG 主要面向 2D 图形。
性能 – 可内联到 HTML 中，减少 HTTP 请求。	数千个元素时性能下降 – 对 DOM 的影响较大。
动画和交互 – 完全通过 JavaScript 和 CSS 控制。
使用 CSS 进行样式设置 – 设计与标记分离。
DOM 集成 – 可通过与 HTML 相同的 API 进行操作。
开放标准 – 免费，由 W3C 维护 ( SVG 2.0)。
默认透明背景 – 非常适合用于叠加层。

尽管存在这些缺点，现代浏览器的开发人员以及 Aspose.SVG 团队都认可 SVG 是网页设计图形的未来。

将光栅图像转换为 SVG – 准备好尝试了吗？

创建 SVG 文档的一种方法是将光栅图像转换为矢量图形。Aspose.SVG 提供了一个免费的在线工具，您可以使用它来执行此操作。图像矢量化器应用程序旨在将 JPG、PNG、BMP、TIFF、ICO 和 GIF 位图图像转换为基于由贝塞尔曲线和线条组成的几何图形的矢量图形。转换后，所有矢量图形元素都将保存到 SVG 文件中。

SVG历史

SVG 由万维网联盟 (W3C) 开发，拥有丰富的历史，可以追溯到 20 世纪 90 年代末。在 Web 的早期，各种 HTML 格式和扩展迅速发展。显然，网络矢量图形格式会很有帮助。 SVG 工作组成立于 1998 年，旨在提供一种在 Web 上表示矢量图形的标准方法，并提供光栅图像格式(例如 JPEG 和 GIF)的替代方案。到 1998 年，W3C 的 Web 矢量图形领域出现了 6 个相互竞争的应用程序： Web Schematics、 PGML、 VML、 Hyper Graphics Markup Language 、 WebCGM 和 DrawML 帮助了解了最终成为 W3C 的 SVG 格式。因此，SVG 工作组研究了新矢量格式的一般要求，并决定不开发任何现有应用程序，而是开发一种新语言，同时考虑到从所有先前工作中吸取的经验教训。开发人员对于所需的矢量图形工具类型(贝塞尔曲线、蒙版、合成)达成了普遍共识，并且 SVG 工作组重点关注这种共性而不是语法冲突。基本上，SVG 是从头开始设计的，考虑了之前的所有影响。

SVG 的第一个版本(称为 SVG 1.0)于 2001 年 9 月 4 日作为 W3C 推荐标准发布。该版本为 Web 上的矢量图形奠定了基础，并引入了基本的形状、文本、路径和转换。 SVG 2.0 的开发始于完善和扩展 SVG 规范的目标。 SVG 2.0 旨在提供新功能以及与其他 Web 标准更好的集成。最新的 SVG 2.0 草案于 2023 年 3 月 8 日发布。

SVG 花了一些时间才获得普及。直到 2017 年，SVG 支持相对较少，当时人们开始看到在现代 Web 浏览器中使用 SVG 的好处。

典型应用场景

可缩放图标和徽标
插图、图表、信息图、地图
用户界面组件和交互式小部件
简单的网页游戏和数据可视化
可用于印刷的矢量图稿（印刷）

常见错误及解决方法

问题	原因	解决方法
SVG 在浏览器中显示为空白	缺少或 `xmlns` 属性不正确	确保根 `<svg>` 标签包含 `xmlns="http://www.w3.org/2000/svg"`
文本不可选或不可搜索	文本被转换为路径或轮廓	保留标记中的 `<text>` 元素；避免在导出过程中将文本转换为形状
文件大小异常大	路径过于复杂或包含不必要的图层组	使用 SVGO 等工具简化路径，移除隐藏图层，并压缩 SVG 文件
不同浏览器显示颜色不一致	使用非标准颜色格式	请使用十六进制 (`#RRGGBB`) 或 CSS 颜色名称；避免使用带百分比的 `rgb()`
动画无法运行	内联 SVG 中缺少 `script` 或 `style` 标签	内联时，请将 `<style>` 和 `<script>` 放在 `<svg>` 元素内或引用外部文件
SVG 不具备响应式	修复了未使用 `viewBox` 的 `width`/`height` 属性	移除显式尺寸，并使用 CSS `width: 100%` 来依赖 `viewBox`
辅助功能工具无法读取图形	缺少 `<title>` 或 `<desc>` 元素	添加 `<title>` 用于简短描述，添加 `<desc>` 用于详细信息

结论

SVG 是现代 Web 开发中必不可少的格式，具有可扩展性、灵活性、小文件大小和可编程性。与光栅图像不同，SVG 文件是基于文本的 XML，因此可编辑、可访问且可进行 SEO 搜索。使用 CSS 和 JavaScript 为 SVG 设置样式和动画的能力进一步增强了它们的可用性。

尽管存在一些缺点，例如缺乏照片级渲染和有限的 3D 支持，但 SVG 仍然是矢量图形的广泛支持标准。虽然 SVG 有一些局限性，例如高度详细图像的复杂性和旧版本的浏览器支持有限，但它们的好处远远超过这些缺点。从图标和徽标到交互式 Web 元素和印刷术，SVG 文件提供了一种专业而高效的矢量图形处理方式。

掌握 SVG 开辟了一个充满创意可能性的世界，让您可以为现代数字体验制作轻量级、可扩展且响应迅速的图形。

Aspose.SVG 团队的目标是帮助您充分了解 SVG 技术，从而使您能够制作出您需要的内容。

后续步骤和相关资源

SVG 绘图 – 基础教程 – 学习坐标系、SVG 图形、路径和变换。
SVG 滤镜和渐变 – SVG 代码示例 – 深入了解模糊、阴影和颜色矩阵滤镜。
如何使用 Aspose.SVG for .NET API – C# – 使用 Aspose.SVG for .NET 库进行程序化 SVG 操作的指南。

Aspose.SVG for .NET 入门

Analyzing your prompt, please hold on...

An error occurred while retrieving the results. Please refresh the page and try again.