SVG 转 PNG 神器：svg2png-wasm 项目推荐

井美婵Toby

于 2024-09-09 09:20:46 发布

阅读量678

点赞数 11

本文链接：https://blog.csdn.net/gitblog_00353/article/details/142046199

版权

SVG 转 PNG 神器：svg2png-wasm 项目推荐

svg2png-wasmSVG to PNG converter JS library made with WASM + resvg (no native dependencies).项目地址:https://gitcode.com/gh_mirrors/sv/svg2png-wasm

在现代Web开发中，SVG（可缩放矢量图形）因其无损缩放和高质量渲染而广受欢迎。然而，在某些场景下，我们需要将SVG转换为PNG格式，以便更好地适应不同的应用需求。今天，我们将向您推荐一个强大的开源项目——svg2png-wasm，它能够帮助您轻松实现SVG到PNG的转换。

项目介绍

svg2png-wasm 是一个基于WebAssembly（WASM）和resvg的JavaScript库，专门用于将SVG文件转换为PNG格式。该项目不仅支持Node.js和浏览器环境，还兼容Deno，使得开发者可以在多种平台上无缝使用。

项目技术分析

核心技术

WebAssembly（WASM）：svg2png-wasm 利用WebAssembly技术，将高性能的SVG渲染引擎封装在WASM模块中，从而在JavaScript环境中实现高效的SVG到PNG转换。
resvg：作为项目的核心渲染引擎，resvg 是一个高性能的SVG渲染库，支持广泛的SVG特性，确保转换后的PNG图像质量。

技术栈

JavaScript/TypeScript：项目提供JavaScript和TypeScript的API，方便开发者集成到现有项目中。
Node.js：支持在Node.js环境中使用，适用于服务器端SVG到PNG的转换需求。
浏览器：通过简单的脚本标签引入，即可在浏览器中使用，适用于前端开发场景。
Deno：兼容Deno环境，提供ES模块的导入方式，方便Deno用户使用。

项目及技术应用场景

应用场景

Web应用：在前端开发中，有时需要将用户上传的SVG文件转换为PNG格式，以便在网页中展示或下载。svg2png-wasm 可以轻松集成到您的Web应用中，实现这一功能。
服务器端处理：在服务器端，您可能需要将SVG文件转换为PNG格式，以便存储或进一步处理。svg2png-wasm 在Node.js环境中的支持，使得这一过程变得简单高效。
自动化工具：在自动化工具或脚本中，您可以使用svg2png-wasm 批量处理SVG文件，生成对应的PNG图像。

技术优势

高性能：基于WebAssembly的实现，确保了转换过程的高效性，即使在处理复杂的SVG文件时也能保持良好的性能。
跨平台：支持Node.js、浏览器和Deno，使得开发者可以在不同的环境中灵活使用。
易用性：提供简洁的API，开发者只需几行代码即可完成SVG到PNG的转换。

项目特点

主要特点

高效转换：利用WebAssembly和resvg的高性能渲染引擎，确保SVG到PNG的转换过程快速且高质量。
多环境支持：无论是Node.js、浏览器还是Deno，svg2png-wasm 都能提供一致的使用体验。
灵活配置：支持多种转换选项，如缩放比例、背景颜色、字体设置等，满足不同场景的需求。
开源免费：基于MIT许可证，开发者可以自由使用、修改和分发该项目。

使用示例

Node.js 示例

import { svg2png, initialize } from 'svg2png-wasm';
import { readFileSync, writeFileSync } from 'fs';

await initialize(
  readFileSync('./node_modules/svg2png-wasm/svg2png_wasm_bg.wasm'),
);

const png = await svg2png(
  '<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> ... </svg>',
  {
    scale: 2,
    width: 400,
    height: 400,
    backgroundColor: 'white',
    fonts: [
      readFileSync('./Roboto.ttf'),
    ],
    defaultFontFamily: {
      sansSerif: 'Roboto',
    },
  },
);
writeFileSync('./output.png', png);

浏览器示例

<script src="https://unpkg.com/svg2png-wasm"></script>
<script>
  await svg2pngWasm.initialize(fetch('https://unpkg.com/svg2png-wasm/svg2png_wasm_bg.wasm'))
  const font = await fetch('./Roboto.ttf').then((res) => res.arrayBuffer());
  const png = await svg2pngWasm.svg2png(
    '<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> ... </svg>',
  );
  document.getElementById('output').src = URL.createObjectURL(
    new Blob([png], { type: 'image/png' }),
  );
</script>