How to Convert SVG to JPG (4 Free Methods)

SVG files are vector graphics — compact, infinitely scalable, and perfect for logos, icons, and web graphics. But not every system accepts SVG. Email clients strip them. Upload forms reject them. Social media platforms ignore them. When you need a universally compatible image, JPG is the format that works everywhere.

Converting SVG to JPG involves two things: rasterizing the vector paths into pixels, and flattening the image onto a solid background. That second part matters more than you might expect. SVG supports transparency; JPG does not. If your SVG has a transparent background, the converter has to fill it with something — usually white, sometimes black, occasionally garbage pixels. Controlling that background color is the difference between a clean export and a ruined image.

Here are four free methods to convert SVG to JPG, from fastest to most powerful.

Why Convert SVG to JPG?

SVG is the better format for most web graphics. So why convert to JPG at all? Because the world outside your browser is not always SVG-friendly:

• Email. Most email clients (Gmail, Outlook, Apple Mail) do not render inline SVG or SVG attachments. JPG embeds reliably in every email client.
• Upload restrictions. Job application portals, government forms, and many CMS platforms accept JPG and PNG only. Try uploading an SVG to LinkedIn's banner editor — it won't work.
• Social media. Facebook, Instagram, and Twitter/X strip SVG uploads. You need a raster format.
• Print services. Budget print shops and on-demand services (stickers, business cards) often require JPG or PDF, not SVG.
• Compatibility with older software. Presentation tools, document editors, and legacy systems handle JPG universally. SVG support is inconsistent.
• File previews. Some operating systems and file managers do not generate thumbnails for SVG files. JPG gets a preview everywhere.

If your SVG is a logo or icon heading to one of these destinations, JPG conversion gets it there. For a deep dive into the JPG format itself — compression modes, chroma subsampling, and quality tradeoffs — see our JPEG format guide.

Method 1 — Pixotter Online Converter

Pixotter's SVG to JPG converter runs entirely in your browser. Your image never leaves your machine — all processing happens client-side via WebAssembly. No upload, no server, no privacy concerns.

How It Works

1. Open the SVG to JPG converter.
2. Drop your SVG file onto the drop zone (or click to browse).
3. Select JPG as the output format if not already selected.
4. Adjust quality and background color if needed.
5. Click convert and download your JPG.

That's it. The entire process takes a few seconds even for complex SVGs with embedded fonts and gradients.

Pros: No install, no upload, no account. Privacy by design — your files stay on your device. Handles background color automatically. Cons: One file at a time in the UI. For batch work, use the CLI methods below.

For more format conversion options, see the full converter hub.

Method 2 — Browser DevTools (Canvas API Technique)

Every modern browser can render SVG natively. You can exploit this to convert SVG to JPG at any resolution using the Canvas API — no software to install, no files uploaded anywhere.

Step-by-Step

1. Open your SVG file in the browser (drag it onto an empty tab, or File > Open).
2. Open DevTools (F12 or Ctrl+Shift+I / Cmd+Option+I).
3. Go to the Console tab and paste this script:

// Configure output
const WIDTH = 2000;
const HEIGHT = 2000;
const QUALITY = 0.92;          // 0.0–1.0 (0.92 is high quality)
const BG_COLOR = '#ffffff';    // Background color (SVG transparency → this color)

const svg = document.querySelector('svg');
const svgData = new XMLSerializer().serializeToString(svg);
const canvas = document.createElement('canvas');
canvas.width = WIDTH;
canvas.height = HEIGHT;
const ctx = canvas.getContext('2d');

// Fill background (JPG has no transparency)
ctx.fillStyle = BG_COLOR;
ctx.fillRect(0, 0, WIDTH, HEIGHT);

const img = new Image();
img.onload = () => {
    ctx.drawImage(img, 0, 0, WIDTH, HEIGHT);
    const a = document.createElement('a');
    a.download = 'output.jpg';
    a.href = canvas.toDataURL('image/jpeg', QUALITY);
    a.click();
};
img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));

4. Press Enter. Your browser downloads the JPG immediately.

The critical line is ctx.fillRect — it paints the background color before drawing the SVG. Without it, transparent areas render as black in the JPG output because an uninitialized canvas has no background data and toDataURL('image/jpeg') fills empty pixels with black.

Adjusting the Output

• Change dimensions: Edit WIDTH and HEIGHT. To preserve aspect ratio, read the SVG's viewBox attribute and calculate one dimension from the other.
• Change quality: The QUALITY parameter (0.0 to 1.0) controls JPG compression. 0.92 is a good default. Below 0.8, compression artifacts become visible on text and sharp edges. Above 0.95, file size increases with negligible visual improvement.
• Change background color: Set BG_COLOR to any CSS color — '#f0f0f0', 'rgb(30, 30, 30)', 'cornflowerblue'.

