Convert a scalable SVG into a compact JPG at any width, with a quality slider and a chosen background colour. JPG is the right pick when you need a small, universally compatible image and do not need transparency — for example a thumbnail, an email banner, or an upload to a site that rejects SVG.
How it works
The conversion is pure client-side rendering:
- Render. Your browser draws the SVG natively onto an off-screen canvas at the output width you set, deriving the height from the SVG’s aspect ratio.
- Flatten. Because JPG has no alpha channel, the canvas is first filled with your background colour (white by default), then the SVG is painted on top.
- Encode. The canvas is exported as JPEG at your chosen quality (0–100%), trading a little detail for a smaller file.
Choosing the right output width
SVG is infinitely scalable, so you can rasterise it at any resolution without the source becoming blurry. Choose the output width based on where the image will be used:
- Social media thumbnails — typically 1200×630 px for Open Graph images (Twitter, LinkedIn, Facebook previews). A 1200 px wide export covers this.
- Email banners — most email clients render at 600 px wide content areas. Export at 600 or 1200 px (for 2× retina) and set width in the HTML to 600 px.
- Web headers and hero images — 1440–1920 px covers most desktop screens. For images that only appear on mobile, 375–768 px is sufficient.
- Print — at 300 DPI, a 4-inch wide print image needs 1200 px. An A4-sized image at 300 DPI needs around 2480 px wide.
Because JPG is a fixed-resolution raster format (unlike the original SVG), export at the largest size you will realistically need. Re-rendering from the SVG later is free, but upscaling the JPG degrades quality.
JPG quality setting
The quality slider controls the JPEG compression level. This is a lossy process — lower quality means smaller file, but visible compression artefacts (blocky areas, colour banding) appear at low values. A few practical reference points:
| Quality | File size vs 100% | Visual quality |
|---|---|---|
| 95% | ~50% of max | Nearly indistinguishable |
| 85% | ~25–30% of max | Clean, good for most uses |
| 75% | ~15–20% of max | Acceptable, some artefacts on gradients |
| 60% | ~10–12% of max | Noticeable compression on complex images |
For flat-colour icons and logos, quality of 80–90% is usually invisible to the eye. For illustrations with subtle gradients or photographic SVGs, stay above 85%.
When to use PNG instead
JPG does not support transparency. If the SVG has a transparent background that must remain transparent in the output (for example an icon on a dark web page), use the SVG-to-PNG converter instead. PNG is lossless and preserves alpha.
Use JPG when: the image is for embedding in HTML with a white or coloured background, file size matters (JPG is typically 5–10× smaller than PNG for complex artwork), or the destination only accepts JPG.
Rendering happens locally in your browser — your SVG is never uploaded.