矢量图形是一种向渲染上下文传达一系列形状、坐标和路径的方法。它们是一组关于如何绘制图像的指令。当图像放大或缩小时，图像表示的点和线的集合会重新绘制以进行缩放。两点之间的平滑曲线将在任何尺寸下重新平滑绘制，类似于 HTML 元素上 CSS 定义的边框在该元素在视口中缩放时重新绘制的方式。
可缩放矢量图形 (SVG) 是一种由 W3C 开发的基于 XML 的标记语言。它是一种专为现代 Web 设计的矢量图像格式。
任何专门用于编辑矢量图稿的设计软件都允许您将图像导出为 SVG。但作为一种标准化的、人类可读的标记语言，SVG 也可以使用任何文本编辑软件创建和编辑，而无需考虑用于创建它的软件，尽管对于任何真正复杂的图像而言，这很快变得不切实际。SVG 可以使用 CSS 进行样式设置，或者包含 JavaScript，将行为和交互构建到图像本身中。
即使超越了对设计师和开发者的显而易见的吸引力，SVG 在最终用户体验方面也是一种非常强大的格式。与栅格图像格式更规范的基于像素网格的信息相比，SVG 源中包含的描述性信息通常高度紧凑，在简单形状的情况下——为了在某种程度上过度简化，区别在于告诉浏览器“在 1x1 和 1x5 之间绘制一条 1 像素的红线”和“1x1 是红色像素。1x2 是红色像素。1x3 是红色像素。1x4 是红色像素。1x5 是红色像素。”另一方面，SVG 的描述性本质需要浏览器进行更多的解释——更多的“思考”。因此，复杂的 SVG 渲染起来可能更费力。同样，高度复杂的图像可能意味着冗长的指令集和较大的传输大小。
您可能需要进行一些试验和错误，才能立即识别出图像源候选项更适合使用 SVG 而不是传统的栅格格式。不过，有一些指导原则：图标等界面元素几乎总是非常适合使用 SVG。具有锐利线条、纯色和清晰形状的艺术作品很可能非常适合 SVG。
SVG 是一个庞大的主题：一种与 HTML 并存的完整标记语言，具有独特的样式选项和功能。有关 SVG 的更详细介绍，请参阅 MDN SVG 教程。