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 step 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 SVG and JPEG are not interchangeable formats and an SVG cannot simply be renamed to a .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.
The transparency problem
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, the answer is to not use JPEG for that image. 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 preserving transparency.
Quality and compression
JPEG compression is lossy. It divides the image into blocks and discards information that the human 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 areas that should be smooth.
SVG Lab's JPG export offers four quality settings:
- 70%: smallest file; noticeable artifacts on shapes with sharp edges or solid fills. JPEG's compression algorithm was designed for photographs, where colour varies gradually. Geometric artwork from an SVG breaks that assumption, so artifacts show up more visibly at lower quality than they would on a photo.
- 80%: a reasonable middle point for most screen use.
- 90%: good quality with a moderate file size reduction.
- 100%: no quantization reduction applied; largest file. JPEG at 100% is still technically lossy (the DCT transform still runs), but any 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, try a higher quality setting.
Scale and resolution
The scale setting controls how many pixels to use when rasterizing the SVG. A higher scale means more pixels and a sharper result, at the cost of a larger file.
SVG Lab offers three scale options:
- 1x: one output pixel per CSS pixel of the SVG's stated
widthandheight. - 2x: double the width and height, four times the pixel count.
- 4x: four times the width and height, sixteen times the pixel count.
For images destined for screens, 2x is a reasonable default because it covers high density displays without producing an unnecessarily large file. 4x is useful for print, for images that will be displayed much larger than the SVG's native dimensions, or for cases where the reader is expected to zoom in.
When to use JPG vs PNG vs SVG
The format choice depends on the destination and the image content:
- Keep SVG for icons, logos, and illustrations that need to scale cleanly or will be embedded directly in HTML. Converting to anything else trades away the one thing SVG does that raster formats cannot.
- Use PNG when you need a raster file and the image has transparency or hard geometric edges. PNG is lossless, so 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 works well for complex images and photographs. It is a worse choice for flat geometric artwork than PNG, because the compression algorithm was not designed for that kind of content.
What the tool does
SVG Lab's SVG to JPG tool renders the SVG on a canvas in the browser and encodes the result as a JPEG file. You choose the quality and the scale, then download. No file is uploaded to a server; the conversion runs locally in your browser.
If you want to edit the SVG before converting, you can open it in SVG Lab's editor first.
FAQ
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 (90-100%) if you see visible artifacts, especially around sharp edges or solid colour fills. Go lower (70%) only if file size is a hard constraint and you have checked that the output is acceptable.
What scale should I use?
2x is a reasonable default for screen use. Use 4x if the image will be displayed much larger than its native SVG dimensions or if you are targeting print.
Will the JPG look the same as the SVG?
Colours and shapes should look the same. Transparent areas become white. At lower quality settings, you may see visible artifacts around sharp edges or in flat-colour areas, because JPEG compression is not well suited to geometric vector artwork.
Can I convert back from JPG to SVG?
Not automatically. The JPEG contains only pixels, not the original vector paths. You can trace a JPEG to produce a new SVG, but that is a reconstruction, not a round-trip conversion.