Przejdź do głównej treści

Spritesheet SVG

Wygeneruj arkusz sprite SVG z mapą JSON

Ułóż ikony SVG na niestandardowej siatce i wyeksportuj jeden arkusz sprite'ów PNG, WebP lub SVG z mapą ramek JSON. Kontroluj kolumny, rozmiar komórki, dopełnienie, odstępy, wyrównanie, skalę i porządek sortowania.

Upuść pliki tutaj
Siatka

0 oznacza automatycznie. Gdy oba pola mają 0, ikony trafiają na kwadratową siatkę; ustaw jedno, a drugie wyniknie z liczby plików.

Margines wewnętrzny to puste miejsce wewnątrz komórki, a odstęp to przerwa między komórkami. Klatki w mapie JSON obejmują całą komórkę razem z marginesem wewnętrznym i nigdy nie sięgają w odstęp.

Sortowanie
Zawartość komórki
Wyrównanie w poziomie
Wyrównanie w pionie

Jaką część komórki z marginesem wewnętrznym wypełnia grafika po dopasowaniu.

Wypisuje nazwę każdego pliku pod jego komórką. Wiersz podpisów powiększa wysokość arkusza i pozostaje poza klatkami.

Wyjście
Format wyjściowy

PNG działa wszędzie. WebP jest mniejszy wszędzie tam, gdzie przeglądarka potrafi go zakodować. SVG zachowuje każdą ikonę jako wektor i skaluje się bez rozmycia.

Tło

Podgląd

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

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

Czym jest spritesheet SVG?

Spritesheet to jeden obraz, który mieści wiele mniejszych obrazów na siatce, oraz mapa mówiąca, gdzie leży każdy z nich. Tutaj źródłami są pliki SVG: każdy jest rysowany we własnej komórce, a gotowy arkusz jest eksportowany jako PNG, WebP albo pojedynczy obszar roboczy SVG.

To nie to samo, co ikonka symbolu SVG. Duszek symboliczny to jeden plik SVG z <symbol> na ikonę, do której strony odwołują się według identyfikatora z <use>, więc każda ikona pozostaje znacznikiem wektorowym, a CSS może nadal ją kolorować. Arkusz sprite to wizualne płótno: cokolwiek go zużywa, wycina klatki według współrzędnych. Wybierz ikonkę symbolu dla ikon HTML, arkusz ikon dla canvas, ikonkę tła WebGL lub CSS.

Kiedy używać spritesheeta

Spritesheet zbiera wiele małych obrazów w jeden plik, więc gra albo aplikacja wysyła jedno żądanie i trzyma wszystkie klatki w jednej teksturze. Renderery canvas i WebGL rysują z niego prostokątami, CSS pozycjonuje go przez background-position, a mapa JSON dostarcza współrzędne, więc niczego nie trzeba mierzyć ręcznie. Sięgnij po niego wtedy, gdy odbiorca pracuje na pikselach; jeśli chcesz ikon, które skalują się i dziedziczą kolor wewnątrz HTML, zbuduj zamiast tego sprite symboli SVG.

Jak zbudować spritesheet z plików SVG

  1. 1

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

  2. 2

    Ustaw siatkę (kolumny, wiersze, rozmiar komórki, margines wewnętrzny, odstęp), a potem wyrównanie, skalę, sortowanie i format wyjściowy. Arkusz przerysowuje się przy każdej zmianie.

  3. 3

    Kliknij ZAPISZ WSZYSTKO, aby pobrać jeden plik ZIP z arkuszem i jego mapą klatek JSON.

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

Użyć spritesheeta czy sprite'a symboli SVG?

Sprite symboli wybierz, gdy ikony trafiają do HTML: pozostaje wektorem, dziedziczy właściwość color z CSS, a do każdej ikony odwołujesz się przez id za pomocą <use>. Spritesheet wybierz, gdy coś rysuje piksele według współrzędnych, na przykład gra na canvas lub WebGL albo sprite tła w CSS. Mapa JSON spritesheeta podaje x, y, width i height każdej klatki.

Co zawiera mapa JSON?

Po jednym wpisie na ikonę, kluczowanym nazwą pliku bez rozszerzenia, na przykład {"home":{"x":0,"y":0,"width":64,"height":64}}. Prostokąt obejmuje całą komórkę razem z marginesem wewnętrznym, więc narysowanie tego prostokąta odtwarza ikonę dokładnie tam, gdzie została umieszczona. Powtórzone nazwy dostają przyrostki -2 i -3, dzięki czemu każdy klucz pozostaje unikalny.

Jak duży może być arkusz?

Element canvas jest ograniczony do 16 384 px na bok i 64 megapikseli łącznie, więc 40 ikon w komórkach po 256 px mieści się swobodnie w limicie. Po jego przekroczeniu narzędzie zgłasza rozmiar zamiast zapisywać pusty obraz. WebP zależy też od przeglądarki: tam, gdzie nie potrafi ona zakodować WebP, dostaniesz błąd, a nie PNG z niewłaściwym rozszerzeniem.