SVG 可以显示照片吗？

从技术上说，可以嵌入光栅数据，但这失去了使用 SVG 的意义。SVG 适合形状、图标和插图，不适合摄影内容。照片应使用 JPG、WebP 或 AVIF。

所有浏览器都支持 SVG 吗？

支持。所有现代浏览器都能完整渲染 SVG。SVG 成为 Web 标准已有 20 多年，是 Web 上支持最广泛的图像格式之一。

不可以。截图是从屏幕截取的像素网格，属于光栅图像；SVG 则以数学形状存储内容，是矢量格式。基于像素的屏幕无法直接截取为矢量文件，但设计元素可以导出为 SVG。

SVG 是图标和徽标的理想格式。这些元素需要以从网站图标到广告牌的各种尺寸显示，而 SVG 在任何比例下都能保持清晰，无需制作多个尺寸版本。

可以。SVG 支持通过 CSS、JavaScript 和自身的 SMIL 动画元素制作动画，能够直接在浏览器中创建轻量、可缩放的动态图形。

SVG（可缩放矢量图形）是一种与分辨率无关的图像格式。它使用数学形状而不是像素，因此无论尺寸多大都能保持清晰，也不会因放大而增加文件大小。

SVG 与 PNG、JPG 或 WebP 等格式的根本区别，在于它们表示图像的方式。

光栅格式把图像存储为像素网格，每个像素都有特定色值。一张 1000 × 1000 的 PNG 恰好包含 100 万个像素。把它放大到 2000 × 2000 时，由于新像素必须根据已有像素插值，图像会变得模糊；缩小图像则会丢弃像素，可能损失细节。

SVG 存储的是数学指令，例如在某个位置以某个半径画圆、从一处到另一处画线，或用某种颜色填充形状。由于这些指令描述的是几何形状，而不是单个像素，SVG 以任何尺寸渲染都能保持清晰。一个 1 KB 的 SVG 图标，无论以 16 像素还是 16000 像素显示，看起来都一样锐利。

这种差异决定了各自的适用场景。原本由形状、文字和线条构成的内容，例如图标、徽标、示意图和图表，很适合 SVG。原本由捕获像素构成的照片、截图和扫描文档，则必须使用光栅格式。

图标与界面元素——SVG 图标在不同设备像素密度下都能完美缩放。一份 SVG 可以替代多个尺寸的 PNG（16 px、32 px、64 px 等），在 Retina 和高 DPI 显示器上仍然清晰。
徽标与品牌素材——徽标会以从网站图标到印刷品的各种尺寸呈现。SVG 可以适应这些尺寸，不会降低质量，也不会增加文件大小。
数据可视化——用 SVG 渲染的图表和示意图可以缩放、通过 CSS 设置样式，还能借助 JavaScript 增加交互。
插图与信息图——矢量插图在任何缩放级别都能保持清晰，还可响应 CSS 主题，无需单独制作深色模式版本。
Web 动画——使用 SVG 搭配 CSS 或 JavaScript 制作轻量动画，可以避免光栅动画格式带来的文件体积负担。

SVG 与截图位于图像格式光谱的两端。截图从屏幕截取像素，生成光栅数据；SVG 存储矢量形状。两者无法在不从根本上改变内容的情况下互相转换。

截图中即使包含 SVG 元素，例如图标、徽标和界面矢量图形，这些元素也会在截图时被光栅化。最终的 PNG 或 WebP 不再包含原始矢量数据。

这对文档流程很重要。如果需要在截图旁放置可缩放的示意图，最佳做法是把 SVG 素材单独保留，再与光栅截图一起嵌入，而不是尝试把所有内容截成一张图。有些截图和导出工具支持混合格式输出，可以在同一份文档或演示文稿中组合光栅截图与矢量叠加元素。

用矢量标注工具处理截图时，箭头、方框和文字会以不受分辨率影响的叠加层绘制。即使缩放截图，标注仍然清晰，这对需要在不同屏幕尺寸下查看的文档尤其有用。

SVG 不是截图格式，但在最终素材管线中经常与截图并存。徽标、图标、箭头和说明标记可以保持矢量，底层界面截图则继续使用光栅格式。这样既能让品牌叠加元素保持清晰，也不必强行把截图转换成不合适的格式。

复杂设计使用 SVG，而光栅图其实更小。 包含数千条路径的精细插图，生成的 SVG 可能比压缩后的 PNG 更大。图像形状很多且复杂时，应测试两种格式。
用 SVG 存储摄影内容。 在 SVG 中嵌入光栅数据只会增加额外开销，没有实际好处。照片和截图应使用合适的光栅格式。
没有优化 SVG 文件。 设计工具导出的 SVG 往往包含不必要的元数据、隐藏图层和重复属性。使用优化工具处理后，文件有时可以缩小 50% 以上。
忽视无障碍访问。 SVG 元素可以加入供屏幕阅读器使用的标题和说明标签，但许多作者会遗漏。添加恰当标签，可以让所有用户访问 SVG 内容。