什么是 SVG 文件？定义与用途

您的网站是否在不同屏幕上出现模糊的徽标和像素化的图像？SVG——一种对网络友好的文件格式——可以解决这个问题。与基于像素的图像不同，SVG 使用数学公式来确保在任何尺寸下都保持清晰锐利。

无论您是在构建在线商店还是更新品牌标识，了解 SVG 文件都能改变图形在客户眼中的呈现方式。以下是关于 SVG 文件、其关键特性以及为何它们对于需要在所有设备上看起来专业的徽标、图表、图标和其他网络图形至关重要的所有内容。

什么是 SVG 文件？

SVG 代表可缩放矢量图形（Scalable Vector Graphics），这是一种使用矢量的图像格式，矢量是一种通过定义形状、线条和纯色块的数学公式来表示图形的方法。与由固定彩色像素网格组成的光栅（或位图）图像不同，您可以将 SVG 图像缩放到任何大小，而不会出现模糊或像素化。

SVG 图像之所以在任何分辨率下都保持清晰，是因为计算机会根据精确的数学指令重新绘制它们，就像遵循一份可随晚宴人数缩放以适配尺寸的食谱。像矢量文件这样的 SVG 常见用途包括徽标、插图、字体和图标——即任何需要在任意尺寸下保持清晰一致的网页资产。SVG 格式的文件通常比 PNG 和 JPEG 等光栅格式更小，因此它们加载更快并提升了客户体验。

SVG 文件是如何工作的？

SVG 使用 XML 格式编码，类似于 HTML 文件中找到的带标签文本，因此可以在任何文本编辑器中进行编辑。换句话说，SVG 文件不是以像素网格的形式存储数据，而是将形状、线条和颜色存储为 XML 代码——即“配方”。XML 编码具有一些优势：

• 有利于搜索引擎优化（SEO）。搜索引擎可以扫描 XML 中的关键词，例如公司徽标中的文字，从而使 SVG 在 SEO 方面优于光栅图像；除非在替代文本（alt text）中明确描述，否则光栅图像内的文字对搜索引擎来说几乎是不可见的。

• 更具无障碍性。屏幕阅读器可以扫描 SVG，从而提升网站无障碍性。由于 SVG 元素可以进行语义标记（使用 <title> 和 <desc> 元素），屏幕阅读器能够读取并朗读图像所代表的内容，这对视障用户大有裨益。

• 非常适合电子商务。SVG 的可扩展性、小文件大小、整洁外观以及与 CSS 和 JavaScript 等网页语言的兼容性，使其成为在线商店开发的明智之选。Shopify 原生支持 SVG——特别是在用于主题开发、徽标和图标的 assets 文件夹中。

然而，需要注意的是，包含 JavaScript 的恶意 SVG 内容可能会在用户的浏览器中运行，从而窃取 Cookie、劫持会话或破坏网站。Shopify 会在上传时自动清理 SVG 文件，以防止 XML 代码中存在恶意内容，并消除如跨站脚本攻击（XSS）等安全风险。

SVG 文件格式的简要历史

SVG 文件格式最早由荷兰软件工程师 Martijn Koster 于 1994 年提出。在 20 世纪 90 年代末，万维网联盟（W3C）征集了一种新的对网络友好的矢量图形格式的提案。W3C 于 1999 年将 SVG 文件确立为面向网络的开放标准矢量图形格式，并于 2003 年成为国际标准化组织（ISO）批准的标准。然而，SVG 的采用起初较为缓慢，直到 20 世纪 90 年代末和 21 世纪初，包括 Chrome、Firefox、Safari 和 Opera 在内的主要浏览器引入原生支持后，才获得了显著的关注。

SVG、PNG 和 JPEG 文件之间的区别

• 数学矢量与像素网格
• 可扩展性
• 文件大小
• 用例
• SEO 和可访问性
• 编辑和交互性

与基于像素的光栅文件（如 JPEG 和 PNG）不同，SVG 使用算法来绘制图像。这对于大多数图像类型既有用又高效，唯一的例外是照片或高度详细的图像。

以下是 SVG 与光栅文件类型之间的主要区别：

数学向量与像素网格

SVG 将图像存储为定义点、线和纯色区域的公式。光栅格式使用位图，由映射到固定网格的有限数量的独立像素组成。

可扩展性

在缩放 SVG 图像时，浏览器会重新计算其数学配方，因此您可以调整大小而不会损失质量。PNG 和 JPEG 是基于像素的，具有固定的分辨率；增大它们的尺寸会降低质量，导致模糊或像素化。

文件大小

SVG 文件往往比光栅图像更小，这使得它们在图像优化方面非常有用。然而，将复杂的 photographic 图像转换为 SVG 可能会导致文件过大且无法使用。对于具有精细色彩渐变的详细图像，PNG 和 JPEG 文件更为高效。例如，在 Adobe Photoshop 中创建的具有复杂纹理、笔触或照片元素的位图最好保存为 JPEG 或 PNG，因为这些细节无法很好地转化为清晰的线条。

用例

SVG 非常适合二维图形，如图表、插图、徽标、图标和图表，因为它可以在不同的屏幕分辨率下干净地缩放。对于其他图像格式，JPEG 最适合高清数码照片，而 PNG 则因其无损压缩和透明度支持而更适合网页图形和徽标。请注意，与 SVG 不同，PNG 并非分辨率无关的，因此在可扩展性方面 SVG 具有显著优势。

SEO 和可访问性

