Koder URL SVG
Przekształć znaczniki SVG w data URI gotowe do CSS i dekoduj data URI z powrotem do SVG.
Koder URL SVG
Wklej SVG i uzyskaj data URI, które wstawisz prosto do CSS, gotowe pod background-image lub maskę. Zamiast base64 koder używa kompaktowego podejścia z kodowaniem URL: zamienia cudzysłowy podwójne na pojedyncze, redukuje białe znaki i koduje procentowo tylko te znaki, które naprawdę tego wymagają, więc wynik pozostaje krótki i czytelny. Twój arkusz stylów jest lżejszy niż blok base64, a kształty wewnątrz URI wciąż rozpoznasz.
Trzy formaty wyniku pokrywają typowe przypadki. Reguła CSS opakowuje data URI w background-image: url("…"); więc wklejasz całą deklarację. Samo data URI daje jedynie wartość do zmiennej niestandardowej, atrybutu src elementu <img> lub maski SVG. Format base64 tworzy bezpieczne dla UTF-8 data:image/svg+xml;base64 URI dla narzędzi lub kroków budowania, które oczekują tego kodowania, w tym SVG z emoji lub tekstem ze znakami diakrytycznymi. Opcja typu MIME otwiera ten sam koder na dowolną zawartość: wybierz text/plain, text/html, text/css, application/json albo inny typ, a wklejony tekst stanie się data URI tego typu. Tylko image/svg+xml zwija białe znaki i zamienia cudzysłowy podwójne na pojedyncze, bo te dwie sztuczki skracają znaczniki, ale niszczą zwykły tekst i JSON. Typy nieobrazkowe pomijają też otoczkę background-image i zwracają samo url("…").
Przełącz kierunek na dekodowanie, a narzędzie zamieni dowolną z trzech postaci z powrotem na surowe znaczniki SVG. Wklej regułę CSS, samo data URI lub wariant base64, a narzędzie wyodrębni SVG, dzięki czemu zedytujesz ikonę istniejącą tylko wewnątrz arkusza stylów. Licznik pokazuje rozmiar wejścia, rozmiar wyniku i zmianę procentową, więc od razu widzisz, czy kodowanie zmniejszyło, czy powiększyło ikonę. URI może też przyjść opakowane w znacznik HTML <img> lub <link>, z jawnym zestawem znaków w nagłówku.
Wszystko działa w twojej przeglądarce. Twoje znaczniki SVG nie są nigdzie wysyłane, więc zakodujesz prywatne ikony, logotypy i wewnętrzne zasoby bez opuszczania urządzenia.