SVGView

Konwerter SVG na URI danych

Twórz kompaktowe identyfikatory URI danych do wykorzystania w formacie SVG w formacie CSS lub HTML. Świetnie nadaje się do małych zasobów i szybkiego osadzania. Otwieraj pliki SVG online i natychmiast je konwertuj.

Przeciągnij i upuść plik SVG

lub kliknij, aby przeglądać, lub wklej kod SVG

Akceptuje tylko pliki .svg
Wklej kod SVG za pomocą Ctrl+V / Cmd+V

Dlaczego warto korzystać z naszego konwertera SVG na dane URI?

Opcje kodowania Base64 i URL

SVG do Data URI umożliwia przełączanie między danymi wyjściowymi zakodowanymi w formacie Base64 i URL, w zależności od zgodności i rozmiaru. Base64 jest bezpieczny w każdym kontekście, podczas gdy kodowanie URL sprawia, że ​​proste pliki SVG są krótsze i łatwiejsze do odczytania w różnicach.

Dane wyjściowe URI gotowe do kopiowania

SVG do Data URI formatuje gotowy do użycia ciąg data:image/svg+xml i zapewnia kopię jednym kliknięciem. Ucieka od znaków takich jak #,% i cudzysłowów, więc dane wyjściowe działają w atrybutach HTML, CSS lub JSON bez ręcznego czyszczenia.

Osadź w dowolnym miejscu

Dane wyjściowe działają w pliku img src, obrazie tła CSS, stylach wbudowanych lub blokach stylów w wiadomościach e-mail. Utrzymywanie zasobów w trybie online pozwala uniknąć dodatkowych żądań i pomaga dostarczać małe elementy interfejsu użytkownika przy minimalnym nakładzie pracy.

Mniejsze ciągi z czystym SVG

SVG do Data URI dobrze łączy się ze zoptymalizowanymi SVG, aby zapewnić krótkie wyniki. Usuń metadane, uprość ścieżki i usuń nieużywane identyfikatory, aby końcowy ciąg pozostał zwarty i czytelny podczas przeglądów kodu. Krótsze ciągi znaków są łatwiejsze do przechowywania w plikach konfiguracyjnych i redukują zawijanie linii.

Lokalne, prywatne przetwarzanie

SVG do Data URI działa całkowicie w przeglądarce, więc pliki nigdy nie opuszczają Twojego urządzenia. Jest to bezpieczne dla pracy klienta, ikon wewnętrznych i zasobów, których nie można przesłać na serwery zewnętrzne.

Szybka iteracja dla zespołów

To narzędzie jest wystarczająco szybkie, aby umożliwić szybką iterację: wklejanie, konwertowanie, kopiowanie i aktualizowanie interfejsu użytkownika. Pasuje do przepływów pracy w systemach projektowych, witryn z dokumentacją i sesji prototypowania, w których liczy się szybkość.

Jak przekonwertować SVG na URI danych

1

Dodaj swój plik SVG

Przeciągnij i upuść plik lub wklej znaczniki SVG. SVG do Data URI ładuje źródło lokalnie i zachowuje pole widoku, identyfikatory i kolory w celu zapewnienia dokładnych wyników. Otwieraj pliki SVG online i konwertuj je od razu.

2

Wybierz kodowanie

Wybierz Base64, aby uzyskać maksymalną kompatybilność lub kodowanie URL w celu uzyskania krótszych, czytelnych ciągów znaków. SVG do Data URI natychmiast aktualizuje dane wyjściowe, dzięki czemu można porównać długości przed kopiowaniem.

3

Skopiuj i osadź

Skopiuj wynik i wklej go do kodu HTML, CSS lub JSON. Ciągi SVG do Data URI są gotowe dla atrybutów img src, obrazu tła lub stylu wbudowanego.

Często zadawane pytania dotyczące identyfikatora URI danych SVG

