Converting SVG to JPG renders the vector artwork into a fixed grid of pixels, then compresses that grid using JPEG's lossy algorithm. Transparent areas become white, because JPEG has no alpha channel. Everything else about what changes during that process is a choice you can control.
Vector to raster
An SVG is a set of instructions: paths, shapes, fills, strokes. A JPEG is a grid of pixels. The conversion is rasterization: the browser draws the SVG on a canvas at a specific pixel size, then encodes that canvas as a JPEG file.
This is why you cannot simply rename an SVG to .jpg. The two formats describe images in fundamentally different ways. Rasterization is a one-way operation: you can always go from SVG to JPEG, but you cannot recover the original vector data from a JPEG.
Transparency becomes white
JPEG does not support transparency. If your SVG has transparent areas, those areas become solid white in the JPEG output. This happens at the canvas level, before compression: the renderer fills the canvas with a white background, then draws the SVG on top.
If white is not the right background for your use case, use PNG instead. PNG supports transparency and is the right format when the background matters. Use JPEG when you know the image will always sit on a white or light background, or when file size is a higher priority than transparency.
Quality and compression
JPEG compression is lossy. It divides the image into blocks and discards information the eye is least likely to notice. A lower quality setting discards more, producing a smaller file but introducing visible artifacts: blocky patterns around sharp edges and colour banding in flat areas.
Four quality settings you will commonly see (70%, 80%, 90%, 100%):
- 70%: smallest file; noticeable artifacts on shapes with sharp edges or solid fills. JPEG's compression was designed for photographs, where colour varies gradually. Geometric artwork from an SVG breaks that assumption, so artifacts appear more visibly at lower quality than they would on a photo.
- 80%: reasonable for most screen use.
- 90%: good quality with moderate file size reduction.
- 100%: no quantization reduction applied. The DCT transform still runs, so JPEG at 100% is technically still lossy, but artifacts are not visible under normal viewing conditions.
For SVG-derived content with solid colour fills and crisp geometric edges, the difference between quality settings is more visible than it would be for a photograph. If you see blocky artifacts or colour fringing, go higher.
Scale and resolution
The scale setting controls how many pixels to use when rasterizing. SVG Lab offers 1x, 2x, and 4x:
- 1x: one output pixel per CSS pixel of the SVG's stated dimensions.
- 2x: double the width and height, four times the pixel count.
- 4x: four times the width and height, sixteen times the pixel count.
For screen use, 2x is a reasonable default because it covers high density displays without an unnecessarily large file. 4x makes sense for print, for images that will be displayed much larger than the SVG's native dimensions, or when the reader is expected to zoom in.
When to use JPG vs PNG vs SVG
- Keep SVG for icons, logos, and illustrations that need to scale cleanly or will be embedded directly in HTML.
- Use PNG when you need a raster file and the image has transparency or hard geometric edges. PNG is lossless; solid colours and crisp shapes compress without artifacts.
- Use JPG when you need a raster file, transparency is not required, and file size is a concern. JPG handles photographs and complex images well. For flat geometric artwork, PNG is a better choice because JPEG's compression algorithm was not designed for that kind of content.
Quick answers
Why is my JPG white where the SVG was transparent?
JPEG does not support transparency. Any transparent area is filled with white when the SVG is drawn onto the canvas. Use PNG if you need to preserve transparency.
What quality setting should I use?
80% is a reasonable default for most screen use. Go higher if you see visible artifacts, especially around sharp edges or solid colour fills. Go lower only if file size is a hard constraint.
What scale should I use?
2x is a reasonable default for screen use. Use 4x for print or when the image will be displayed much larger than its native SVG dimensions.
Can I convert back from JPG to SVG?
Not directly. The JPEG contains only pixels, not the original vector paths. Tracing a JPEG produces a new SVG as a reconstruction, not a round-trip conversion.
Top comments (0)