SVG URL Encoder

What is SVG?

SVG stands for Scalable Vector Graphics. SVG is used to define vector-based graphics for the Web. SVG defines graphics in XML format. Each element and attribute in SVG files can be animated.

• Wikipedia - SVG

How to use SVG in CSS?

To use SVG code directly in CSS you will need to encode the SVG code for further use. To make SVG encoded you can use this SVG URL Encoder tool or encodeURIComponent() JavaScript function. An encoded SVG data URI can be used with background-image, border-image and mask CSS properties via url() function. For example: background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='red'/%3E%3C/svg%3E");

How to change the color of SVG in CSS?

To change the color of any SVG, you can combine mask and background-color css properties. The example below will change the color of an SVG to blue. Example: mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='currentColor'/%3E%3C/svg%3E"); background-color: blue;

What is URL?

A URL (Uniform Resource Locator) is the address of a unique resource on the internet. It's one of the key mechanisms used by browsers to extract resources, such as HTML pages, CSS documents, images, and so on.

• MDN - What is a URL?

How to encode a URL?

To encode a URL you can use the encodeURIComponent() function which encodes a URI by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character. Compared to encodeURI(), this function encodes more characters, including those that are part of the URI syntax.

• MDN - encodeURIComponent()

How to decode a URL?

To decode a URL you can use the decodeURIComponent() function decodes the URI by treating each escape sequence in the form %XX as one UTF-8 code unit (one byte). In UTF-8, the number of leading 1 bits in the first byte, which may be 0 (for 1-byte ASCII characters), 2, 3, or 4, indicates the number of bytes in the character.

• MDN - decodeURIComponent()