Przejdź do głównej treści

SVG na Data URI

Konwertuj SVG na URI danych dla CSS lub HTML

Utwórz zakodowany dla URL lub Base64 identyfikator URI danych SVG oraz gotowy kod CSS background-image, CSS mask-image i HTML img. Zoptymalizuj znaczniki, sprawdź podgląd i skopiuj potrzebny format bez przesyłania SVG.

Upuść pliki tutaj

Edytowanie ustawień domyślnych dla nowych plików

Kodowanie

Kodowanie URL zastępuje tylko te znaki, których adres URL nie może przenieść, więc dla plików wielkości ikony wynik jest zwykle 20-30% mniejszy niż Base64, a znaczniki pozostają czytelne. Wybierz Base64, gdy krok kompilacji lub CMS przepisuje znaki procenta.

Koduje dodatkowo spacje, apostrofy i nawiasy, dzięki czemu URI jest bezpieczny w zapisie url(...) bez cudzysłowów oraz w ciągach znaków Sass i Less. Kosztuje kilka bajtów. Base64 wcale tego nie potrzebuje.

Optymalizacja

Stosuje bezpieczne ustawienie optymalizatora przed wygenerowaniem wyniku.

Stylowanie

Zastępuje wypełnienia i obrysy, dzięki czemu ikona dziedziczy kolor otaczającego tekstu. Przydatne tylko przy jednobarwnej grafice: wielokolorowy SVG zostaje spłaszczony do jednego koloru.

Brak podglądu. Dodaj i wybierz pliki, aby zobaczyć wyniki.

Nie ma jeszcze plików. Upuść pliki powyżej lub kliknij WYBIERZ PLIKI.

Nie ma jeszcze plików. Upuść pliki powyżej lub kliknij WYBIERZ PLIKI.

Czym jest SVG?

SVG (Scalable Vector Graphics) to oparty na XML format obrazu wektorowego. Zamiast pikseli SVG matematycznie opisuje kształty, ścieżki, wypełnienia i obrysy, dzięki czemu może być renderowany w dowolnym rozmiarze bez utraty jakości.

SVG to standardowy format wektorowy dla internetu. Wszystkie nowoczesne przeglądarki obsługują go natywnie; można go stylizować za pomocą CSS oraz animować przez JavaScript lub SMIL. Zwykle jest kompaktowy dla logo, ikon i ilustracji, jednak złożone pliki SVG mogą być duże.

Kiedy osadzić SVG jako data URI

URI danych umieszcza cały SVG w arkuszu stylów lub znacznikach, więc przeglądarka nie potrzebuje drugiego żądania, aby go narysować. Opłaca się to w przypadku małych, dekoracyjnych dzieł sztuki: kul, strzałek, jodełek, zaznaczeń pól wyboru lub znaku w stopce. Kodowanie URL jest zwykle bardziej zwarte w przypadku tekstu SVG, podczas gdy kodowanie Base64 może być przydatne, gdy inne narzędzie tego oczekuje. Maska CSS traktuje SVG jako szablon własnego koloru tła elementu, więc jedną monochromatyczną ikonę można zmienić na inny stan, motyw lub komponent za pomocą pojedynczej deklaracji CSS.

Jak konwertować SVG na data URI online

  1. 1

    Przeciągnij pliki SVG albo kliknij WYBIERZ PLIKI, aby dodać je do kolejki. Do 40 naraz.

  2. 2

    Wybierz kodowanie URL albo Base64 i zdecyduj, czy najpierw zoptymalizować znaczniki. Wszystkie pięć wyników wraz z ich rozmiarami w bajtach odświeża się, gdy zmieniasz opcje.

  3. 3

    Skopiuj potrzebny fragment albo kliknij ZAPISZ WSZYSTKO, aby pobrać po jednym pliku .css na każdy SVG, z regułami tła i maski.

Prywatność: Twoje pliki nie opuszczają przeglądarki

Konwersja przebiega lokalnie w przeglądarce przy użyciu JavaScript i WebAssembly. Nie ma przesyłania plików ani konwersji po stronie serwera, więc dodane pliki pozostają na Twoim urządzeniu.

Przetwarzanie lokalne pomaga chronić poufne logo, dokumenty wewnętrzne i niepublikowane grafiki klientów. Strony i kod konwersji są zapisywane w pamięci podręcznej w miarę ich używania, więc narzędzia, które już otworzyłeś, mogą nadal działać bez połączenia sieciowego.

Najczęściej zadawane pytania

Czy data URI zakodowany dla URL jest mniejszy niż Base64?

Zwykle. Base64 dodaje narzut kodowania do surowych bajtów, podczas gdy kodowanie URL rozszerza jedynie znaki, które muszą zostać zmienione. Dokładna różnica zależy od znacznika SVG, więc narzędzie pokazuje oba rozmiary i pozwala je porównać z plikiem, który masz przed sobą.

Jak reguła maski CSS przekolorowuje ikonę?

mask-image używa SVG jak szablonu: element maluje własny background-color, a maska decyduje, które piksele przetrwają. Ponieważ kolor pochodzi z CSS, jeden data URI może mieć dowolny kolor, a wariant dla najechania kursorem lub trybu ciemnego to jedna zmiana background-color. Działa to tylko przy jednobarwnej grafice, bo maska zachowuje kanał alfa i odrzuca własne kolory SVG. Safari wciąż wymaga prefiksu -webkit-mask-image, który generowana reguła zawiera.

Kiedy nie osadzać SVG jako data URI?

Gdy plik jest duży lub udostępniony. Identyfikator URI danych jest kopiowany do każdego arkusza stylów lub strony, która go używa, więc nie może być przechowywany samodzielnie w pamięci podręcznej i jest ponownie pobierany za każdym razem, gdy plik ulegnie zmianie. W przypadku większych dzieł sztuki lub zasobów wykorzystywanych ponownie na wielu stronach często lepszym wyborem jest oddzielny plik .svg z własnymi nagłówkami pamięci podręcznej. URI danych również nie można stylizować z zewnątrz, dlatego wygenerowana reguła maski jest przydatna w przypadku ikon monochromatycznych.