面向开发人员的 SVG：了解基础知识、优点和缺点

图形在网站上带来独特的表达方式，并帮助开发人员轻松地向用户传达深刻的想法和概念。 它是 Internet 上的一个关键元素，自 1999 年以来已成为可编写脚本，允许在网络上更复杂地呈现图像。

您可能非常熟悉不同光栅图像文件类型的使用：JPG、PNG 和 GIF。 让我们回忆一下。 GIF（图形交换格式）支持 256 色（8 位），是一种出色的动画和透明度格式，不包括 alpha 透明度。 PNG（便携式网络图形）格式要好得多，它支持超过 1600 万种颜色（24 位）和所有类型的透明度，前提是您不需要动画。

网络上使用最广泛的图像格式 JPG 或 JPEG（联合图像专家组），主要是因为它是可压缩的，支持超过 1600 万种颜色； 灰度为每像素 24 位或 8 位，但不支持动画或透明度。 因此，JPG 是开发人员用于静态照片的主要图形格式。 我没有提到位图 (BMP)，因为它通常不是 Web 的图像格式。 BMP 存储图像中每个像素的精确数据，这使得文件非常大（超过相同分​​辨率的 JPG 大小的 150 倍）并且不适合用于网站图形。

这些与分辨率相关的图形格式非常棒，主要是在适当使用时。 然而，它们都有一个共同的缺点，这导致了 SVG 的引入——唯一的网络矢量图像格式。

什么是 SVG？

Scalar Vector Graphics (SVG) 是一种基于可扩展标记语言 (XML) 的图像格式，用于描述路径、线、圆、图案、文本颜色等二维图形。在更简单的定义中，它指的是一种图像格式支持二维，其整个行为和存在由 XML 文本文件控制。

另一个有趣的特性是它的可扩展性。 您可以将 SVG 图像放大到任意比例，而不会丢失其分辨率。 这是因为 SVG 用形状、数字和坐标来渲染图像，而不是像光栅图像格式那样用像素来渲染图像，光栅图像格式通过定义每个像素应该被绘制的颜色来渲染图像。

让我们看看如何创建 SVG 图像以及应该考虑在项目中使用 SVG 的一些原因。

如何创建 SVG 图像

您可以使用任何文本编辑器创建 SVG 图像，尽管该过程有点技术性并且需要一些设计和数学知识，尤其是在创建一些复杂形状时。 想象一下，只用几行代码在画布上画一架飞机。 然而，有一个更简单的方法，但让我们用它来理解 SVG 的基本概念。

我们使用 SVG 图形元素在文本编辑器中制作 SVG 图像。 该过程是简单地将您的图形元素插入 <svg> 和 </svg> 标签内，指定它们的坐标、尺寸、颜色等。例如，<rect> 元素可用于绘制矩形，如下面的例子。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="300" width="300">
<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)"/>
</svg>

如果保存为 .svg 文件并使用浏览器打开，上面的代码将在浏览器的最左上角绘制一个 300x x 300px 的蓝色矩形。 现在，您可能想知道为什么我们在文档中有两个高度和宽度。 让我们了解整个代码以了解原因。 如前所述，您的 SVG 代码必须写在根元素（<svg> 和 </svg>）内，以通知浏览器如何解释这些行。

就像在 HTML 中一样，SVG 需要在根元素中声明命名空间。 在上面的示例中，我们在根元素中提供了 xmlns 参数“http://www.w3.org/2000/svg”和 W3C 推荐的 SVG 版本 1.1。 根元素内部的维度称为 SVG 视点，它是根标签中绘制的 SVG 图像将通过它出现的窗口或画布。 视点必须至少与整个 SVG 对象具有相同的尺寸，然后它们才能出现在浏览器中。

第二行更容易理解。 用于绘制矩形的 <rect> 元素体现了以尺寸开头的建议矩形的参数。 stroke-width 描述了线条的粗细，而两个 RGB 颜色模型分别通知浏览器填充矩形和线条的颜色。 这很简单吧？

现在，我们可以通过声明 x 和 y 的值来在页面内移动矩形，如下所示：

<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" x=”15” y=”20”/>

当然，我们不会忘记增加视点尺寸以容纳这将占用的额外空间。

创建 SVG 图像的最简单方法是使用 Adob​​e Illustrator、Inskape 和 Sketch 等绘图工具。 如果您正在寻找图标、复杂的形状等，一些 JavaScript 库（例如 Bonsai.js 和 D3.js）不是从头开始构建的，而是很好的 SVG 图像来源。

添加 SVG 图像

使用 SVG 图像的好处之一是可以轻松地将它们与您的设计集成。 您只需在 img 标签的 src 属性中引用它们。 这应该是指保存在您的网站文件夹中的 .svg 文件，如下所示：

<img src='example.svg'>

或者，您可以将 SVG 代码插入到 HTML 文档中，如前所述，使用 <svg></svg> 标记开始和结束代码。

您还可以在 CSS 中为 background-image 引用 SVG 图像，如下所示：

.main-header {
background-image: url(example.svg);
}

使用 SVG 对开发人员的好处

考虑到当前 Internet 的图形需求，您在后续 Web 项目中对 SVG 的需求怎么强调都不为过。 除了具有强大分辨率和屏幕尺寸的无数新设备之外，网站现在具有如此多的交互性，以至于如果无法完全控制您的图形，就很难提供专业级的网站。

一些好处包括：

可扩展性和响应性

