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
Wypróbuj przykład

Podgląd sprite'a

Dodaj pliki SVG, aby zbudować sprite.

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.

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.