可伸缩矢量图形(SVG)是一种独特的图像格式。与其他品种不同,SVG 不需要依靠唯一的像素来构成你看到的图像。相反,他们使用 “向量” 数据。

通过使用 SVG,你可以获得可以缩放至任何分辨率的图像,这在许多其他用例中对于 Web 设计非常方便。在本文中,我们将提出一个问题:什么是 SVG 文件?然后,我们将教你如何使用格式。

什么是 SVG 文件?

SVG 是使用矢量构建的图形。对于初学者来说,向量是具有特定大小和方向的元素。从理论上讲,你可以使用向量集合生成几乎任何类型的图形。拍摄这张带有黑色边框和阴影的蓝色矩形的图像。

这是另一种称为便携式网络图形(PNG)的图像文件,用于插图和绘图。如果你想使用矢量图形复制类似的内容,则需要使用 XML 代码(与 Sitemap 所用的代码相同)生成它。以下代码可以实现相同的结果:

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1"
baseProfile="full" > <rect x="0" y="0" width="60" height="60" style="stroke: blue;"/>
<rect id="myRect" x="25" y="25" rx="0.6" ry="0.6" width="150" height="150" fill="blue"
stroke="black" stroke-width="8"/>
</svg>

从理论上讲,如果你使用此代码并将其放入 HTML 文件中,则将看到与 PNG 类似的一组矩形 - 也就是说,只要你使用的浏览器支持 SVG 文件。尽管两个图像看起来都一样,但是 SVG 文件提供了其他格式无法提供的全部好处。例如,SVG 可以按比例放大或缩小以保持图像质量。

如果继续放大 PNG 矩形,你会注意到其质量在某些时候开始下降。使用更复杂的基于像素的图形时,降级变得明显更快。但是,SVG 几乎可以在任何分辨率下表现出色。

为什么要使用 SVG 文件?

许多网站几乎可以互换使用 PNG 和 JPEG 等格式。但是,SVG 并没有那么多用途。如果尝试使用矢量重新创建复杂的照片,通常会得到大量且无法使用的 SVG 文件。

SVG 格式对于整套其他方案来说是一种绝佳的选择,但是:

  • 标志设计。由于你可能会跨网站和社交媒体重用徽标,因此使用 SVG 可解决任何潜在的可伸缩性问题。
  • 图表。SVG 非常适合图和任何其他依赖于普通线的插图。
  • 动画元素。你可以使用 CSS 为 SVG 设置动画,这使它们成为网站设计中的有用组件,尤其是对于微交互而言。
  • 图表和图形。 你可以使用 SVG 创建支持动画的可伸缩图形和图表。

由于 SVG 使用 XML 格式,因此这也使它们既可搜索又可索引。只要你使用正确的辅助功能标签,屏幕阅读器就可以解释 SVG 文件。

最后,SVG 文件往往比其他格式的高分辨率文件小得多。在纸上,这意味着你可以减少某些页面尺寸并减少加载时间。但是,除非你计划将大多数图像转换为 SVG,否则性能提升可能会很小。

如何创建 SVG 文件(2 种方法)

涉及 SVG 文件时,可以采用两种方法。你可以从头开始创建它们,也可以拍摄现有图像并进行转换。让我们从手动方法开始。

1. 手动创建 SVG 文件

创建 SVG 文件通常不需要像我们前面那样输入矢量信息。那只是说明概念的一个例子。相反,你可以像使用其他图形一样创建 SVG,方法是使用设计程序并将文件另存为 SVG。许多现代图形设计工具开箱即用地支持 SVG。一些主要选项包括:

  • Adobe Illustrator,Photoshop,Animate 和 InDesign
  • Microsoft Visio
  • inkscape
  • GIMP

此列表中的最后两个选项是开源解决方案。这使它们成为无需付费购买高级软件即可尝试创建 SVG 的绝佳选择。实际上,它们可能就是你所需要的。

如果你没有图形设计经验,那么为网站创建自己的徽标或其他元素将是一个挑战。在这种情况下,最好的选择是拍摄现有图像并将其转换为 SVG。

2. 将现有图像转换为 SVG

你可以使用许多免费工具将其他格式的图像转换为 SVG。我们在上一节中提到的大多数软件都使你可以打开图像并将其另存为 SVG 文件。

如果你不想下载任何软件,则还可以使用在线转换工具 - 你可以使用许多 服务。Vector Magic 是一个示例,你可以使用它来将各种类型的文件类型转换为 SVG:

SVG 图像转换工具

我们喜欢这个特殊的工具,因为它会在下载前显示 SVG 文件的预览。你还可以使用内置的编辑器在下载文件之前进行一些小的更改和更正:

当然,这只是一种选择。其他 PNG 和 JPG 到 SVG 的转换器服务包括 Convertio 和 Img2Go。你将需要进行一些研究,以找到最适合你需求的解决方案。

根据我们的经验,大多数 SVG 转换器可提供类似质量的结果。为了获得最佳效果,使用的转换器与选择的图像无关紧要。

根据经验,只有将 SVG 格式用于 “简单” 图像(即具有定义的边框和干净的线条的图像)才有意义。图像越复杂,最终获得大量 SVG 文件的可能性就越大,该文件很难手动编辑或设置动画。

如何使用 SVG 文件

SVG 并不是很难使用。将 SVG 文件添加到你的网站就像获取其代码并将其粘贴到 HTML 文档中一样简单,无论你想要将图片移到何处。

如果你和你的网站访问者使用支持 SVG 文件的浏览器(并且大多数情况是在如今),他们将能够看到该元素。当然,对 SVG 进行动画处理比较麻烦,因为它需要使用 CSS。

但是,如果你使用的是 WordPress,则该过程会更改。内容管理系统(CMS)不支持现成的 SVG。如果要启用 SVG 支持,以便可以将文件直接上传到你的网站,则需要使用诸如 Safe SVG 之类的插件:

也可以在 WordPress 中手动启用 SVG 支持,但过程涉及更多。在这种情况下,使用插件是更安全的选择。

调整你的网站以使用 SVG 文件比你想象的要容易得多。真正的挑战在于从头开始设计 SVG 或选择正确的图像以转换为格式。幸运的是,你可以使用很多工具来完成这两项工作。

一些不错的选择包括 Adobe Illustrator,InDesign 和 GIMP。使用这些工具,你可以创建现有图像并将其转换为 SVG。如果你使用的是 WordPress,则可以使用 Safe SVG 插件上传这些 SVG,然后为它们添加动画效果。