How to use
- Drop an .svg file onto the drop area, click to choose one, or paste an image.
- Keep the original format to encode the SVG markup itself, or choose PNG, JPEG or WebP to turn it into pixels.
- If you rasterise it, set a maximum width to control the pixel size.
- Copy the CSS background-image output for a stylesheet, or the data URI, raw Base64, img tag or Markdown version.
SVG as a data URI
SVG (Scalable Vector Graphics, MIME type image/svg+xml) describes shapes as XML text, so it stays sharp at any size. Its Base64 usually starts with PHN2Zy (the encoded <svg) or PD94bWw when the file begins with an XML declaration.
When an SVG is used as an image, the root element must carry xmlns="http://www.w3.org/2000/svg". Many inline snippets copied from HTML omit it, and the data URI then shows nothing. External resources are also blocked in image mode, so web fonts and linked images inside the SVG will not load; convert text to paths or embed those resources first.
Base64 or URL-encoding?
Because SVG is already text, a data URI can carry the markup directly with only a few characters percent-encoded (<, >, #, % and quotes). For a typical icon in CSS that is shorter than Base64 and compresses better with gzip. Base64 is the safer choice when the string goes through systems that mangle quotes or special characters, or when an API expects Base64.
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* Percent-encoded */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");To build the percent-encoded form, use the Data URI Generator and choose percent-encoding.
Sanitise untrusted SVG
SVG can contain <script> elements, event handler attributes such as onload, and links to other documents. Browsers do not run scripts in an SVG shown through <img> or a CSS background, but the same file inlined into HTML or opened on its own can run them. If users can upload SVG files to your application, sanitise them, for example with DOMPurify, before you store or embed them. Base64 only hides the markup from a quick look; it does not make it safe.
Frequently asked questions
Is Base64 or URL-encoding better for SVG?
For SVG in CSS, URL-encoding is usually smaller and stays readable. Base64 is more robust when the string passes through other systems or when an API requires Base64.
Why does my SVG data URI not display?
xmlns attribute on the root element, an unescaped # in a percent-encoded URI, and fonts or images that the SVG loads from other files.Can I convert an SVG to a PNG Base64 string?
Yes. Choose PNG as the target format. The browser renders the SVG to pixels, and the maximum width option lets you make the result smaller.