作为一种不依赖于分辨率的图像格式，SVG 可以无限缩放，而不会像素化。 作为开发人员，这使您可以向每个用户提供一流的图形图像，无论其设备的分辨率强度和屏幕尺寸如何。 您可以组合不同的路径、形状和文本元素来创建令人惊叹的视觉效果，这些视觉效果在各种尺寸下都将清晰明了。

这在任何具有固定尺寸的光栅图像格式中都不可用，仅仅是因为当它们被极度放大时，它们永远不会有足够的数据来填充每个空间。 SVG 计算点之间的距离以保持路径不断连接，以便图像在任何比例下都保持清晰。

极其灵活并支持动画

与提供图像最终副本的光栅图像不同，SVG 图像可以通过使用文本编辑器或特殊绘图工具调整代码来完全编辑。 使用 SVG 元素的类名或 ID，您可以使用 CSS 设置 SVG 图像的样式或动画。 也可以使用 Web Animation API、SMIL 或 WebGL 对 SVG 图像进行动画处理。

最重要的是，您可以将 SVG 图像与其他著名的开放式 Web 平台技术和文档集成。 SVG 可以使用 JavaScript 编写脚本，并使用 HTML 等 CSS 进行样式设置。

SEO 友好和小文件大小

SVG 图像以文本格式存在，提高了网站的可访问性，这是页面排名的重要资产。 除此之外，搜索引擎能够索引 SVG 元素文本，并允许用户使用 SVG 文件中的关键字找到您的网站。

SVG 加载速度要快得多，因为它没有要下载的文件并且不需要 HTTP 请求。 提高光栅图像文件的分辨率意味着增加点（像素）的数量。 这将增加图像大小，从而拖累您的网站加载时间。 当您使用 SVG 时，情况远非如此。 作为使用一组指令和坐标创建的图像，与任何其他图像文件类型相比，SVG 文件的大小（优化后）非常小。 这会导致更快的加载时间、更高的页面性能、更高的搜索引擎排名，同时仍能改善用户体验。 有关这方面的更多信息，请访问伦敦 SEO 顾问

SVG 有自己的文档对象模型

SVG 作为一个单独的文档存在，被认为具有自己的结构并位于普通 DOM 中。 这种声誉对于 viewBox 属性至关重要，它允许我们创建任意维度的视点，在不同大小的画布上绘制图像并在不更新 SVG 属性的情况下显示它们。

SVG 是未来的图像文件格式

如果没有更强大且屏幕分辨率惊人的设备的出现，开发人员就不必为针对不同设备优化图像而头疼不已。 但这在几年后不会变得更容易，再加上对增加网站交互性的渴望。

不知何故，通过提供不同的图像来匹配用户的视点维度来管理这些挑战并不划算。 为了通过节省带宽、资金和改善用户体验来实现业务可持续性，转向 SVG 图像格式的努力不可避免地成为重中之重。 SVG 支持者社区不断壮大。

在 W3C 于 2011 年 8 月 16 日推出 SVG 1.1（第二版）之前，SVG 1.0 和 1.1（第一版）已经在改变我们在互联网上处理图像的方式。 这是比常规光栅图像格式更有价值的承诺，这在我们当前的 Web 编程状态中仍然非常有用。 SVG 在所有情况下都不是最好的图像格式。 SVG 的后续版本有望解决 SVG 的一些缺点； 将在本文后面讨论。

何时使用 SVG 图像格式

当然，与分辨率相关的图像格式仍然是照片和其他详细图像的最佳选择。 以下是 SVG 图像格式最佳的常见情况列表。

1. 标志和图标
2. 交互式图像，例如图表、图形、地图、信息图表
3. 动画
4. 应用程序接口
5. 简单的图表和插图
6. 特殊效果，例如粘性或形状变形
7. 低强度的艺术品和简单的图形

SVG 对开发人员的缺点

并非所有浏览器都支持 SVG：旧浏览器对待 SVG 的方式与旧的 Windows XP 在您尝试连接闪存驱动器或佳能 EOS 5DSr 时对待它们的方式相同。 简而言之，SVG 不适用于旧版浏览器。 IE8 及更低版本。 然而，考虑到遗留浏览器并不是任何未来事业的一部分，再加上只有少数人仍在使用它们，这并不是不使用 SVG 的主要原因。

SVG 不支持这么多细节：作为路径和点的混合体，SVG 缺乏显示与基于像素的光栅图像格式一样多的细节的框架。 SVG 不适用于用相机拍摄的任何东西。 因此，具有如此多细节的照片和其他形式的图形最好使用光栅图像格式显示，因为它们支持更高的颜色密度。

理解 SVG 代码：虽然开发人员可能被认为知道如何使用多种 Web 编程语言，但事实证明，增加这种负担是一个挑战。 SVG 代码模式实际上并不难或与 Web 编程语言完全不同。 但是创建或处理引人注目的图像需要一些努力。 当位图图像很方便且无需努力嵌入时，这并不是每个开发人员都愿意投入大量时间做的事情。

结论

网站上图形响应其广泛用户的行为是当今 Web 开发的一个重要方面。 而 SVG 图像格式是最重要的解决方案，而不是像我们当前的设计中通常看到的那样呈现多种图像尺寸。 这是因为浏览器使用一组指令计算应如何渲染图像，这些指令可确保任何比例的清晰和清晰的图像。

位图图像仍然最适合用于高度详细的图像，例如照片，而 SVG 图像用于不太详细的图像，例如图标、徽标、图表、信息图表等。我建议您坚持使用 Illustrator 或 Sketch 等绘图工具为图标和流行形状创建 SVG 图像和在线库。 只有当您想要操作 SVG 图像时才需要编码。

请让我们知道您如何使用 SVG 以及此处未分享的其他酷炫技巧。