Zakoduj kod SVG jako data URI z kodowaniem URL lub base64, z gotowymi do wklejenia liniami CSS background-image i <img>. Opcjonalna minifikacja.
— wynik pojawi się tutaj —
— wynik pojawi się tutaj —
— wynik pojawi się tutaj —
O tym narzędziu
Wklej surowy kod SVG i uzyskaj data URI, które możesz wrzucić prosto do CSS lub HTML. Tworzy dwa kodowania i wszystko jest generowane w Twojej przeglądarce, więc nic nie jest wysyłane.
Wyjście z kodowaniem URL zamienia podwójne cudzysłowy na pojedyncze, uruchamia encodeURIComponent, a następnie przywraca kilka bezpiecznych znaków (spacja, dwukropek, ukośnik, znak równości), aby zachować zwięzłość i czytelność. Wyjście base64 koduje SVG w UTF-8 i przepuszcza je przez btoa, dając data:image/svg+xml;base64,… . Porównanie bajtów pokazuje, które kodowanie jest mniejsze; dla większości ikon wygrywa forma z kodowaniem URL.
Włącz minifikację, aby usunąć komentarze i zwinąć białe znaki między znacznikami przed kodowaniem. Skopiuj linię background-image dla CSS lub linię <img src> dla HTML. Zwróć uwagę, że cudzysłowy wewnątrz SVG są normalizowane do pojedynczych, aby data URI można było bezpiecznie owinąć podwójnymi cudzysłowami.
Najczęściej zadawane pytania
Kodowanie URL czy base64 — którego użyć?
Kodowanie URL jest zwykle mniejsze i pozostaje czytelne, co pomaga w debugowaniu. Base64 jest bardziej nieprzejrzyste, ale powszechnie akceptowane; porównanie rozmiarów mówi, które jest tu mniejsze.
Dlaczego moje podwójne cudzysłowy zmieniono na pojedyncze?
Cudzysłowy atrybutów są konwertowane na pojedyncze, aby całe data URI mogło siedzieć wewnątrz url("…") lub src="…" w podwójnych cudzysłowach bez ucieczek. Oba są poprawne w SVG.
Czy minifikacja zmienia wygląd SVG?
Nie. Usuwa tylko komentarze i zwija białe znaki między znacznikami i wewnątrz nich; renderowany wektor jest identyczny, tylko mniejszy.
Czy mój SVG jest gdzieś wysyłany?
Nie. Kodowanie działa w całości w Twojej przeglądarce z encodeURIComponent i btoa; kod nigdy nie opuszcza Twojego urządzenia.