SVG: optymalizacja i przygotowanie plików


2 czerwca 2014 / Michał Załęcki


svg-optymalizacjaPliki SVG (Scalable Vector Graphics) w dobie wszechobecnych smartfonów i innych urządzeń o ekranach z wysokim ppi powinny być standardem, ale nadal ze świecą szukać przykładów ich zastosowania w komercyjnych produktach. Po części jest to wina mało świadomych deweloperów, nadal bardzo popularny jest mit o słabym wsparciu dla SVG. Jeżeli zależy nam na wsparciu IE8 nic(?) nie stoi na przeszkodzie by zainteresować się np. SVGeezy.

Z mojego doświadczenia wynika, że plik SVG, w zależności od tego jak bardzo jest złożony, może być zawsze zmniejszony o kilkadziesiąt procent. Dla ikony złożonej z 5-6 elementów jest to nawet 60-70%. Jak to możliwe?

(Nie)czysty SVG

Winna leży po stronie edytorów. Za przykład weźmy opensourcowy Inkscape i logo WEBroad. Ikona 60×64 w formacie Inkscape SVG to 3 850b.

Inkscape umożliwia również zapis do czystego SVG. Rozmiar takiego pliku to już 2 663b. Niby lepiej, ale jak podejrzymy źródło zobaczymy wiele zbędnego kodu. Jak się okazuje „czysty” to pojęcie względne.

Pierwszą czynnością jaką możemy zrobić to ręcznie wyczyścić taki kod. Wymagany jest jedynie atrybut xmlns dla elementu svg oraz przydatne będą również jego rozmiary oraz opcjonalnie viewBox. Istnieją jednak narzędzia, które oferują automatyczne optymalizowanie jednego lub wielu plików.

SVGO

SVGO to proste i co najważniejsze skuteczne narzędzie obsługiwane z poziomu konsoli, oparte na Node.js. Instalacja i sposób korzystania z narzędzia jest opisany w repozytorium projektu, przejdźmy do efektów.

Zoptymalizowane za pomocą SVGO logo WEBroad to już tylko 1 022b. Prawie 4-krotnie mniej niż pierwotnie! Kod taki jest jednak uciążliwy przy dalszej pracy np. podczas animacji na poszczególnych ścieżkach.

Korzystając z opcji –pretty możemy wygenerować „ładnie” sformatowany plik o niewiele większym rozmiarze 1 079b.

Iconizr

Iconizr to bardziej rozbudowane narzędzie pozwalające m. in. na łączenie plików svg i zmniejszenie w ten sposób ilości zapytań do serwera. Iconizr napisany został w PHP i poza dostępem z konsoli oferuje możliwość optymalizacji plików SVG z poziomu przeglądarki. Poza samym plikiem SVG otrzymujemy również kod CSS/SCSS. Efekt jest co najmniej zadowalający.

iconizr

Plik SVG:

Plik CSS:

Jeżeli chodzi o samo wykorzystanie plików SVG to Chris Coyier w artykule Using SVG przedstawił już większość sposobów pracy z grafiką wektorową. Jeżeli znacie jakieś ciekawe przykłady zastosowania SVG to dajcie nam znać w komentarzach.


Tagi:


4 odpowiedzi na “SVG: optymalizacja i przygotowanie plików”

  1. Comandeer pisze:

    SVG powinny szybko wyprzeć icon fonty, gdyż są lepsze w prawie wszystkich aspektach. I to jest najlepszy sposób użycia SVG obecnie ;)

    Co do SVGO – nie ma sensu się bawić konsolą za każdym razem. Są odpowiednie pluginy dla grunta i gulpa, więc dorzuca się takie coś jako ostatni krok w build toolu i leci samo ;) a przy grunt-watch to naprawdę leci samo :D

    co do SVG: http://www.smashingmagazine.com/2014/05/26/love-generating-svg-javascript-move-to-server/

    • Ikony SVG może wyprą fonty, a może nie. Może są lepsze w wielu aspektach, ale nie o wiele lepsze. Prawdziwa różnica wychodzi przy animacjach.

      Co do grunta. Trochę jak: po co użyć packi na muchy, BAZOOKA! Wszyscy używają OSXa, Windowsa lub Linuksa, ale mały procent czytelników używa grunta. Z SVGO z łatwością skorzysta każdy. Nieważne czy programista czy grafik. Ilu znasz grafików używających grunta? Ja żadnego.

      • Comandeer pisze:

        Svg są lepsze pod prawie każdym asoektem, poczynając od dostępności i semantyki a kończąc na możliwościach ostylowania. Jedyny mankament to stare IE.
        co do grunta: a po kiego grzyba grafik ma z niego korzystać? On robi grafikę i mi ją dostarcza. I to juz moja broszka, żeby ta grafika nie zarżnęła mamuta ;)

  2. Cała nasza strona jest oparta na SVG. Bitmapowy jest tylko 1 element serwisu. Jeden :)

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *