Convert SVG to PNG, JPEG or a data URI

Encode SVG markup for embedding or rasterize it to PNG and white-backed JPEG.

freeworks offlinenothing uploaded
ToolSVG Converter
Input
Output
—

How it works

Embedding modes percent-encode or UTF-8/Base64-encode the XML text for a data URL or CSS url(). Raster modes load the vector as an image, draw it at source or selected dimensions, and ask canvas to encode PNG or JPEG.

  • Source dimensions are retained when the browser can resolve them.
  • JPEG quality is editable and white fill replaces transparency.

Worked example

Embed an SVG circle in CSS
Input
											SVG: <svg xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="5"/></svg>
To: CSS data URL
Output
												url("data:image/svg+xml,%3Csvg%20xmlns=...%3E%3Ccircle%20...%2F%3E%3C%2Fsvg%3E")

When to use this

CSS embeds icons, documents export diagrams as PNG, and JSON messages carry SVG markup in Base64.

Edge cases

  • External fonts, images, stylesheets, or scripts may fail to load and can prevent a clean canvas export.
  • Markup without resolvable dimensions needs an explicit raster width and height.
  • Base64 makes the text larger and does not sanitize active SVG content.

References