Koder URL SVG
Przekształć znaczniki SVG w data URI gotowe do CSS i dekoduj data URI z powrotem do SVG.
Powiązane narzędzia
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.
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ę.
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.