Crates.io | svg2png-wasm-rs |
lib.rs | svg2png-wasm-rs |
version | 0.1.2 |
created_at | 2025-06-20 17:08:55.676027+00 |
updated_at | 2025-07-07 01:49:03.596557+00 |
description | A WASM-powered library to convert SVG markup into PNG images |
homepage | https://github.com/don-hicks/svg2png-wasm-rs |
repository | https://github.com/don-hicks/svg2png-wasm-rs |
max_upload_size | |
id | 1719866 |
size | 31,710 |
Warning: This project is a work-in-progress and is not yet ready for production use. The functionality is not fully implemented, and breaking changes may occur in future versions. Please use with caution.
A Rust-based WebAssembly (WASM) library that converts SVG (Scalable Vector Graphics) to PNG (Portable Network Graphics). This library is designed for use in serverless environments and is optimized for both client-side (browser) and backend (serverless function) usage.
npm install svg2png-wasm-rs
Repository: https://www.npmjs.com/package/svg2png-wasm-rs
cargo add svg2png-wasm-rs
Repository: https://github.com/don-hicks/svg2png-wasm-rs
Import and use the library in your JavaScript code:
import init, { convert_svg_to_png, convert_svg_to_png_with_scale, get_svg_dimensions, svg_to_png } from 'svg2png-wasm-rs';
// Initialize the WASM module
await init();
const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="80" fill="blue" stroke="black" stroke-width="2"/>
<text x="100" y="110" text-anchor="middle" fill="white" font-size="20">Hello SVG!</text>
</svg>`;
// Simple conversion (uses original SVG dimensions)
const pngBytes = svg_to_png(svgContent);
// Conversion with custom dimensions
const pngBytesCustom = convert_svg_to_png(svgContent, 400, 300);
// Conversion with scaling
const pngBytesScaled = convert_svg_to_png_with_scale(svgContent, 2.0);
// Get SVG dimensions
const dimensions = get_svg_dimensions(svgContent);
console.log(`SVG dimensions: ${dimensions.width}x${dimensions.height}`);
// Display the PNG
const blob = new Blob([pngBytes], { type: 'image/png' });
const url = URL.createObjectURL(blob);
document.getElementById('output').src = url;
For Node.js or serverless functions, use the Node.js target build:
import { convert_svg_to_png, convert_svg_to_png_with_scale, get_svg_dimensions } from 'svg2png-wasm-rs';
// SvelteKit API route example
export async function POST({ request }) {
try {
const { svg, width, height, scale } = await request.json();
let pngBytes;
if (scale && scale !== 1.0) {
pngBytes = convert_svg_to_png_with_scale(svg, scale);
} else {
pngBytes = convert_svg_to_png(svg, width || null, height || null);
}
return new Response(pngBytes, {
headers: {
'Content-Type': 'image/png',
'Cache-Control': 'public, max-age=31536000',
},
});
} catch (error) {
console.error('Conversion failed:', error);
return new Response(`Conversion failed: ${error.message}`, { status: 500 });
}
}
svg_to_png(svg_content: string): Uint8Array
- Simple conversion using original SVG dimensionsconvert_svg_to_png(svg_content: string, width?: number, height?: number): Uint8Array
- Convert with optional custom dimensionsconvert_svg_to_png_with_scale(svg_content: string, scale: number): Uint8Array
- Convert with scaling factorget_svg_dimensions(svg_content: string): {width: number, height: number}
- Get SVG dimensionscargo install wasm-pack
Clone the repository:
git clone https://github.com/don-hicks/svg2png-wasm-rs.git
cd svg2png-wasm-rs
Build the project for different targets:
# Build for web (ES modules)
wasm-pack build --target web --out-dir pkg --release
# Build for bundler (webpack, rollup, etc.)
wasm-pack build --target bundler --out-dir pkg-bundler --release
# Build for Node.js
wasm-pack build --target nodejs --out-dir pkg-node --release
# Or build all targets using the build script
./build.sh
The WASM packages will be generated in:
pkg/
(web target)pkg-bundler/
(bundler target)pkg-node/
(Node.js target)Run the test suite:
wasm-pack test --headless --chrome
Test with the example:
npm run build
npm run serve
# Visit http://localhost:8000/examples/
The project includes examples in the examples/
directory:
examples/index.html
- Complete browser example with file upload and conversionexamples/sveltekit-example.js
- SvelteKit API route for serverless deploymentGitHub: https://github.com/don-hicks/svg2png-wasm-rs
We welcome contributions to svg2png-wasm-rs! To get started:
git clone https://github.com/YOUR-USERNAME/svg2png-wasm-rs.git
cargo fmt
and cargo clippy
before submittingThis project is licensed under the MIT OR Apache-2.0 License - see the LICENSE file for details.