URL-encode an SVG into a data URI for CSS backgrounds and masks, smaller than Base64.
Copy the markup straight out of your icon file or design tool. Comments, the XML declaration and extra whitespace are stripped, and the namespace is added if it is missing.
URL encoding is smaller and leaves the markup readable, which means you can still see and tweak the colours in your stylesheet. Base64 is there for the rare tool that needs it.
Take a background-image rule, a mask-image rule with the webkit prefix, or the bare data URI. The preview shows the result rendered as a real CSS background.
For SVG it is usually smaller, often by a fifth or more, and the markup stays readable in the stylesheet so you can still see what the icon is and change a fill without re-encoding.
Because inside a url() it is parsed as a standalone document rather than as part of your HTML. Without the namespace the browser will not render it. The tool adds it if it is missing.
An unescaped hash starts a fragment identifier and truncates the URL, so a fill colour like #ec4393 would break the whole value. It becomes %23.
Not directly in a background image, since the colour is baked into the markup. Use mask-image instead and set background-color on the element, which lets CSS control the colour.
For large or complex illustrations, and for anything reused across many stylesheets. Inlining duplicates the payload each time and cannot be cached separately.
Yes, a data URI works as an img src. The CSS snippets are offered because that is the more common use, but the raw URI is right there.
No. Encoding happens in your browser, so unreleased icons and client assets stay on your machine.
Yes, completely free with no sign-up.
Turn an image into a data URI you can inline in CSS, HTML or Markdown, without uploading the file.
Open ToolDraw clip-path shapes by dragging points, or use circle, ellipse and inset.
Open ToolMinify or beautify CSS with strings and data URIs left intact, and see how much smaller it got.
Open Tool