SVG ↔ URL Encoder/Decoder

About tool

We can use SVG in CSS via data URI, but without encoding it works only in Webkit based browsers. If encode SVG using encodeURIComponent() it will work everywhere.

SVG must have attribute xmlns like this: xmlns='http://www.w3.org/2000/svg'. If it doesn't exist, it will be added automagically.

Encoded SVG can be used in background-image, border-image and mask-image (demo), i.e.

body { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' width='80' height='40'%3e%3ccircle cx='20' cy='20' style='fill:none;stroke:%23000;stroke-width:8' r='16'/%3e%3c/svg%3e"); }.

This tool was made by Santiago Becerra and was originally published on this Codepen: https://codepen.io/sanbec/pen/yLpZgJw

Insert your SVG code or
Take your decoded SVG

Download

Take encoded SVG or
Insert to decode

Take ready for CSS:

External quotes: 'single' / "double"

Demo:

Select Background Color:

Preview

This Code is Licensed Under the GNU Affero General Public License v3.0

Made by Santiago Becerra & Erik Uden, Maintained with 💗 by Uden AI