如何将SVG转换为JPG/JPEG：5种简单方法

SVG 是可缩放矢量图形的首选格式——Logo、图标、插画，无所不能。但并非所有平台都支持 SVG。社交媒体、邮件客户端、内容管理系统以及许多旧版应用只接受 JPG（也叫 JPEG）格式。如果你曾经尝试上传 SVG 文件却被提示"格式不支持"，一定体会过那种无奈。

好消息是，SVG 转 JPG 并不复杂。本文将为你介绍 5 种经过验证的方法，从零安装的在线工具到开发者友好的命令行工具，总有一种适合你。无论你是设计师、开发者还是偶尔需要转换图片的普通用户，都能在这里找到合适的方案。

> 重要提示：JPG 不支持透明背景！

在介绍方法之前，有一件事你必须要知道：

JPG/JPEG 不支持透明度。 与 PNG 可以保留透明背景不同，JPG 会用纯色填充透明区域——通常是白色或黑色。

当你把 SVG 转为 JPG 时，所有透明像素都会被替换。如果你的 SVG 有透明背景（大多数图标和 Logo 都是这样），转换结果可能与你的预期大不相同：

• 如果转换器默认使用白色背景，深色 SVG 元素放在深色网页上时，会突然出现一个白色矩形。
• 如果转换器默认使用黑色背景，浅色元素可能变得难以辨认。

解决方案：在将 SVG 转为 JPG 时，一定要显式选择背景颜色。优秀的转换器——包括 svg2img.cc——都允许你在转换前指定背景色。

> 什么时候选择 JPG 而不是 PNG？

JPG 和 PNG 都是位图格式，但用途不同。以下场景适合选择 JPG：

• 照片类内容：JPG 使用针对照片和复杂色彩渐变优化的有损压缩，对于这类内容，文件大小比 PNG 小得多。
• 邮件和社交媒体分享：JPG 文件更小，非常适合通过邮件发送或上传到有文件大小限制的平台。
• 网站性能优化：如果要将 SVG 衍生图片用作横幅或背景图，JPG 可以显著减少页面加载时间。
• 通用兼容性：JPG 几乎被所有设备、应用和平台支持。没有任何格式比 JPG 更"通用"。

什么时候应该用 PNG：需要透明背景、锐利边缘（如截图或线条画）或无损质量时。详细对比请参考我们的 SVG 与 PNG 指南。

> 方法一：在线转换工具（最快捷）

对大多数人来说，在线转换器是从 SVG 到 JPG 最快的途径。不需要安装任何软件，几秒钟就能完成。

如何使用在线 SVG 转 JPG 工具

操作步骤很简单：

1. 打开浏览器，访问转换工具网站。
2. 加载你的 SVG 文件（拖拽上传或点击选择）。
3. 设置输出参数——尺寸、背景色、JPG 质量等。
4. 点击转换，下载 JPG 文件。

为什么推荐 svg2img.cc？

在众多在线转换器中，svg2img.cc 有一个关键优势：你的文件永远不会离开你的浏览器。

大多数在线转换器的工作原理是：将你的文件上传到远程服务器，在服务器上处理，再把结果返回给你。这意味着你的 SVG 数据——可能包含商业 Logo、设计稿或敏感信息——会被传输到第三方服务器上。

svg2img.cc 采用了完全不同的方案。所有转换过程都在你的浏览器内部通过客户端 JavaScript 完成，文件不会上传到任何服务器。这意味着：

• 绝对隐私：你的设计稿始终留在你的电脑上，不会发送到任何地方。
• 即时速度：没有上传/下载的等待时间，转换在毫秒级完成。
• 离线可用：页面加载完成后，即使断网也能继续转换。
• 无文件大小限制：服务器端工具通常限制 5–50 MB，而本地处理没有这个限制。
• 完全免费，无任何限制：没有每日配额、没有水印、没有付费版本。

svg2img.cc 支持自定义尺寸、DPI、背景色（对 JPG 转换至关重要）和 JPG 质量等级（0–100），输出格式支持 PNG、JPG 和 WebP，给你对最终结果的完全掌控。

> 方法二：桌面软件（专业用户首选）

如果你经常处理图形文件，桌面软件能提供最精细的控制。

Inkscape（免费开源）

Inkscape 是一款专业级的矢量图形编辑器，也是处理 SVG 最好的免费工具之一。导出 JPG 的步骤：

1. 在 Inkscape 中打开 SVG 文件。
2. 点击菜单 文件 → 导出 PNG 图像（或按 Ctrl+Shift+E）。
3. 设置所需的尺寸或 DPI。
4. 先导出为 PNG。
5. 然后用任意图片查看器或 ImageMagick 命令将 PNG 转为 JPG：convert output.png output.jpg。