Co to jest identyfikator URI danych SVG i kiedy należy go używać?
SVG do Data URI osadza SVG bezpośrednio w ciągu adresu URL, dzięki czemu można go używać bezpośrednio bez hostowania osobnego pliku. Jest to przydatne w przypadku ikon, małych ilustracji i szablonów wiadomości e-mail, w przypadku których żądania zewnętrzne są ograniczone.
SVG do URI danych: kodowanie Base64 lub URL, jak wybrać?
SVG do Data URI obsługuje oba. Base64 to najbezpieczniejszy wybór we wszystkich kontekstach, podczas gdy kodowanie adresu URL jest często krótsze w przypadku prostych kształtów i jest łatwiejsze do edycji lub różnicowania w kontroli źródła.
Czy identyfikator URI danych SVG będzie działał w obrazie tła CSS?
Tak. SVG do Data URI wyprowadza ciąg data:image/svg+xml, który można umieścić w obrazie tła: url(...). Jest to typowy wzór dla wzorców, ikon i dekoracyjnych zasobów interfejsu użytkownika.
Czy konwersja jest prywatna?
SVG do Data URI działa lokalnie w Twojej przeglądarce, więc zasoby nigdy nie opuszczają Twojego urządzenia. Dzięki temu zastrzeżone logo lub ikony klientów są bezpieczne i można ich używać w zablokowanych sieciach.
Jak duży może być SVG?
SVG do Data URI może przetwarzać pliki o rozmiarze do 10 MB. Bardzo duże pliki SVG będą generować długie ciągi znaków, więc optymalizacja lub użycie pliku zewnętrznego może być bardziej praktyczne.
Czy powinienem dokonać optymalizacji przed konwersją?
Tak. Wyniki SVG do Data URI są krótsze i bardziej niezawodne, gdy SVG jest zoptymalizowany. Usuń niepotrzebne metadane i białe znaki, aby zachować zwartość kodu HTML lub CSS.
Czy zachowuje kolory i viewBox?
SVG do Data URI zachowuje niezmienione pole widoku, wypełnienia, obrysy i identyfikatory, dzięki czemu renderowany wynik jest zgodny ze źródłem. Jeśli polegasz na zmiennych currentColor lub CSS, zachowaj je w pliku SVG przed konwersją.
Czy konwerter SVG na Data URI jest darmowy i nie wymaga pobierania?
Tak. Konwertera SVG na Data URI można używać bezpłatnie w przeglądarce. Nie są wymagane żadne pliki do pobrania ani instalacja.
Czy potrzebuję konta, aby korzystać z konwertera SVG na Data URI?
Nie. Konwerter SVG na Data URI działa natychmiast w przeglądarce bez konieczności rejestracji, a pliki pozostają lokalne.

Powiązane narzędzia SVG

Połącz SVG z Data URI za pomocą tych narzędzi, aby przeglądać, optymalizować lub konwertować zasoby przed osadzeniem. Czyste źródło daje krótsze i bardziej niezawodne ciągi znaków.

Przeglądarka SVG

Wyświetl podgląd źródła przed SVG do URI danych, aby móc potwierdzić rozmiar, kolory i ustawienia viewBox.

Otwórz narzędzie

Optymalizator SVG

Uruchom SVG Optimizer przed SVG do URI danych, aby zmniejszyć znaczniki i zachować zwartość końcowego ciągu.

Otwórz narzędzie

Tło SVG do CSS

Użyj SVG do CSS w tle, jeśli potrzebujesz fragmentów CSS wielokrotnego użytku dla gradientów, masek lub ikon.

Otwórz narzędzie

SVG do PNG

Użyj SVG do PNG, gdy identyfikator URI SVG do danych jest za długi i potrzebujesz rastrowego obrazu zastępczego dla starszych kontekstów.

Otwórz narzędzie

SVG, aby zareagować

Po przetestowaniu przekonwertuj na komponenty, aby móc porównać metody dostarczania w swojej aplikacji.

Otwórz narzędzie

Powiązany blog SVG

Czytaj dalej praktyczne materiały o przepływach SVG, rozwiązywaniu problemów i produkcji.