Encode SVG for web use
Prepare SVG markup as Base64, a data URI, or CSS. Processing stays in your browser.
SVG source
Drop an SVG file here
SVG · up to 15 MB
Ready to embed
Paste markup or choose a file, then encode it to see the output formats.
What this tool does
Prepare SVG markup for places that expect an encoded string rather than a separate asset file. The tool produces four formats from the same validated SVG.
How to use it
- Drop an SVG file or paste SVG markup into the text area.
- Select Encode SVG and review the four generated formats.
- Copy the format that matches your destination: raw Base64, a Base64 data URI, a URL-encoded data URI or a CSS background declaration.
Understand the controls
- Data URI
- Use either data URI in an HTML image source or compatible CSS property. The raw Base64 value is useful when another system supplies the data: prefix itself.
- CSS declaration
- This output includes background-image: url(...); so it can be placed in a CSS rule without extra encoding.
Example
For a small inline icon in a stylesheet, copy the CSS background declaration. For an HTML img element, copy a data URI into its src attribute.
Files and limits
Input is limited to 15 MB. SVGs with scripts or external resources are rejected. Large data URIs can make source files harder to maintain.
Frequently asked questions
Which format should I use?
Use a data URI in an HTML image source, or copy the CSS declaration for a background image.
Does the encoder change the artwork?
It validates and encodes the supplied SVG markup; no image pixels are altered.