Koder URL SVG

Czym jest SVG?

SVG to skrót od Scalable Vector Graphics (skalowalna grafika wektorowa). Służy do definiowania grafiki wektorowej dla Internetu w formacie XML. Każdy element i atrybut w plikach SVG może być animowany.

• Wikipedia - SVG

Jak używać SVG w CSS?

Aby używać kodu SVG bezpośrednio w CSS, musisz go najpierw zakodować. Możesz użyć tego narzędzia SVG URL Encoder lub funkcji JavaScript encodeURIComponent(). Zakodowany identyfikator URI danych SVG można stosować z właściwościami CSS background-image, border-image i mask poprzez funkcję url(). Przykład: 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");

Jak zmienić kolor SVG w CSS?

Aby zmienić kolor SVG, możesz połączyć właściwości CSS mask i background-color. Poniższy przykład zmieni kolor SVG na niebieski. Przykład: 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;

Czym jest URL?

URL (Uniform Resource Locator) to adres unikalnego zasobu w internecie. Jest to jeden z kluczowych mechanizmów używanych przez przeglądarki do pobierania zasobów, takich jak strony HTML, dokumenty CSS, obrazy i tak dalej.

• MDN - What is a URL?

Jak zakodować URL?

Aby zakodować URL, możesz użyć funkcji encodeURIComponent(), która koduje URI, zastępując każde wystąpienie określonych znaków jedną, dwiema, trzema lub czterema sekwencjami ucieczki reprezentującymi kodowanie UTF-8 danego znaku. W porównaniu z encodeURI(), ta funkcja koduje więcej znaków, w tym te, które są częścią składni URI.

• MDN - encodeURIComponent()

Jak zdekodować URL?

Aby zdekodować URL, możesz użyć funkcji decodeURIComponent(), która dekoduje URI, traktując każdą sekwencję ucieczki w postaci %XX jako jedną jednostkę kodu UTF-8 (jeden bajt). W UTF-8 liczba wiodących bitów 1 w pierwszym bajcie, która może wynosić 0 (dla 1-bajtowych znaków ASCII), 2, 3 lub 4, wskazuje liczbę bajtów w znaku.

• MDN - decodeURIComponent()