SVG转PNG转换器 - SVG转PNG/JPEG 在线工具

将SVG文件或代码转换为高质量PNG/JPEG图像，支持自定义尺寸、缩放和背景。100%客户端处理，无需上传。

SVG输入

将SVG文件拖放到此处或点击浏览

或在下方粘贴SVG代码

上传或粘贴SVG以查看预览

SVG文件完全在您的浏览器中处理。不会向任何服务器发送数据。

常见问题

什么是SVG转PNG转换器，为什么需要它？

SVG转PNG转换器将SVG（可缩放矢量图形）文件——基于XML的矢量图像——转换为由像素组成的PNG（便携式网络图形）光栅图像。虽然SVG因其可扩展性和小文件大小而非常适合网络使用，但许多平台和应用程序需要光栅图像：不渲染SVG的电子邮件客户端、仅接受PNG/JPEG上传的社交媒体平台、演示软件、PDF生成器和不支持SVG的旧版应用程序。

如何使用此SVG转PNG转换器？

有两种方式提供SVG输入：(1) 将SVG文件拖放到上传区域，或点击浏览文件。(2) 直接在文本区域粘贴SVG代码。SVG加载后，工具会自动检测其尺寸并显示预览。使用设置面板配置输出：选择缩放比例（1x、2x、3x、4x）、背景色和输出格式（PNG/JPEG）。点击下载保存图像文件。

我的SVG数据安全吗？文件会上传到服务器吗？

您的SVG数据100%安全，永远不会离开您的浏览器。所有转换都使用浏览器内置的HTML5 Canvas API在客户端执行。SVG数据不会传输到任何服务器，文件不会存储在任何地方，也不会进行任何跟踪。

PNG和JPEG输出有什么区别？

PNG支持完全透明度（alpha通道）、无损压缩，非常适合图标、标志、UI元素。JPEG使用有损压缩以实现更小的文件大小，但不支持透明度。需要透明度或像素完美质量时使用PNG，需要更小文件大小且不需要透明度时使用JPEG。

缩放比例（1x、2x、3x、4x）是什么意思？

缩放比例将SVG的固有尺寸（由width/height属性或viewBox定义）乘以产生输出像素尺寸。例如，如果SVG的viewBox为'0 0 24 24'：1x产生24x24 PNG，2x产生48x48 PNG，3x产生72x72 PNG，4x产生96x96 PNG。这是移动和Web开发中针对不同屏幕密度的标准做法。

可以使用透明背景转换SVG吗？

可以。PNG格式完全支持透明度（alpha通道）。当选择透明作为背景色（默认设置）时，SVG中的所有透明区域都会保留在PNG输出中。预览使用棋盘格图案来可视化透明区域。请注意，JPEG格式不支持透明度。

为什么转换后的PNG看起来模糊或像素化？

如果输出看起来模糊，输出尺寸可能对SVG的细节级别来说太小了。尝试将缩放比例提高到2x或3x，或手动输入更大的自定义尺寸。SVG是与分辨率无关的矢量图形，可以无质量损失地导出为任何大小。

最大尺寸和文件大小限制是什么？

最大SVG输入文件大小为10MB。最大输出尺寸为8192x8192像素，这是大多数浏览器Canvas实现所施加的实际限制。

代码示例

// SVG to PNG conversion using Canvas API (Browser)
function svgToPng(svgString, options = {}) {
  const {
    width = null,
    height = null,
    scale = 1,
    backgroundColor = null,
    format = 'png',
    quality = 0.92,
  } = options;

  return new Promise((resolve, reject) => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(svgString, 'image/svg+xml');
    const svg = doc.documentElement;

    let svgWidth = parseFloat(svg.getAttribute('width')) || 0;
    let svgHeight = parseFloat(svg.getAttribute('height')) || 0;

    if (!svgWidth || !svgHeight) {
      const viewBox = svg.getAttribute('viewBox');
      if (viewBox) {
        const [, , vbW, vbH] = viewBox.split(/[\s,]+/).map(Number);
        svgWidth = vbW;
        svgHeight = vbH;
      }
    }

    const outWidth = width || svgWidth * scale;
    const outHeight = height || svgHeight * scale;
    const canvas = document.createElement('canvas');
    canvas.width = outWidth;
    canvas.height = outHeight;
    const ctx = canvas.getContext('2d');

    if (backgroundColor) {
      ctx.fillStyle = backgroundColor;
      ctx.fillRect(0, 0, outWidth, outHeight);
    }

    const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const img = new Image();

    img.onload = () => {
      ctx.drawImage(img, 0, 0, outWidth, outHeight);
      URL.revokeObjectURL(url);
      canvas.toBlob(
        (resultBlob) => {
          resolve({
            blob: resultBlob,
            dataUrl: canvas.toDataURL(
              format === 'jpeg' ? 'image/jpeg' : 'image/png', quality
            ),
            width: outWidth,
            height: outHeight,
            size: resultBlob.size,
          });
        },
        format === 'jpeg' ? 'image/jpeg' : 'image/png',
        quality
      );
    };
    img.onerror = () => reject(new Error('Failed to load SVG'));
    img.src = url;
  });
}

// Usage
const svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#3b82f6"/></svg>';
svgToPng(svg, { scale: 2 }).then(r => console.log(`${r.width}x${r.height}, ${r.size} bytes`));