SVG

SVG（Scalable Vector Graphics，可缩放矢量图形）是基于 XML 的二维矢量图形格式，由 W3C 标准化。文件扩展名为 .svg，媒体类型为 image/svg+xml。SVG 文件不保存像素，而是以标记形式描述形状、路径、文本、渐变和滤镜，查看器可按任意尺寸绘制。

由于 SVG 是文本格式，可以用代码编辑器编辑，用 gzip 压缩，用 CSS 设置样式，并用 JavaScript 修改。浏览器原生支持渲染 SVG，设计工具也常将图标、徽标和插图导出为 SVG。SVG 文件中也可以嵌入位图，但嵌入的部分与其他位图一样，放大后会变模糊。

矢量图与位图

	矢量图（SVG）	位图（PNG、JPG、WebP）
存储内容	形状和路径	像素
缩放	任意尺寸下保持清晰	放大后模糊
适用场景	图标、徽标、示意图	照片、截图
文件大小	随图形复杂度增长	随像素数量增长

SVG 的使用场景

• 网站徽标和图标集。
• 由代码生成的图表和示意图。
• 网页中的插图和简单动画。
• 支持 SVG 格式网站图标的浏览器中的 favicon。

SVG 与截图

截图是由像素组成的网格，本质上属于位图。将截图保存在 SVG 文件中并不会使其可缩放，嵌入的位图放大后仍会模糊。描摹工具可以把截图转换为矢量路径，但结果很少能还原界面中的小号文字，且文件会明显变大。

SVG 在截图相关工作流中的位置

SVG 适合用于截图周围的元素，例如用于说明截图的箭头、标注框、徽标和示意图。常见做法是用 PNG 或 WebP 保存界面截图，再在网页上叠加 SVG 格式的图标和标注。

常见错误

• 在 SVG 中嵌入大尺寸 PNG，并将其称为矢量文件。
• 将 SVG 上传到只接受 PNG 或 JPG 的平台。
• 打开来源不明的 SVG 文件时未加注意，因为 SVG 可以包含脚本。

需要立即处理图片？

使用Image Converter可在 PNG、JPG 和 WebP 之间转换截图格式，使用Image Compressor可减小截图文件大小。

常见问题

可以将截图保存为 SVG 吗？

可以将截图包装在 SVG 文件中，但它仍然是位图。截图请使用 PNG。

SVG 比 PNG 更小吗？

对于简单图形，通常更小。对于细节丰富的图像和截图，通常更大。

来源

• Scalable Vector Graphics (SVG) 2 (W3C)
• SVG (MDN)

相关资源

• 图片格式转换工具：PNG、JPG 和 WebP 之间的转换。
• 截图标注工具：在截图上添加箭头和文字标签。
• 导出格式：Temposhot 导出的位图格式。