Jak tworzyć i zarządzać Sprites SVG

SVG wygrywa wyścig, jeśli chodzi o grafiki, które skalują się w Internecie. Projektanci i programiści wybierają SVG zamiast czcionek ikon, obrazów rastrowych i sprite rastrowych.

Korzyści z używania SVG są liczne, ale dla mnie sprowadza się to do skalowalności.

Korzystanie z SVG może być tak proste, jak kopiowanie i wklejanie wyeksportowanego kodu z programu opartego na wektorze. Stąd problem polega na dostarczaniu tych grafik w najbardziej efektywny sposób.

Wprowadź duszki SVG. Działają one w podobny sposób, jak robią to sprite'y obrazowe, sposób ich tworzenia i umieszczania na stronie internetowej jest bardzo różny.

Dlaczego warto w ogóle używać Sprites?

Sprity pomagają zwiększyć szybkość, utrzymują spójny obieg pracy programistycznej i znacznie przyspieszają tworzenie ikon. Sproki SVG są zwykle tworzone przy użyciu ikon o podobnym kształcie lub formie, podczas gdy grafiki o większej skali są aplikacjami jednorazowymi.

W wielu przypadkach biblioteka ikon będzie się skalować. Dodawanie nowych ikon musi być wydajne i ostatecznie łatwe. Sprite SVG pomagają uczynić to rzeczywistością.

Eksportowanie kodu SVG

Pliki SVG można eksportować z ulubionego graficznego programu wektorowego. Mam tendencję do korzystania z różnych narzędzi i odkryłem, że wszystkie z nich mają znakomite wsparcie dla eksportu SVG. Naszkicować wyróżnia się w szczególności, ponieważ możesz wybrać ikonę lub grafikę i nacisnąć komendę + c, a kod SVG skopiować do schowka. Następnie możesz udać się do edytora kodu, wkleić kod i wyświetlić grafikę przed oczami w przeglądarce.

Optymalizacja SVG dla sieci

Niestety, gdybyś skopiował i wkleił z Sketcha, może okazać się, że kod jest nieoptymalny i może być lepiej zoptymalizowany. Są na to narzędzia.

Jeśli używasz Szkic w szczególności, sprawdź Wtyczka SVGO Compressor . Podczas eksportowania plików SVG wtyczka automatycznie optymalizuje je przed zapisaniem pliku.

Jeśli nie używasz Szkic sprawdź tę samą funkcjonalność w formularz aplikacyjny lub jeśli wolisz aplikacje internetowe, Jake Archibald złożyć jeden dla ciebie .

Ręczne tworzenie SVG Sprites

Tworzenie duszka SVG można zrobić ręcznie. Będziesz potrzebował programu do projektowania wektorowego, który będzie mógł generować kod SVG. W tym celu wykorzystam Sketch i wyeksportuję kilka ikon jako SVG.

Po wyeksportowaniu ikon i uruchomieniu ich przez wtyczkę SVGO Compressor pozostawiam po sobie dla każdej ikony. Zauważ, że w tym momencie każda ikona jest oddzielnym plikiem:

Teraz, gdy wszystkie nasze SVG są zoptymalizowane, możemy rozpocząć tworzenie sprite'a za pomocą powyższego kodu. Aby stworzyć duszka, zacznij od otoczenia

Zwróć uwagę, że SVG ma wbudowany styl wyświetlania: brak . Jest to wymagane do prawidłowego wykorzystania duszków SVG. Mimo że ikony nie będą renderować na stronie, będzie to wymagało dużej ilości miejsca. Aby uniknąć dodatkowej przestrzeni, którą tworzy SVG, ukrywamy SVG za pomocą CSS.

Po prostu uwzględnienie kodu z ikon nie wystarczy w tym momencie. Musimy skorzystać z element, który pozwoli ci osadzić kod SVG, a także dostarczyć własny specyficzny atrybut viewBox, który jest ważny dla ikon, które mogą wyświetlać się w różnych szerokościach i wysokościach.

Elementy zdefiniowane w element może być renderowany do przeglądarki tylko wtedy, gdy odwołuje się do niego element.

Ostateczny duszek przypomina następujący fragment:

Zwróć uwagę, jak dodałem atrybuty id do każdego elementu symbolu. Jest to ważne, ponieważ gdy odwołujesz się do konkretnej ikony w ikonce, potrzebujesz unikalnego sposobu na jej celowanie. Zwróć też uwagę, że każda ikona ma własne unikalne parametry widoku . Pierwsze dwa parametry będą prawie zawsze wynosić "0 0"; drugie dwa będą równe rozmiarowi wyeksportowanej ikony.

W tym ikona na stronie

Z sprite'em gotowym do działania potrzebujemy sposobu na umieszczenie określonych ikon na stronie. Aby to zrobić, użyjesz element napisany w ten sposób:

Na Twojej stronie powinna pojawić się ikona i to naprawdę wszystko!

Automatyzacja Sprites SVG

Tworzenie spriteów SVG nie jest wcale takie trudne. Problem polega na tym, że wielu programistów musi tworzyć sprite'y dla setek ikon lub więcej dla solidnych aplikacji. Tworzenie czegoś takiego ręcznie może zająć dużo czasu i jest czasochłonne. Deweloperzy potrzebują sposobu na zautomatyzowanie procesu, aby nie marnować czasu na ręczne tworzenie ikonek.

Na szczęście istnieją narzędzia do takich rzeczy. Menedżerowie zadań, tacy jak Chrząknięcie lub Łyk mieć dostępne wtyczki do użycia. Usprawniają one tworzenie duszków SVG. Poprzez dostarczanie każdego pliku SVG w danym katalogu, wtyczka będzie zarówno optymalizować, jak i generować wszystkie SVG w twoim katalogu z odniesieniami, które będą zawarte w świeżym nowym spriterze.

Jeśli chcesz dodać więcej ikon do ikonki, wszystko, co naprawdę musisz zrobić, to wyeksportować ikonę jako SVG i dodać ją do tego samego folderu. Stamtąd wtyczka zajmuje się czasochłonną częścią.

Niektóre dostępne wtyczki w różnych smakach: grunt-svgstore , gulp-svg-sprites , svg-sprite .

Wniosek

Podobnie jak w przypadku wszystkich rzeczy w tworzeniu stron internetowych, istnieje więcej niż jeden sposób tworzenia duszków SVG. Możesz odwoływać się do nich zewnętrznie, dołącz je przez CSS , a nawet je tworzą czuły .