A bash script to convert SVG files to high-resolution PNG images using headless Chrome.
- ✅ High-Fidelity Conversion: Uses Chrome's rendering engine for accurate SVG rendering
- ✅ Automatic viewBox Addition: Automatically adds
viewBoxattribute if missing - ✅ Batch Processing: Convert multiple SVG files at once
- ✅ Flexible Scaling: Control output resolution with scale factor
- ✅ Safe Operation: Creates backups before modifying source files
- ✅ Colorful Output: Easy-to-read colored log messages
Standard SVG conversion tools like rsvg-convert use librsvg, which has limited SVG feature support. This script uses Chrome's full-featured rendering engine (via Puppeteer) to ensure:
- Complete SVG 1.1 specification support
- Accurate rendering of complex filters and effects
- Proper text rendering with custom fonts
- GPU-accelerated rendering
- Same quality as viewing in Chrome/Firefox browsers
- bash (version 4.0+)
- Node.js (version 12.20.0+)
- npx (comes with Node.js)
- sed (GNU sed recommended)
# Install Node.js via Homebrew
brew install node# Install Node.js
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs# Use nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install --lts# Download the script
curl -O https://raw.githubusercontent.com/your-repo/svg-to-png/main/svg-to-png.sh
chmod +x svg-to-png.sh
# Run locally
./svg-to-png.sh input.svg# Install to /usr/local/bin
sudo curl -o /usr/local/bin/svg-to-png https://raw.githubusercontent.com/your-repo/svg-to-png/main/svg-to-png.sh
sudo chmod +x /usr/local/bin/svg-to-png
# Run from anywhere
svg-to-png input.svg# Convert with default settings (scale=4)
svg-to-png input.svg
# Specify scale factor
svg-to-png -s 2 input.svg
svg-to-png --scale 3 input.svg# Convert multiple files
svg-to-png *.svg
# Convert with custom scale
svg-to-png -s 3 file1.svg file2.svg file3.svg# Save to specific directory
svg-to-png -o ./output input.svg
# Batch convert to directory
svg-to-png -s 4 -o ./high-res *.svg# Enable detailed logging
svg-to-png -v -s 2 input.svg
svg-to-png --verbose --scale 3 *.svg| Option | Short | Description | Default |
|---|---|---|---|
--scale |
-s |
Scale factor for output resolution | 4 |
--output |
-o |
Output directory path | Same as source |
--verbose |
-v |
Enable verbose logging | Disabled |
--help |
-h |
Display help message | - |
| Scale | Use Case | Quality | File Size |
|---|---|---|---|
| 1-2 | Web display | Standard | Small |
| 2-3 | General printing | High | Medium |
| 3-4 | High-quality printing | Very High | Large |
| 4-6 | Posters/Large format | Professional | Very Large |
For an SVG with dimensions 1684px × 1300.48px:
- Scale 1: 1684 × 1300 pixels
- Scale 2: 3368 × 2601 pixels
- Scale 3: 5052 × 3901 pixels
- Scale 4: 6736 × 5202 pixels
svg-to-png -s 4 logo.svgOutput:
[INFO] Converting: logo.svg (scale=4)
[INFO] Conversion completed: logo.png
[INFO] Processing completed: 1 succeeded, 0 failed
svg-to-png -s 3 -o ./png-output *.svgOutput:
[INFO] Converting: image1.svg (scale=3)
[INFO] Conversion completed: ./png-output/image1.png
[INFO] Converting: image2.svg (scale=3)
[INFO] Conversion completed: ./png-output/image2.png
[INFO] Processing completed: 2 succeeded, 0 failed
svg-to-png -v -s 2 diagram.svgOutput:
[DEBUG] Checking dependencies...
[DEBUG] Dependency check completed
[INFO] Converting: diagram.svg (scale=2)
[DEBUG] Checking viewBox: diagram.svg
[DEBUG] viewBox added
[DEBUG] Executing command: CONVERT_SVG_LAUNCH_OPTIONS=... npx convert-svg-to-png-cli ...
[INFO] Conversion completed: diagram.png
[INFO] Processing completed: 1 succeeded, 0 failed
- Dependency Check: Verifies that
npxandsedare available - viewBox Addition: Automatically adds
viewBoxattribute to SVG if missing - Chrome Rendering: Uses headless Chrome (via
convert-svg-to-png) to render SVG - PNG Export: Captures screenshot at specified scale factor
- Output: Saves high-resolution PNG file
The script modifies SVG files to ensure proper scaling:
Before:
<svg width="1684px" height="1300.48px" xmlns="...">After:
<svg viewBox="0 0 1684 1300.48" width="1684px" height="1300.48px" xmlns="...">This allows the --scale option to work correctly while maintaining compatibility.
Solution: Install Node.js
# macOS
brew install node
# Ubuntu/Debian
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejsSolution: The script automatically adds viewBox to fix this. If the error persists, check your SVG file for syntax errors.
Solution: Increase the scale factor
# Try higher scale values
svg-to-png -s 6 input.svgSolution: Increase Node.js memory limit
NODE_OPTIONS='--max-old-space-size=4096' svg-to-png -s 4 large-file.svgThe first run will download Chromium (~170-280MB depending on OS). If download fails:
# Manually install convert-svg-to-png
npm install -g convert-svg-to-png
# Then run the script
svg-to-png input.svgModern web browsers have the most complete SVG implementations:
- Chromium (Blink): Complete SVG DOM + Skia rendering engine
- Firefox (Gecko): Complete SVG DOM + Cairo rendering engine
- librsvg: Limited SVG support + Cairo rendering engine
The rendering quality hierarchy:
Chrome/Firefox > Inkscape > rsvg-convert > Basic SVG viewers
SVG Input
↓
[svg-to-png script]
├─ Add viewBox (sed)
└─ Calculate dimensions
↓
[convert-svg-to-png (Puppeteer)]
├─ Launch Headless Chrome
├─ Render SVG at scale
└─ Capture screenshot
↓
High-Resolution PNG Output
The script sets --no-sandbox by default for compatibility. To customize:
# Edit the script and modify this line:
CONVERT_SVG_LAUNCH_OPTIONS='{"args":["--no-sandbox","--disable-gpu"]}'# Convert and optimize
svg-to-png -s 4 input.svg && optipng input.png
# Batch convert and rename
for f in *.svg; do
svg-to-png -s 3 "$f"
mv "${f%.svg}.png" "${f%.svg}-high-res.png"
done
# Convert specific files from a list
cat files.txt | xargs svg-to-png -s 2 -o ./outputMIT License - feel free to use this script in your projects.
- convert-svg-to-png - The underlying conversion tool
- Puppeteer - Headless Chrome automation
- Chromium/Blink team - For the excellent SVG rendering engine
- svg-to-img - Node.js library
- Inkscape CLI - Desktop application with CLI
- resvg - Rust-based SVG renderer
If you encounter any issues or have questions, please:
- Check the Troubleshooting section
- Review convert-svg-to-png documentation
- Open an issue on GitHub