Skill

svg-to-png

Convert SVG to PNG with control over dimensions, background, CSS effects like mix-blend-mode/filters. Presets for app icons, favicons, splash screens.

Javascript

Node

npx claudepluginhub sean-sunagaku/claude-code-plugin --plugin svg-to-png

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Convert SVG to high-quality PNG using sharp with automatic density calculation.

Supporting Assets

references/presets.mdscripts/convert_svg.mjs

SKILL.md

Similar Skills

lovstudio-png2svg

Converts PNG images to high-quality SVGs: removes white backgrounds with ImageMagick alpha thresholding, vectorizes using vtracer spline curves, compresses with SVGO. Ideal for creating clean vectors from raster graphics.

1 file2 tools

content-creation

icon-generation

Generates square PNG icons with transparent backgrounds for app icons, favicons, and UI using Google Gemini. Supports flat/3D/line/glyph/gradient/minimal styles, sizes 128-1024px, batch sets, reference matching.

1 file

skills

image-tools

Converts PNG/JPG to SVG using vtracer, removes watermarks, resizes, crops, and edits raster images with ImageMagick CLI commands. Useful for preparing images in docs, diagrams, or code assets.

ttal

Stats

Parent Repo Stars31

Parent Repo Forks0

Last CommitMar 3, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

SVG to PNG Conversion

Convert SVG to high-quality PNG using sharp with automatic density calculation.

Prerequisites

Ensure sharp is installed in the project (npm install sharp). Install it if missing before running the script.

Script Location

scripts/convert_svg.mjs — the main conversion script.

Single File Conversion

node scripts/convert_svg.mjs --input logo.svg --output logo.png --width 1024
node scripts/convert_svg.mjs --input logo.svg --width 512 --height 512 --background "#1a1a2e"

Arguments:

--input / -i (required): Path to input SVG
--output / -o: Output PNG path (defaults to <input-name>.png)
--width / -w: Target width in pixels
--height / -h: Target height in pixels
--background / -b: Background color (hex or named). Default: transparent

Preset Batch Conversion

Generate multiple PNGs from one SVG using built-in presets:

node scripts/convert_svg.mjs --input logo.svg --preset app-icon --output-dir ./icons
node scripts/convert_svg.mjs --input logo.svg --preset splash-portrait --output-dir ./splash

Arguments:

--preset / -p: Preset name (see below)
--output-dir / -d: Output directory (created automatically)

Available presets: app-icon, splash-portrait, splash-icon, favicon, og-image. For preset details and sizes, see references/presets.md.

Quality: How Density Works

sharp rasterises SVG at a given DPI (density). The script auto-calculates:

density = 72 * target_width / svg_viewbox_width

A 100-wide viewBox rendered at 1024px uses density 737, producing crisp output. No manual tuning needed.

Important Notes

Default is transparent: --background を指定しなければ背景は透明。SVG の背景色をそのまま活かせる。通常は背景色指定不要。
iOS app icons: 例外的に不透明必須。app-icon プリセットは自動で白背景にフォールバック。
mix-blend-mode / CSS filters: sharp (via librsvg) renders these correctly. Tested and confirmed.
Fonts: Convert text to <path> outlines in the SVG to avoid font-not-found issues on other machines.
CSS variables (var()): Not supported by librsvg. Replace with literal values before conversion.
Expo splash: Use splash-icon preset for the single image referenced by splash.image in app config.