Przejdź do głównej treści

Sprite symboli SVG

Połącz ikony SVG w jeden sprite symboli

Połącz folder ikon SVG w jednego duszka wielokrotnego użytku. Każdy plik staje się <symbol> z gotowym fragmentem <use>, a wewnętrzne identyfikatory z prefiksem zapobiegają kolizji gradientów, masek i ścieżek obcinania.

Upuść pliki tutaj

Te ustawienia dotyczą całego sprite'a.

Sprite

Dostarcz sprite.svg jako plik i wskazuj go przez <use href="sprite.svg#id">.

Optymalizacja

Stosuje bezpieczne ustawienie optymalizatora przed wygenerowaniem wyniku.

Wyśrodkowuje każdą ikonę w kwadratowym viewBox zaczynającym się od 0 0, dzięki czemu ikony narysowane na różnych obszarach roboczych wyrównują się do tego samego rozmiaru.

Wyjście

Dodaje usage.html do pobrania: każda ikona wyrenderowana obok fragmentu, który ją rysuje.

Podgląd sprite'a

Dodaj pliki SVG, aby zbudować sprite.

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

Sprite symboli czy spritesheet?

Sprite symboli to jeden plik SVG, który zawiera po jednym elemencie <symbol> na ikonę. Nic nie jest rysowane, dopóki nie odwołasz się do symbolu przez <use>, więc ikony pozostają wektorami, dają się stylizować za pomocą CSS i są ostre w każdym rozmiarze. Tego właśnie chcesz dla zestawu ikon interfejsu.

Spritesheet to jeden obraz, na którym wszystkie ikony są rozłożone na siatce i rysowane przez background-position albo przez mapę klatek w JSON. Ikony są pikselami o stałych współrzędnych, czego oczekują silniki gier i renderery canvas i czego potrzebujesz, gdy cel w ogóle nie może użyć <use>.

Otwórz generator SVG Spritesheet

Kiedy używać sprite'a symboli

Duszek symbolu przechowuje zestaw ikon w jednym pliku SVG wielokrotnego użytku, a każda instancja ikony staje się krótkim elementem <use> zamiast powtarzalnego bloku ścieżek. Jest to przydatne w przypadku nawigacji, przycisków, tabel i innych interfejsów, które ponownie wykorzystują te same ikony. Symbole pozostają znacznikami wektorowymi, więc pozostają ostre i mogą odziedziczyć kolor i rozmiar z CSS.

Jak zbudować sprite symboli SVG online

  1. 1

    Przeciągnij swoje ikony SVG albo kliknij WYBIERZ PLIKI, aby dodać je do kolejki. Do 40 naraz, a kolejność listy jest kolejnością symboli.

  2. 2

    Wybierz sprite zewnętrzny albo wstawiony, zdecyduj, czy zoptymalizować ikony i znormalizować ich viewBox, a siatka ikon przebuduje się z samego sprite'a.

  3. 3

    Kliknij ZAPISZ WSZYSTKO, aby pobrać sprite.svg, albo plik ZIP ze sprite.svg i usage.html, gdy przykłady użycia są włączone.

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

Co się dzieje, gdy dwa pliki dają ten sam identyfikator?

Identyfikatory powstają z nazwy pliku bez rozszerzenia, zapisanej małymi literami i uproszczonej do slugu, więc „Arrow Left.svg” staje się arrow-left. Gdy dwa pliki dają ten sam identyfikator, pierwszy go zachowuje, a kolejne dostają -2, -3 i tak dalej. Zmiana nazwy pliku na liście od razu zmienia jego identyfikator, tak samo jak sortowanie albo przeciąganie listy, bo zwykły identyfikator zachowuje ten plik, który jest w kolejności pierwszy.

Wybrać sprite zewnętrzny czy wstawiony?

Sprite zewnętrzny to plik sprite.svg, do którego odwołujesz się przez <use href="sprite.svg#icon-id">. Jest buforowany jak każdy inny zasób i nie rozdmuchuje Twojego HTML, kosztem jednego dodatkowego żądania, a musi pochodzić z tego samego źródła, chyba że CORS pozwoli inaczej. Sprite wstawiony to te same znaczniki wklejone na stronę wewnątrz ukrytego <svg>, do których odwołujesz się przez <use href="#icon-id">. Nie wymaga żadnego żądania i zawsze się rozwiązuje, ale te bajty powtarzają się w każdym dokumencie HTML, który go używa.

Czy zbudowanie sprite'a zmieni wygląd moich ikon?

Nie. Główny element <svg> każdego pliku staje się elementem <symbol> z tym samym viewBox, a jego dzieci są przenoszone bez zmian, poza dodaniem prefiksu do identyfikatorów. „Optymalizuj SVG” uruchamia ten sam zestaw bezpiecznych przebiegów co Optymalizator SVG, więc komentarze, metadane edytora i zbędne atrybuty znikają, a geometria zostaje. „Normalizuj viewBox” wyśrodkowuje każdą ikonę w kwadratowym układzie współrzędnych, co zmienia ramkę, a nie rysunek. Elementy <script> i atrybuty on* są zawsze usuwane, bo sprite trafia na Twoją stronę jako wstawiony kod.