注意：Inkscape 只能直接导出 PNG，不能直接导出 JPG。你需要额外一步才能得到 JPG，稍显不便。不过 Inkscape 的渲染质量非常出色。

Adobe Illustrator

对于 Creative Cloud 订阅用户，Illustrator 提供了便捷的 JPG 导出流程：

1. 在 Illustrator 中打开 SVG 文件。
2. 点击 文件 → 导出 → 导出为...
3. 格式选择 JPEG。
4. 在 JPEG 选项对话框中设置：
   • 质量：0–100 的滑块（或低/中/高/最高）。
   • 颜色模式：屏幕用 RGB，印刷用 CMYK。
   • 分辨率：屏幕（72 PPI）、中（150 PPI）、高（300 PPI）。
   • 背景：选择背景颜色——默认是白色。
5. 点击 确定 导出。

Illustrator 可以精确控制压缩质量和背景处理，是专业工作的理想选择。

其他桌面工具

• GIMP：免费的光栅图像编辑器，可以打开 SVG 并导出为 JPG，支持质量控制。
• Affinity Designer：Illustrator 的付费替代品，SVG/JPG 导出功能完善。
• Photoshop：打开 SVG 并栅格化到所需分辨率，然后通过 文件 → 导出 → 导出为... 选择 JPG。

> 方法三：命令行工具（批量处理与自动化首选）

对于需要批量转换或集成到自动化流程中的开发者来说，命令行工具是最好的选择。

ImageMagick

ImageMagick 是一个功能强大的图像处理套件，支持 Linux、macOS 和 Windows：

# 基本 SVG 转 JPG
convert input.svg output.jpg

# 指定尺寸
convert -resize 1920x1080 input.svg output.jpg

# 设置 DPI 以获得更高画质
convert -density 300 input.svg output.jpg

# 设置 JPG 质量（0-100，越高画质越好，文件越大）
convert -quality 90 -density 300 input.svg output.jpg

# 添加白色背景处理透明区域（JPG 转换的关键步骤！）
convert -background white -flatten input.svg output.jpg

# 批量转换目录下所有 SVG 文件
for f in *.svg; do convert -background white -flatten -quality 85 "$f" "${f%.svg}.jpg"; done

注意：-background white -flatten 参数对 SVG 转 JPG 至关重要。不加这些参数，透明区域可能渲染为黑色。

CairoSVG

CairoSVG 是基于 Python 的 SVG 转换器，输出质量高：

# 安装
pip install cairosvg

# 基本 SVG 转 JPG
cairosvg input.svg -o output.jpg

# 指定尺寸
cairosvg input.svg -o output.jpg --output-width 1920 --output-height 1080

# 设置 DPI
cairosvg input.svg -o output.jpg --dpi 300

rsvg-convert（librsvg）

rsvg-convert 使用 GNOME 桌面环境同款的渲染引擎，SVG 转换效果通常优于 ImageMagick：

# 基本转换（输出格式由文件扩展名决定）
rsvg-convert -w 1920 -h 1080 input.svg -o output.jpg

# 批量转换
for f in *.svg; do rsvg-convert -w 1920 "$f" -o "${f%.svg}.jpg"; done

Ubuntu/Debian 安装：sudo apt install librsvg2-bin macOS 安装：brew install librsvg

> 方法四：编程实现（JavaScript 和 Python）

对于需要在应用程序中集成 SVG 转 JPG 功能的开发者，以下提供两种常用语言的实现方案。

JavaScript（Canvas API）

你可以在浏览器中使用 Canvas API 完全自主地完成 SVG 转 JPG——这本质上就是 svg2img.cc 等浏览器端工具的底层原理：

async function svgToJpg(svgFile, width, height, quality = 0.92, bgColor = '#ffffff') {
  // 读取 SVG 文件内容
  const svgText = await svgFile.text();

  // 从 SVG 创建图像
  const img = new Image();
  const svgBlob = new Blob([svgText], { type: 'image/svg+xml;charset=utf-8' });
  const url = URL.createObjectURL(svgBlob);

  return new Promise((resolve, reject) => {
    img.onload = () => {
      // 创建指定尺寸的画布
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');

      // 填充背景色（JPG 不支持透明！）
      ctx.fillStyle = bgColor;
      ctx.fillRect(0, 0, width, height);

      // 将 SVG 图像绘制到画布上
      ctx.drawImage(img, 0, 0, width, height);

      // 将画布转为 JPG
      canvas.toBlob((blob) => {
        URL.revokeObjectURL(url);
        resolve(blob);
      }, 'image/jpeg', quality);
    };
    img.onerror = reject;
    img.src = url;
  });
}