Pros: Works on any machine with a browser. Full control over dimensions, quality, and background. Zero dependencies. Cons: Manual process, no batch support. SVGs that reference external fonts or linked images may render incomplete — inline those resources first, or use Inkscape.

Method 3 — Inkscape Export (GPL-2.0)

Inkscape 1.4 is the most capable free SVG editor available. It handles complex SVGs — CSS styles, embedded fonts, filters, clipping masks — better than any other free tool. Inkscape is licensed under GPL-2.0 and runs on Windows, macOS, and Linux.

Inkscape does not export directly to JPG from its GUI, but the command line supports it cleanly.

Command-Line Export

# Basic SVG to JPG conversion at 300 DPI
inkscape input.svg --export-type=jpg --export-dpi=300 --export-filename=output.jpg

# With a specific background color (default is white)
inkscape input.svg --export-type=jpg --export-dpi=300 \
    --export-background='#ffffff' --export-filename=output.jpg

# Export at exact pixel dimensions
inkscape input.svg --export-type=jpg --export-width=2000 --export-height=2000 \
    --export-filename=output.jpg

# Batch convert all SVGs in a directory
for f in *.svg; do
    inkscape "$f" --export-type=jpg --export-dpi=300 \
        --export-background='#ffffff' \
        --export-filename="${f%.svg}.jpg"
done

The --export-background flag is essential. Without it, Inkscape uses white by default for JPG exports, which is usually correct. But if your SVG has colored regions that blend into white, you might want a different background — set it explicitly.

GUI Workflow (via PNG Intermediate)

If you prefer the Inkscape GUI:

1. Open the SVG in Inkscape 1.4.
2. Set the document background: File > Document Properties > Background color — set it to white (or your preferred color) with full opacity.
3. Export as PNG: File > Export PNG Image (Shift+Ctrl+E). Set your desired DPI and export.
4. Convert the PNG to JPG using Pixotter, ImageMagick, or any image viewer's "Save As" function.

This two-step process gives you maximum control over both the rasterization (step 3) and the JPG compression (step 4).

Pros: Best SVG rendering engine among free tools. Handles filters, fonts, gradients, masks. Batch support via CLI. Cons: Requires installation (~100 MB). Slower than lightweight tools for simple conversions. GUI does not export JPG directly.

Method 4 — ImageMagick CLI (Apache 2.0)

ImageMagick 7.1 is the command-line workhorse for image conversion. It delegates SVG rendering to its built-in MSVG renderer (or librsvg if installed), then writes the output in any format you choose — including JPG.

Install

On Ubuntu/Debian:

sudo apt install imagemagick

On macOS with Homebrew:

brew install imagemagick

Verify the version:

magick --version
# ImageMagick 7.1.x

Convert SVG to JPG

# Basic conversion (white background, default quality)
magick input.svg -background white -flatten output.jpg

# Set JPG quality (0–100, higher = better quality, larger file)
magick input.svg -background white -flatten -quality 92 output.jpg

# Render at 300 DPI before converting
magick -density 300 input.svg -background white -flatten output.jpg

# Specify output dimensions
magick -density 300 input.svg -resize 2000x2000 -background white -flatten output.jpg

# Custom background color
magick input.svg -background '#1a1a2e' -flatten -quality 90 output.jpg

The -background white -flatten flags are non-negotiable for SVG-to-JPG conversion. Here is why:

• -background white sets the canvas color for transparent regions.
• -flatten composites all layers onto that background, removing the alpha channel.

Without -flatten, ImageMagick may produce a JPG with black where transparent areas were, or produce unpredictable results depending on the SVG's layer structure.

Batch Conversion

# Convert all SVGs in the current directory
for f in *.svg; do
    magick -density 300 "$f" -background white -flatten -quality 92 "${f%.svg}.jpg"
done

Improving SVG Rendering Quality

ImageMagick's built-in SVG renderer (MSVG) struggles with complex SVGs — CSS styles, advanced filters, and embedded fonts often render incorrectly. For better results, install librsvg:

# Ubuntu/Debian
sudo apt install librsvg2-bin

# macOS
brew install librsvg

Then tell ImageMagick to use it:

magick -define svg:delegate=rsvg input.svg -background white -flatten output.jpg

Pros: Fast, scriptable, available on all platforms. Fine-grained control over quality, density, and background. Cons: Built-in SVG renderer is limited — install librsvg for anything beyond simple icons. No GUI.

