图片转 SVG

什么是 SVG？

SVG（可缩放矢量图形）是万维网联盟（W3C）于 2001 年标准化的基于 XML 的矢量图像格式。与 JPG、PNG 或 WebP 等以像素网格存储图像的光栅格式不同，SVG 使用编码为 XML 标签的数学指令来描述形状、路径、文本和渐变。由于图像由几何图形而非像素定义，SVG 可以缩放至任意尺寸——从 16×16 的网站图标到广告牌——而不会损失任何质量，也不会增加文件大小。

每个现代网页浏览器都能原生渲染 SVG，SVG 文件可以在任何文本编辑器中手动编辑，或在 Adobe Illustrator、Figma、Inkscape 和 Sketch 等矢量设计工具中打开。该格式还支持交互性、动画、脚本和 CSS 样式，使其成为现代网页中图标、徽标、插图、图表和数据可视化的热门选择。

为什么要将图片内嵌到 SVG？

尽管 SVG 本质上是矢量格式，但 SVG 规范允许通过 <image> 元素将光栅图像嵌入 SVG 文档中。光栅数据以 Data URL（通常是 Base64 编码的 PNG 或 JPEG）形式编码，并通过 href 属性引用。这意味着您可以拍摄任何照片、截图或光栅图形，并将其包装在 SVG 容器中，生成一个独立完整的 .svg 文件。

将图片内嵌到 SVG 中有几个实际原因。最常见的是将图像与仅 SVG 支持的特性（如可缩放尺寸、矢量叠加层、蒙版、滤镜、剪切路径、动画或交互性）打包在一起。嵌入还可以生成单个可移植文件，可直接内联到 HTML 中、通过单个 HTTP 请求发送，或作为不依赖任何外部 URL 的自包含资源分享。

带内嵌图像的 SVG

内嵌光栅图像的 SVG 结合了两者的优势。外层 SVG 提供一个可缩放、基于 XML 的容器，任何浏览器、图像查看器或编辑器都能打开。内层 <image> 元素以 Data URL 形式携带实际的像素数据，因此文件完全自包含——不存在可能损坏的外部依赖项。生成的 SVG 可以调整大小、使用 CSS 设置样式、通过 SMIL 或 JavaScript 实现动画，并与其他矢量元素一起编辑。

选择 PNG 内嵌格式时，内嵌图像保留完整的 Alpha 通道透明度和无损质量。选择 JPEG 内嵌格式时，文件通常更小，因为 JPEG 压缩对照片内容更高效，但透明度会丢失，且内嵌图像是有损的。请根据源图像的内容选择最合适的选项。

何时使用图片转 SVG 转换

在多种实际场景下，将光栅图像转换为内嵌图像的 SVG 非常实用：

• 自包含交付物。将截图或照片包装在 SVG 内，作为单个文件分享，在任何浏览器中打开都无需外部资源。
• 可缩放图像容器。使用 SVG 的 width 和 height 属性，让光栅图像在响应式布局中表现为可缩放元素。
• 光栅背景上的矢量叠加层。在照片上方添加 SVG 文本、形状或路径，同时将所有内容保留在同一个文档中。
• 单资源 HTTP 请求。将图像内嵌到 SVG 中，再将 SVG 内联到 HTML 中，从而消除光栅资源的单独网络往返。
• 电子邮件和文档嵌入。内嵌图像的 SVG 可插入到支持 SVG 的编辑器中，并在各查看器中一致渲染。
• 动画与交互性。使用 SVG 的原生功能对内嵌图像应用 SMIL 动画、CSS 变换或 JavaScript 事件处理。

对于不需要可缩放性和 SVG 特性的纯照片内容，普通的 JPG、PNG 或 WebP 文件通常比 SVG 包装版本更好，因为 Base64 编码的开销会使后者体积更大。

如何将图片转换为 SVG

使用此工具将图像转换为 SVG 只需几秒钟，并且完全在浏览器中完成。无需上传、无需注册、无需安装。工具解码您的图像，将其重新编码为 PNG 或 JPEG Data URL，并将其包装在 SVG 文档中。请按以下四步操作：

1. 上传图片。点击上传区或将 .jpg、.png、.webp、.gif、.bmp 或 .svg 文件拖放到此处。图像将在本地解码并显示为预览。
2. 选择内嵌格式。选择"PNG 内嵌"可获得带透明度的无损质量，或选择"JPEG 内嵌"在不需要透明度时获得更小的文件。
3. 转换为 SVG。点击"转换为 SVG"按钮。生成的 SVG 代码会出现在结果区，方便查看或复制。
4. 复制或下载。使用"复制"将 SVG 代码粘贴到 HTML 或编辑器中，或使用"下载 .svg"将其保存为自包含的 SVG 文件。

由于每一步都使用 JavaScript 在浏览器中本地运行，您的图像永远不会被上传到服务器。这使得转换完全私密、快速，并适合敏感或机密的图像。