// 使用示例
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const jpgBlob = await svgToJpg(file, 1920, 1080, 0.9, '#ffffff');
  const downloadUrl = URL.createObjectURL(jpgBlob);
  const a = document.createElement('a');
  a.href = downloadUrl;
  a.download = 'output.jpg';
  a.click();
});

与 PNG 转换的关键区别：ctx.fillStyle = bgColor; ctx.fillRect(...) 在绘制前填充背景。没有这一步，SVG 的透明区域在 JPG 中会变成黑色。canvas.toBlob() 的第三个参数控制 JPG 质量（0.0 到 1.0）。

Python（CairoSVG + Pillow）

对于服务端或自动化批处理场景，Python 提供了强大的处理管线：

import cairosvg
from PIL import Image
import io
import os

def convert_svg_to_jpg(input_path, output_path, width=None, height=None,
                        quality=90, bg_color=(255, 255, 255)):
    """将单个 SVG 文件转换为 JPG，支持自定义背景色。"""
    # CairoSVG 输出 PNG，因此先在内存中生成 PNG
    png_data = io.BytesIO()
    kwargs = {'write_to': png_data, 'dpi': 300}
    if width:
        kwargs['output_width'] = width
    if height:
        kwargs['output_height'] = height
    cairosvg.svg2png(url=input_path, **kwargs)

    # 打开 PNG 并转换为带背景色的 JPG
    png_data.seek(0)
    img = Image.open(png_data)

    # 处理透明度：合成到纯色背景上
    if img.mode in ('RGBA', 'LA'):
        background = Image.new('RGB', img.size, bg_color)
        background.paste(img, mask=img.split()[-1])  # 用 alpha 通道作为遮罩
        img = background
    else:
        img = img.convert('RGB')

    img.save(output_path, 'JPEG', quality=quality)

def batch_convert(input_dir, output_dir, width=1920, quality=85):
    """批量转换目录中的所有 SVG 文件为 JPG。"""
    os.makedirs(output_dir, exist_ok=True)
    for filename in os.listdir(input_dir):
        if filename.endswith('.svg'):
            input_path = os.path.join(input_dir, filename)
            output_path = os.path.join(output_dir, filename.replace('.svg', '.jpg'))
            convert_svg_to_jpg(input_path, output_path, width=width, quality=quality)
            print(f"已转换: {filename}")

# 使用示例
batch_convert('./svg-icons', './jpg-icons', width=1920, quality=85)

这种方法通过检测 RGBA 图像并将其合成到纯白色（或自定义颜色）背景上，正确处理了透明到背景色的转换。

> 方法五：设计工具（Figma、Canva、Sketch）

如果你已经在设计工具中工作，可以直接在设计工具内完成 SVG 到 JPG 的导出，无需切换软件。

Figma

Figma 已成为许多团队的首选设计工具：

1. 将 SVG 文件导入 Figma 项目（拖拽到画布上即可）。
2. 选中要导出的画框或元素。
3. 在右侧边栏中，滚动到 导出 部分。
4. 点击 + 按钮添加导出设置。
5. 格式选择 JPG。
6. 设置导出倍率（1x、2x、3x、4x）或自定义宽度。
7. 点击 导出，选择保存位置。

Figma 还支持同时导出多个尺寸——非常适合为不同显示密度生成图片变体。

Canva

Canva 在社交媒体和营销设计领域非常流行：

1. 创建新设计或打开现有设计。
2. 通过左侧面板的 上传 标签上传 SVG 文件。
3. 将 SVG 添加到画布中。
4. 点击右上角的 分享 → 下载。
5. 文件类型选择 JPG。
6. 设置画质参数。
7. 点击 下载。

注意：Canva 免费版在导出方面有一些限制。如需无限高分辨率 JPG 导出，可能需要 Canva Pro 订阅。

Sketch（仅限 macOS）

Mac 平台上的 Sketch 用户：

1. 在 Sketch 中打开 SVG 文件。
2. 选中要导出的画板或图层。
3. 在检查器面板中点击 Make Exportable。
4. 格式设为 JPG，选择缩放倍率。
5. 点击 Export Selected。

> 方法对比：你应该选哪种？

方法	最适合	费用	速度	质量控制	难度
在线工具 (svg2img.cc)	快速、一次性转换	免费	即时	高	入门
桌面软件	专业设计工作	免费–付费	快	很高	中等
命令行工具	批量处理与自动化	免费	快	高	进阶
编程实现	应用集成、自定义流程	免费	不定	完全可控	进阶
设计工具	设计工作流集成	免费–付费	快	高	入门

> 理解 JPG 质量设置

