最后更新: 15 Dec, 2025
当大多数人想到图像格式时，他们会想到用于照片的 JPEG、用于透明图形的 PNG，以及用于动画的 GIF。但还有另一种格式悄悄为现代网络的大部分内容提供动力，却应得到更多认可： SVG（可伸缩矢量图形）。尽管已经存在超过二十年，SVG 仍是最未被充分利用且最被误解的图像格式之一——即使它解决了许多其他图像类型面临的问题。让我们一起探讨 SVG 为什么可能是你网站的秘密武器。
核心区别：数学 vs 像素 要了解 SVG 在界面设计中为何更出色，你必须了解它与常用图像的区别。
光栅图像（JPEG、PNG、GIF） 标准图像是光栅图形。想象一张方格纸，你在特定的格子里上色。退后看，它像是一幅画。但如果放大，就会看到那些方块（像素）。
问题：文件大小取决于像素数量。如果尝试放大图像，计算机必须猜测新像素的颜色，导致模糊、块状的伪影。 SVG 究竟是什么？ 首先，让我们揭开 SVG 的神秘面纱。与由像素组成的 JPEG 或 PNG 文件不同，SVG 是一种 基于矢量的格式，使用 XML 标记描述。它不为每个像素存储颜色信息，而是包含数学指令，告诉浏览器如何绘制形状、线条、曲线和颜色。
SVG 被低估的优势 1. 无限可伸缩性且不失真 最明显的好处就在名字里：可伸缩性。当一张 300px 宽的 JPEG 被拉伸到 1200px 时会变得模糊，而 SVG 在任何尺寸下都保持完美清晰——从微小的 favicon 到全屏背景。在我们多设备的世界里，网站需要在智能手表到 4K 显示器的所有设备上保持锐利，这一点尤为宝贵。
2. 惊人的小文件体积 对于徽标、图标和插图等简单图形，SVG 文件通常远小于对应的 PNG 或 JPEG。一个复杂的徽标保存为 PNG 可能是 50KB，而同一设计的优化 SVG 可能不足 5KB。这直接影响页面加载时间和 Core Web Vitals 分数——对用户体验和 SEO 都至关重要。