Codificator URL SVG

Ce este SVG?

SVG înseamnă Scalable Vector Graphics (grafică vectorială scalabilă). Este folosit pentru a defini grafică bazată pe vectori pentru Web în format XML. Fiecare element și atribut din fișierele SVG poate fi animat.

• Wikipedia - SVG

Cum se folosește SVG în CSS?

Pentru a folosi codul SVG direct în CSS, trebuie să codificați SVG-ul mai întâi. Puteți folosi acest instrument SVG URL Encoder sau funcția JavaScript encodeURIComponent(). Un URI de date SVG codificat poate fi folosit cu proprietățile CSS background-image, border-image și mask prin funcția url(). Exemplu: 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");

Cum să schimbi culoarea SVG în CSS?

Pentru a schimba culoarea unui SVG, poți combina proprietățile CSS mask și background-color. Exemplul de mai jos va schimba culoarea unui SVG în albastru. Exemplu: 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;

Ce este un URL?

Un URL (Uniform Resource Locator) este adresa unei resurse unice de pe internet. Este unul dintre mecanismele cheie folosite de browsere pentru a prelua resurse precum pagini HTML, documente CSS, imagini și altele.

• MDN - What is a URL?

Cum se codifică un URL?

Pentru a codifica un URL poți folosi funcția encodeURIComponent(), care codifică un URI înlocuind fiecare apariție a anumitor caractere cu una, două, trei sau patru secvențe de escape reprezentând codificarea UTF-8 a caracterului. Față de encodeURI(), această funcție codifică mai multe caractere, inclusiv pe cele care fac parte din sintaxa URI.

• MDN - encodeURIComponent()

Cum se decodifică un URL?

Pentru a decodifica un URL poți folosi funcția decodeURIComponent(), care decodifică URI-ul tratând fiecare secvență de escape de forma %XX ca o unitate de cod UTF-8 (un octet). În UTF-8, numărul de biți 1 de început din primul octet, care poate fi 0 (pentru caractere ASCII de 1 octet), 2, 3 sau 4, indică numărul de octeți din caracter.

• MDN - decodeURIComponent()