JPG 使用有损压缩，意味着会丢弃部分图像数据来减小文件大小。质量参数控制这个权衡：

质量参数（0–100）

• 90–100：视觉无损。适合专业用途，但文件较大。
• 70–89：优秀画质，良好的压缩率。大多数网页用途的理想区间。
• 50–69：可用于缩略图或小图。压缩伪影开始可见。
• 50 以下：明显的画质下降。仅在文件大小为绝对优先级时使用。

不同场景的 DPI 设置

• 72 DPI：标准屏幕分辨率。适合网页显示和邮件。
• 150 DPI：中等质量。适合演示文稿和基本印刷。
• 300 DPI：专业印刷质量。宣传册、名片和海报的必需标准。

SVG 转 JPG 时常见的错误是使用低质量设置加上低 DPI。由于 SVG 可以无限缩放，务必在足够高的分辨率下渲染后再应用 JPG 压缩。

> 提升转换质量的实用技巧

1. 始终设置背景色

这一点再怎么强调都不过分。SVG 文件通常有透明背景。转为 JPG 时，你必须指定背景色——否则透明区域会不可预测地默认为黑色或白色。选择与图片使用场景匹配的颜色。

2. 矢量内容使用高质量设置

SVG 的线条画、文字和锐利边缘其实是 JPG 压缩的最差情况。有损压缩会在锐利过渡处引入伪影。Logo 和插画建议使用 90+ 的质量值。对于包含照片或渐变的 SVG 内容，质量 80–85 通常就够了。

3. 选择合适的分辨率

网页用途转换为显示尺寸的 2 倍（适配 Retina/HiDPI 屏幕）。印刷用途使用 300 DPI 并按实际印刷尺寸计算。一个 4 英寸宽的 Logo 在 300 DPI 下需要渲染为 1200 像素宽。

4. 转换前嵌入字体

如果你的 SVG 包含使用了网络字体或自定义字体的文字，转换后的 JPG 可能无法正确渲染。建议在 SVG 编辑器中将文字转为路径后再转换。

5. 在浅色和深色背景上测试

由于 JPG 消除了透明度，在浅色和深色背景上都测试一下输出效果，确保你选择的背景色在实际使用场景中看起来合适。

> 常见问题

SVG 转 JPG 会损失画质吗？

会有一定损失，但取决于你的设置。SVG 是无损矢量格式，而 JPG 使用有损压缩。但通过使用高质量设置（90+）和足够的分辨率（印刷用 300 DPI，网页用显示尺寸的 2 倍），画质损失人眼几乎无法察觉。主要的问题不是压缩伪影，而是 JPG 无法表现透明度。

如何设置 SVG 转 JPG 时的背景色？

在 svg2img.cc 中，转换设置里有专门的背景色选择器。在 ImageMagick 中使用 -background white -flatten。在 JavaScript Canvas API 中，在绘制 SVG 前使用 ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, width, height);。在 Python 中，用 Pillow 将 RGBA 图像合成到纯色背景上。

印刷应该用多少 DPI？

专业印刷输出使用 300 DPI，按最终印刷品的实际尺寸计算。例如，如果图片将以 5×7 英寸印刷，SVG 应渲染为 1500×2100 像素（5×300 和 7×300）。大幅面印刷（横幅、海报）由于观看距离更远，150 DPI 通常就够了。

可以在手机上把 SVG 转为 JPG 吗？

可以。svg2img.cc 等浏览器端工具在手机浏览器上也能正常工作——打开网站、加载 SVG、转换即可。由于处理在客户端完成，无需安装任何应用。

为什么转换后的 JPG 背景是黑色的？

这是因为转换器没有正确处理 SVG 的透明度。JPG 不支持 Alpha 通道，所以透明像素默认变成黑色（有时根据渲染引擎不同变成其他颜色）。转 JPG 时一定要显式设置背景色。svg2img.cc 等工具允许你在转换前选择背景色，自动处理这个问题。

> 总结

将 SVG 转换为 JPG 并不复杂——但有一条规则永远不能忘记：一定要设置背景色，因为 JPG 不支持透明度。

无论你需要快速的一次性转换还是全自动化流程，总有一种方法适合你：

• 追求速度和简单，浏览器端工具如 svg2img.cc 是最佳选择。
• 追求专业品质，桌面软件给你最多的控制权。
• 追求自动化，命令行工具是你的好帮手。
• 追求集成，编程库提供最大的灵活性。
• 追求设计工作流，Figma 和 Canva 让你留在创意环境中。

如果你现在就需要转换一个 SVG 文件，试试 svg2img.cc 吧。完全免费，无需安装，保护隐私，所有转换都在浏览器中完成。无需注册、无需上传——拖拽、转换、下载，就这么简单。