什么是 SVG？可缩放矢量图形格式指南
SVG（可缩放矢量图形）是一种独特的图片格式，使用 XML 将二维图形描述为矢量而非像素。与 JPEG 或 PNG 等光栅格式不同，SVG 图片可以缩放到任意大小而不损失质量，非常适合 Logo、图标、图表和响应式网页设计。
什么是 SVG？
SVG 是由 W3C 开发并于 2001 年推出的基于 XML 的矢量图片格式。与将图片存储为像素网格的光栅格式（JPEG、PNG、GIF）不同，SVG 将图片存储为形状、路径、文字和渐变的数学描述。这意味着图片可以缩放到任何尺寸--从微小图标到广告牌--而不会有任何质量损失或文件大小增加。
SVG 文件本质上是包含 XML 标记的文本文件，这意味着可以用任何文本编辑器编辑，被搜索引擎搜索，并用 gzip 有效压缩。SVG 支持通过 CSS 设置样式，通过 JavaScript 实现交互，通过 SMIL 或 CSS 动画实现动画。TurnPic 通过将位图数据嵌入 SVG 容器来将光栅图片转换为 SVG，提供 SVG 结构和可缩放性，同时保留原始像素数据。
SVG 的优缺点
SVG 为矢量图形提供了独特优势，但对照片内容有限制。
| 优点 | 缺点 |
|---|---|
| 无限缩放无质量损失 - 响应式设计的理想选择 | 不适合复杂照片 - SVG 为矢量图形设计 |
| Logo 和图标等简单图形文件体积小 | 包含大量元素的复杂 SVG 可能变大且渲染缓慢 |
| 可编辑、可搜索的文字和 CSS/JavaScript 交互支持 | SVG 中嵌入的光栅图片不会受益于矢量缩放 |
浏览器兼容性
SVG 拥有出色的浏览器支持--所有现代浏览器包括 Chrome、Firefox、Safari、Edge 和 Opera 多年来都支持 SVG。SVG 可以在 HTML 中内联显示、作为图片源引用或作为独立文件加载。移动浏览器支持也很全面。主要的兼容性考虑是非常旧的浏览器（IE 8 及更早版本）不支持 SVG，但在 2026 年这很少是问题。
何时使用 SVG
SVG 是任何需要无损缩放的图形的理想格式。它是在多种尺寸下显示的 Logo、图标、图表、图示和插图的首选格式。对于照片和色彩丰富的复杂图片，SVG 不适合--请使用 JPEG、PNG、WebP 或 AVIF。
SVG 表现出色的常见场景包括：
- 需要在任何尺寸下保持清晰的 Logo 和品牌图形
- 响应式网站和应用的图标和 UI 元素
- 图表、图示和技术插图
- 需要 CSS 样式或 JavaScript 交互的图形
如何将图片转换为 SVG
使用 TurnPic 将图片转换为 SVG 时，会将光栅图片嵌入 SVG 容器。在 SVG 转换页面上传您的 JPEG、PNG、GIF、BMP、WebP、AVIF 或 ICO 文件。工具支持每批最多 30 张图片批量转换，每个文件最大 10 MB。
转换会创建一个 SVG 文件，其中包含以 base64 编码嵌入 SVG XML 结构中的原始位图图片。这提供了 SVG 文件格式和结构，同时保留了视觉内容。生成的 SVG 可在任何兼容 SVG 的应用中打开。处理完成后，可逐个下载 SVG 文件或打包为 ZIP 下载。
常见问题
SVG 可以包含照片吗？
纯 SVG 是矢量格式，不是为照片设计的。但 SVG 可以使用 base64 编码或外部引用在其 XML 结构中嵌入光栅图片（位图）。TurnPic 使用这种方法从光栅图片创建 SVG 文件。嵌入的图片保持其基于像素的特性，但被包装在 SVG 格式中。
我的 SVG 图片缩放时会损失质量吗？
纯矢量 SVG 图形可以完美缩放而不会有任何质量损失。然而，当 SVG 包含嵌入的光栅图片（如 TurnPic 转换器生成的）时，嵌入的位图部分仍然是基于像素的，当缩放超出原始分辨率时会显示质量损失。SVG 容器本身是可缩放的，但嵌入的图片细节不是。
SVG 比 PNG 或 JPEG 更小吗？
对于 Logo 和图标等简单矢量图形，SVG 文件通常比同等 PNG 文件小得多。然而，当 SVG 包含嵌入的光栅图片时，文件实际上比原始文件大，因为图片数据是 base64 编码的（增加约 33% 的开销）。对于照片内容，JPEG 或 WebP 要小得多。
我可以编辑 SVG 文件吗？
是的，SVG 文件是 XML 文本文件，可以用任何文本编辑器或专业矢量图形软件（如 Adobe Illustrator、Inkscape 或 Figma）编辑。这是 SVG 的关键优势之一--图片定义是可读和可编辑的，不像光栅格式是二进制的。
准备好将图片转换为 SVG 了吗？
立即转换为 SVG