了解 SVG

D3 通常与一种称为可缩放矢量图形（SVG）的技术结合使用，用于创建图表和图形。SVG 已经存在很长时间，功能非常强大。

SVG 是一种基于文本的图像格式。当我们想到图像时，通常会联想到屏幕上由像素组成的、能够被视觉识别的图案。你可以使用 Photoshop 这类软件来制作图像，手机摄像头拍摄的照片也可以作为图像上传到网页上。最常见的图像格式包括 JPEG、PNG 和 GIF。

还有一种图像格式叫做 SVG。但与传统图像不同，SVG 并不是由程序或设备直接生成的。相反，它是通过代码创建的——一种你可以阅读和编写的代码。这种方式的优势在于文件体积更小。

虽然市面上有一些工具可以生成 SVG 图像，但我们稍后再讨论这些工具。现在先退一步，来看一下“可缩放矢量图形”这个术语。

拆解概念

什么是 SVG？SVG 图像是通过数学计算生成的图像。为了更好地理解，我们来对比一下矢量图像和普通图像。

以下是矢量图像（左侧）与普通图像（右侧）的示例：

这是 D3 的标志，看起来非常相似，对吧？现在我们尝试放大这两个图像。

这次差异就明显了。左边仍是矢量图像，右边是普通图像。普通图像的边缘出现了像素化，清晰度完全丧失，而矢量图像依然保持平滑和清晰。如果我们继续放大，矢量图像的优势将更加显著。

无论你把矢量图像放大到多大，它始终清晰锐利；而普通图像则会变得越来越模糊、像素化。

再看一个例子：这次我不放大，而是拉伸这个标志，改变其形状。

两张图像都被压缩缩短了高度。右边的图像失去了原有的平滑边缘。

而左边的图像则被正确地缩放，字符边缘仍然平滑一致，没有出现质量损失。相比之下，矢量图像更容易处理，无论怎样变换尺寸或形状，画质都不会下降。

再次说明，矢量图像在画质方面完胜。使用 SVG 图像的优势显而易见。

为什么要了解 SVG 图像？

你可能会问：为什么我要展示这些内容？因为在网页开发中，我们可以直接使用 SVG 图像。它们可以自由调整大小、修改形状并灵活移动，完全不必担心画质受损。

这正是它们被称为“可缩放矢量图形”的原因——这类图像可以根据需求进行任意操作。但这并不意味着 SVG 是完美的，它也存在一些局限性。

D3 可以应用于网页环境，能与标准 HTML 元素、Canvas 以及 SVG 图像协同工作，并不局限于某一种技术。然而，由于 SVG 图像具有极高的灵活性，D3 通常更常与 SVG 配合使用。例如，图表需要适配不同设备的屏幕尺寸，或者交互式图表在数据增减时需要重新绘制，这些场景下 SVG 就成为最理想的选择。

SVG 图像的缺点

计算机需要执行数学运算来渲染 SVG 图像。图像越复杂，所需的计算量和系统资源就越多。对于一个简单的标志来说，这不成问题。

SVG 更适合基本形状和图形设计，广泛用于动画制作或网页图形元素。

如何创建 SVG 图像

创建 SVG 图像主要有两种方式：一是使用 Adobe Illustrator 等专业设计软件；二是通过代码手动编写。我们将在下一课中学习如何用代码创建 SVG。

最后一点提醒

在进入下一课之前，有一点非常重要：由于我们将使用 D3，大部分复杂工作都会由它自动完成。SVG 图像本身可能很快变得复杂，尤其是当你的数据量大且结构复杂时。

D3 库的设计目的就是简化这些操作。你不需要记住 SVG 所有的元素和属性。更重要的是理解其背后的原理，以及为何某些行为会如此表现。