SVG vs JPG — Key Differences

Before converting, make sure JPG is the right target format. Sometimes PNG is a better choice — especially when you need transparency. For a broader comparison of vector vs raster tradeoffs, see SVG vs PNG: When to Use Each Format.

The rule of thumb: Use SVG for anything you created as a vector graphic. Convert to JPG only when the destination demands it — email, upload forms, social media, or print services that reject SVG. If the destination supports PNG and you need transparency, convert to PNG instead.

Controlling JPG Quality and Background Color

These two settings make or break your SVG-to-JPG conversion. Get them wrong and your output is either a bloated file or a ruined image.

Background Color

SVG transparency does not exist in JPG. Every transparent pixel must become a solid color. If you do not specify one, each tool has a different default:

If your SVG is a dark logo on a transparent background, converting with a white background looks perfect. If it is a white logo on a transparent background, you need a dark background — otherwise the logo vanishes into the white.

Best practice: Always set the background color explicitly. Do not rely on defaults. If the SVG will sit on a webpage with a dark header, match that header color in the export.

JPG Quality

JPG quality is a sliding scale from 0 (maximum compression, terrible quality) to 100 (minimal compression, near-lossless). The relationship is not linear — the biggest file size savings happen between 100 and 90, while visual quality barely changes.

For SVG-to-JPG conversion, 92 is the sweet spot. SVGs typically contain sharp edges, clean lines, and text — exactly the content where JPG compression artifacts are most visible. Going below 85 on an SVG-sourced JPG introduces ringing around edges and smudged text.

After conversion, you can further compress your JPG to squeeze out extra bytes without visible quality loss.

Resolution and Dimensions

SVGs have no inherent pixel size — they scale to any resolution. When converting to JPG, you must choose a target size:

If you are unsure, export large (2000px+ on the longest side at quality 92). You can always scale a large JPG down without quality loss. Scaling a small JPG up is not an option. For more on how JPG differs from other formats, check our format guide.

FAQ

Why can't I just rename .svg to .jpg?

SVG is a text-based XML document describing vector paths. JPG is a binary format storing compressed pixel data. Renaming the file extension changes the label, not the contents. The file will fail to open in most image viewers, or display as a broken image. You need to rasterize the vector data into pixels and encode it as JPG — that is what conversion tools do.

Why does my converted JPG have a black background?

Your SVG has transparent areas, and the conversion tool filled them with black instead of white. This is common with the Canvas API method (empty canvas pixels are black) and with ImageMagick if you forget the -flatten flag. The fix: explicitly set a background color before conversion. Every method in this guide shows how.

What JPG quality setting should I use for SVG exports?

Use 92 for general-purpose web images. SVGs contain sharp edges and text that show compression artifacts more readily than photographs. Going below 85 introduces visible ringing around edges. Going above 95 increases file size 2-3x with no visible improvement. If your JPG still feels too large after exporting at 92, compress it with Pixotter rather than lowering the quality setting.

Can I convert JPG back to SVG?

Not as a simple format swap. JPG to SVG requires tracing — an algorithm that detects edges in the pixel data and approximates them as vector paths. The result is always an approximation, never an exact reconstruction. Tools like Inkscape 1.4 (Trace Bitmap) and Potrace handle this, but expect to do manual cleanup afterward. For a detailed walkthrough, see How to Convert JPG to SVG.

Does converting SVG to JPG lose quality?

It depends on your export resolution and quality setting. The SVG itself has no fixed resolution — it is infinitely scalable. When you convert to JPG at 2000x2000 and quality 92, the result is visually identical to the SVG at that display size. Quality loss comes from two sources: rasterizing at too low a resolution (pixelation) and compressing too aggressively (artifacts). Export at a high enough resolution with a quality of 88 or above, and the loss is imperceptible.

Should I convert to JPG or PNG?

It depends on whether you need transparency. JPG does not support transparency — every pixel has a solid color. PNG supports full alpha transparency. If your SVG has a transparent background and the destination supports PNG, convert to PNG to keep that transparency. If you need universal compatibility (email, old systems, upload forms that only accept JPG), or if the image will always sit on a solid background, JPG is the better choice — smaller file sizes for photographic or gradient content.

How do I batch convert 100+ SVG files to JPG?

Use ImageMagick 7.1 in a shell loop:

for f in *.svg; do
    magick -density 300 "$f" -background white -flatten -quality 92 "${f%.svg}.jpg"
done

For more complex requirements (per-file background colors, variable quality), write a short shell or Python script that reads a config file and passes different flags per image. Inkscape's CLI works too but is slower per file due to startup overhead.