Codificatore URL SVG

Cos'è SVG?

SVG sta per Scalable Vector Graphics (grafica vettoriale scalabile). Viene usato per definire grafica vettoriale per il Web in formato XML. Ogni elemento e attributo nei file SVG può essere animato.

• Wikipedia - SVG

Come usare SVG in CSS?

Per usare il codice SVG direttamente in CSS è necessario codificarlo prima. Puoi usare questo strumento SVG URL Encoder oppure la funzione JavaScript encodeURIComponent(). Un URI di dati SVG codificato può essere usato con le proprietà CSS background-image, border-image e mask tramite la funzione url(). Esempio: 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");

Come cambiare il colore di un SVG in CSS?

Per cambiare il colore di un SVG, puoi combinare le proprietà CSS mask e background-color. L'esempio seguente cambierà il colore di un SVG in blu. Esempio: 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;

Cos'è un URL?

Un URL (Uniform Resource Locator) è l'indirizzo di una risorsa univoca su internet. È uno dei meccanismi chiave usati dai browser per recuperare risorse come pagine HTML, documenti CSS, immagini e così via.

• MDN - What is a URL?

Come codificare un URL?

Per codificare un URL puoi usare la funzione encodeURIComponent(), che codifica un URI sostituendo ogni occorrenza di certi caratteri con una, due, tre o quattro sequenze di escape che rappresentano la codifica UTF-8 del carattere. Rispetto a encodeURI(), questa funzione codifica più caratteri, inclusi quelli che fanno parte della sintassi URI.

• MDN - encodeURIComponent()

Come decodificare un URL?

Per decodificare un URL puoi usare la funzione decodeURIComponent(), che decodifica l'URI trattando ogni sequenza di escape nella forma %XX come un'unità di codice UTF-8 (un byte). In UTF-8, il numero di bit 1 iniziali nel primo byte, che può essere 0 (per caratteri ASCII a 1 byte), 2, 3 o 4, indica il numero di byte nel carattere.

• MDN - decodeURIComponent()