SVG 图形允许 Google 等搜索引擎读取其中的文本，从而可能提高您网站在搜索结果中的排名。SVG 文件还可以被屏幕阅读器读取，使其对残障人士更具可访问性。PNG 和 JPEG 将文本视为图像的一部分，这使得搜索引擎和屏幕阅读器难以读取或索引这些文本。

编辑和交互性

您可以通过修改 XML 标记在文本编辑器中编辑 SVG 文件，并使用 JavaScript 和 CSS 等 Web 语言轻松设置样式或操作它们。PNG 和 JPEG 需要专门的图像编辑软件才能进行任何更改，这限制了您对它们的控制程度，但也降低了恶意代码的风险。

为什么使用 SVG 文件？

• 无限可扩展性
• 可控的文件大小
• SEO 优势
• 可访问性
• 可编辑性
• 浏览器支持

SVG图形在电子商务中很有意义，因为它们在任何设备上都能保持清晰、加载速度快、有助于提升SEO和可访问性，并且能在所有现代Web浏览器中正常运行。以下是这些优势的具体说明：

无限可扩展性

您可以将SVG放大或缩小而不会牺牲图像质量，因为浏览器会根据任何比例重新计算线条和点的数学公式。

可控的文件大小

与PNG和JPEG等光栅图像相比，SVG文件通常更小。这种较小的数据量有助于更快的加载速度，从而改善用户体验。

SEO优势

像Google这样的搜索引擎可以轻松索引SVG文件中的文本，从而可能提升您的搜索引擎排名。例如，SVG图形中的企业标志可以包含企业名称和其他关键词的文本。

可访问性

SVG将文本存储为实际的文本元素，因此屏幕阅读器可以朗读SVG文件，帮助需要辅助阅读网页的人士。

可编辑性

您可以使用文本编辑器通过编辑标记标签来更改SVG文件中的XML代码，这使得SVG高度可定制且易于操作，无需专门的图形软件。

SVG还可以与其他Web技术（如JavaScript和CSS）交互，从而实现具有动画、用户交互和实时样式更改的动态且引人入胜的图形。这使得SVG在响应式和交互式网页设计中非常灵活。

浏览器支持

浏览器支持不足曾是 SVG 的阿喀琉斯之踵——如今已非如此。现代网络浏览器（包括 Chrome、Edge、Safari 和 Firefox）原生支持 SVG 文件。然而，较旧的浏览器（如 Internet Explorer）可能不支持 SVG 图像。

SVG 文件的常见用途

对于具有平滑线条和形状的二维图像，SVG 是理想选择。在网页设计中，SVG 文件的常见用途包括：

• 徽标。由于公司徽标经常在不同平台上重复使用，并且必须在不同尺寸下保持清晰锐利，因此 SVG 解决了 JPEG 和 PNG 等光栅格式中常见的可扩展性问题。

• 图标。图标——以其清晰的边框和简洁的设计——非常适合转换为可缩放的矢量图像。

• 插图。非照片类视觉元素（如线条画）作为 SVG 文件具有良好的可扩展性，并有助于节省文件空间。

• 图表和图形。SVG 可以创建可缩放的数据可视化内容，且其文本完全可搜索和可索引。

• 动画元素。您可以使用 CSS 和 JavaScript 对 SVG 进行动画处理，使其适用于微交互和动态展示。

如何创建和编辑 SVG 文件

• 从头创建 SVG 文件
• 将文件转换为 SVG
• 编辑 SVG 文件

虽然理论上你可以用 XML 编写 SVG 文件或将其从其他文件格式转换而来，但使用专业插图软件是更流行且不易出错的方法。以下是创建和编辑 SVG 文件的步骤：

从头开始创建 SVG 文件

要从头开始创建 SVG 文件，请使用图形设计程序，并在以下应用程序中绘制你的图像：Adobe Illustrator（行业标准矢量图形编辑器）、Inkscape（免费）、Microsoft Visio、Canva SVG Editor、CorelDRAW 或 Google Drawings（免费）。设计完成后，导航到“文件”菜单，选择“导出”或“另存为”，然后选择 SVG 作为格式。

将文件转换为 SVG

如果您不想下载软件，将其他格式转换为 SVG 的最佳选择是使用在线工具。一些在线转换器在下载前会提供转换后 SVG 的预览，并内置编辑器以便进行微调。

在使用这些工具之前，请确保选择具有简单形状和轮廓的图片。尝试转换包含大量细节的摄影图像，很可能会生成效率极低的 SVG 文件。

以下是四种工具选项：

• Adobe Express 免费 SVG 转换器。如果您熟悉 Adobe 生态系统，这是一个不错的选择；它以精美的界面、与其他 Adobe 工具的集成以及高质量的结果而闻名。

• CloudConvert。CloudConvert 是一款功能强大的转换器，支持海量文件格式，包括将各种图像类型转换为 SVG。

• Convertio。与 CloudConvert 类似，它用户友好且支持多种格式。

• FreeConvert。FreeConvert 是另一款功能强大的转换器，在传输文件时使用 256 位 SSL 加密，并在几小时后自动删除文件。

编辑 SVG 文件

要编辑现有的 SVG 文件，最实用的方法是使用像 Adobe Illustrator 这样的矢量图形编辑器。这些程序专为操作矢量图像而设计。

在编辑器应用中打开 SVG 文件，并使用其图形工具修改单个元素，如路径、形状或组。您可以调整大小、重塑形状、变换、添加颜色或对这些元素应用效果。

从技术上讲，由于 SVG 文件是用 XML 代码编写的，因此您可以在纯文本编辑器中编辑它们，但不建议进行大量编辑，因为损坏文件的风险很高。XML 编辑主要适用于微调，例如更改颜色属性。