SVG Converter
Convert SVG files or code to PNG or JPG images with configurable background color.
SVG Converter turns vector markup (or an uploaded .svg file) into a raster image in either PNG or JPG — "Convert SVG files or code to high-quality PNG or JPG images with configurable background color." The flow has two steps ("Upload" / "Convert"): click "Upload SVG File" (accepts .svg,image/svg+xml) or paste into the "SVG Code" textarea, pick "Scale" (1x–4x), choose "Format" (PNG or JPG), and press "Convert to PNG" or "Convert to JPG" (button reads "Converting..."). Success shows a green "PNG Ready!" (or "JPG Ready!") banner with a live preview.
PNG exports losslessly at quality 1.0 and keeps SVG transparency — the preview sits on a white backing panel. JPG fills the canvas with your chosen "Background" color first (color swatch or direct hex, default #ffffff), exports at quality 0.95, and the preview sits on that same color so you see the final result exactly. "Download PNG" / "Download JPG" saves the derived filename (uploads keep their basename; pasted-only content becomes converted.png / converted.jpg). Malformed input surfaces "Conversion failed. Check your SVG code." with "Try Again". Everything runs locally: SVG Blob → Image → scaled canvas → toBlob, no network, no AI.
How it works
lib/convertSvg.ts wraps the markup in Blob([svgContent], { type: 'image/svg+xml;charset=utf-8' }), loads it via object URL into an Image element, and sizes the canvas to naturalWidth*scale × naturalHeight*scale. convertSvgToPng applies ctx.scale + drawImage and exports toBlob('image/png', 1.0); convertSvgToJpg first paints ctx.fillStyle = backgroundColor over the whole canvas so transparent regions take the fill, then draws and exports toBlob('image/jpeg', 0.95). An onerror path throws "Failed to load SVG image", shown by the page as the error banner.
Redux svgConverterSlice tracks svgContent, fileName, scale, format ('png' | 'jpg'), backgroundColor, status (idle|converting|done|error), and resultBlobUrl. Switching format revokes any existing result and resets status so the banner and download extension always match the selected output. Download name = (fileName?.replace(/\.svg$/i,'') || 'converted') + '.' + format. Zod svgConverterSchema validates scale 1–4, the format enum, and the background hex. No third-party libs — pure SVG → Canvas API, fully offline.
How to use
- Click "Upload SVG File" or paste markup into the "SVG Code" textarea.
- Choose "Scale": 1x, 2x, 3x, or 4x.
- Pick "Format": PNG (transparent, lossless) or JPG (opaque, needs a background).
- For JPG, set "Background" via the color swatch or the hex field (default #ffffff).
- Click "Convert to PNG" or "Convert to JPG" (button reads "Converting..."; empty input raises toast "Please provide SVG content").
- See the green "PNG Ready!" / "JPG Ready!" banner and the preview — JPG previews sit on your chosen background color.
- Click "Download PNG" / "Download JPG" (derived filename) — toast "Downloaded!".
- On failure, read "Conversion failed. Check your SVG code." and click "Try Again"; "Clear" resets content, scale, format, background, and status.
Tips
- Scale multiplies natural size — SVGs without intrinsic width/height rely on viewBox; broken sizing usually means a missing viewBox.
- PNG keeps transparency and exports at quality 1.0 (lossless); JPG has no alpha channel, so transparent regions take the Background color.
- Quality is fixed: PNG 1.0, JPG 0.95 — no quality knob needed.
- fileName is preserved for download when uploaded from file; pasted-only content downloads as converted.png or converted.jpg.
- SVG must parse as an image — scripts inside the SVG won't run (and may block the load).
- Switching format clears the previous result, so convert again after changing options.
SVG Converter FAQ
Does conversion need the internet?
No — SVG blob → canvas → PNG/JPG runs entirely locally; there is no network and no AI.
What scale factors are available?
1x, 2x, 3x, and 4x (schema min 1, max 4).
Why did I see "Conversion failed"?
The SVG failed to load as an image — malformed markup or missing dimensions/viewBox. Check the code and try again.
Is output transparent where the SVG is transparent?
With PNG, yes — that export paints no background. JPG is opaque by definition: the canvas is filled with your Background color first.
How do I change the JPG background?
Via the color input or the direct hex field next to "Background" — it appears only when Format is set to JPG.
Can I convert JPG/PNG to SVG?
No — input must be SVG code or an SVG file (see svg-optimizer for cleaning SVGs first).
Credits
- SVG → Canvas API — Blob rasterization, lossless PNG and background-filled JPG export