SVG to format obrazu wektorowego oparty na XML. Ma wielkie zalety, przede wszystkim jest lekki. Ponieważ SVG jest formatem tekstowym, można go przeglądać i modyfikować za pomocą prostego edytora tekstu, a zastosowanie kompresji GZIP daje doskonałe wyniki.
Bardzo ważne jest, aby strona internetowa zapewniała zasoby, które są tak lekkie, jak to możliwe, zwłaszcza na urządzeniach mobilnych, gdzie przepustowość może być bardzo ograniczona. Chcesz zoptymalizować pliki SVG, aby załadować i wyświetlić aplikację tak szybko, jak to możliwe.
Ten artykuł pokaże, jak używać dedykowanych narzędzi do optymalizacji obrazów SVG. Dowiesz się również, jak działa znacznik, abyś mógł zrobić więcej, aby stworzyć najlżejsze możliwe obrazy.
Przedstawiamy svgo
Optymalizacja SVG jest bardzo podobna do minimalizowania CSS lub innych formatów tekstowych, takich jak JavaScript lub HTML. Chodzi głównie o usunięcie niepotrzebnych białych znaków i zbędnych znaków.
Narzędzie, które polecam zmniejszyć rozmiar obrazów SVG, to svgo . Jest napisany dla node.js. Aby go zainstalować, po prostu wykonaj:
W swojej podstawowej formie użyjesz linii poleceń w następujący sposób:
$ svgo --input img /graph.svg --output img /optimised-graph.svg
$ svgo --input img / graph.svg --output img / optimized-graph.svg
Upewnij się, że podałeś parametr --output, jeśli chcesz zachować oryginalny obraz. W przeciwnym razie svgo zastąpi ją wersją zoptymalizowaną.
svgo zastosuje kilka zmian w oryginalnym pliku - usuwa niepotrzebne komentarze, tagi i atrybuty, zmniejszając precyzję liczb w definicjach ścieżek lub atrybutów sortowania dla lepszej kompresji GZIP.
To działa bez niespodzianek dla prostych obrazów. Jednak w bardziej złożonych przypadkach manipulacja obrazem może spowodować zniekształcenie pliku.
wtyczki svgo
svgo jest bardzo modułowe dzięki architekturze opartej na wtyczkach.
Podczas optymalizacji złożonych obrazów zauważyłem, że główne problemy są spowodowane przez dwie wtyczki svgo:
- convertPathData
- mergePaths
Dezaktywacja zapewni w większości przypadków poprawny wynik:
$ svgo --disable = convertPathData --disable = mergePaths -i img /a.svg
$ svgo --disable = convertPathData --disable = mergePaths -i img / a.svg
convertPathData konwertuje dane ścieżki za pomocą względnych i skrótowych notacji. Niestety, niektóre środowiska nie rozpoznają w pełni tej składni, a otrzymasz coś takiego:
Zrzut ekranu Gnome Image Viewer wyświetlający oryginalny obraz SVG (po lewej) i wersję zoptymalizowaną przez svgo on (po prawej)
Pamiętaj, że zoptymalizowany obraz będzie wyświetlany poprawnie we wszystkich przeglądarkach. Więc nadal chcesz używać tej wtyczki.
Inna wtyczka, która może powodować problemy - mergePaths - połączy kształty tego samego stylu, aby zmniejszyć liczbę znaczników <path> w źródle. Może to jednak powodować problemy, jeśli dwie ścieżki nakładają się na siebie.
W obrazku po prawej stronie zwróć uwagę na różnice w renderowaniu wokół szyi i dłoni postaci, a także zwróć uwagę na logo Twittera. Widok konspektu pokazuje 3 nakładające się ścieżki, które tworzą głowę postaci.
Moją sugestią jest, aby najpierw spróbować svgo z aktywowanymi wszystkimi wtyczkami, a następnie, jeśli coś jest nie tak, dezaktywuj dwa wymienione powyżej.
Jeśli wynik jest nadal bardzo różny od oryginalnego obrazu, musisz dezaktywować wtyczki pojedynczo, aby wykryć wtyczkę, która powoduje problem. Oto lista wtyczki svgo .
Optymalizacja jeszcze bardziej
svgo to świetne narzędzie, ale w niektórych szczególnych przypadkach będziesz chciał jeszcze bardziej skompresować swoje obrazy SVG. Aby to zrobić, musisz zagłębić się w format pliku i wykonać kilka ręcznych optymalizacji.
W takich przypadkach moim ulubionym narzędziem jest Inkscape : jest darmowy, otwarty i dostępny na większości platform.
Jeśli chcesz użyć wtyczki mergePaths svgo, musisz połączyć nakładające się ścieżki. Oto jak to zrobić:
Otwórz swój obraz w Inkscape i zidentyfikuj ścieżkę w tym samym stylu (wypełnienie i obrys). Wybierz je wszystkie (zachowaj wciśnięty klawisz Shift w celu wielokrotnego wyboru). Kliknij menu Ścieżka i wybierz opcję Unia. Skończyłeś - wszystkie trzy ścieżki zostały połączone w jedną.
Trzy różne ścieżki, które tworzą głowę postaci, są scalane, jak pokazano w widoku konspektu po prawej stronie.
Powtórz tę operację dla wszystkich ścieżek w tym samym stylu, które nakładają się, a następnie możesz ponownie użyć svgo, zachowując wtyczkę mergePaths.
Istnieją różne rodzaje optymalizacji, które można zastosować ręcznie:
- Konwertuj obrysy na ścieżki, aby można je było łączyć ze ścieżkami o podobnym stylu.
- Wytnij ścieżki ręcznie, aby uniknąć używania ścieżki klipu.
- Wyklucz ścieżkę pod spodem z nakładającej się ścieżki i połącz z podobną ścieżką, aby uniknąć problemów z warstwą. (Na obrazku powyżej zobacz włosy postaci - boczna ścieżka włosów jest pod jego głową, ale górne włosy są nad nią - więc nie możesz połączyć 3 ścieżek włosów tak jak jest).
Uwagi końcowe
Te ręczne optymalizacje mogą zająć dużo czasu na skromne wyniki, więc pomyśl dwa razy, zanim zaczniesz!
Dobrą zasadą przy optymalizacji obrazów SVG jest upewnienie się, że końcowy plik ma tylko jedną ścieżkę na styl (ten sam styl wypełnienia i obrysu) i nie używa tagów <g> do grupowania ścieżki do obiektów.
W Firefox OS używamy czcionki ikony, ikony gaia , wygenerowany z glifów SVG. Zauważyłem, że ich optymalizacja zaowocowała znacznie lżejszym plikiem czcionki, bez różnic wizualnych.
Niezależnie od tego, czy używasz SVG do osadzania obrazów w aplikacji, czy do tworzenia pliku czcionki, zawsze pamiętaj o optymalizacji. Sprawi, że użytkownicy będą szczęśliwsi!
Guillaume pracuje w branży internetowej od ponad dziesięciu lat. Pasjonuje się technologiami internetowymi i regularnie uczestniczy w projektach open source, o których pisze na swoim blog techniczny . Fascynują go także gry wideo, animacja i, jako japoński mówca, języki obce.
Więcej artykułów Guillaume Cedric Marty…
