Autor: Jewgienij Ryżkow Data publikacji: 09/08/2010
Jedną z zalet plików SVG są doskonałe możliwości kompresji. Aby zwiększyć wydajność, należy go przeprowadzić w dwóch etapach: optymalizacja kodu i archiwizacja.
Optymalizacja kodu SVG
Celem tego etapu jest maksymalne zredukowanie kodu: im mniejszy kod, tym łatwiejszy plik. Można to osiągnąć, przestrzegając zaleceń:
- zmniejszamy liczbę pojedynczych węzłów do maksimum:
- użyj krzywych Beziera, elips, łuków itp. aby utworzyć gładkie krzywe, zamiast zestawu krótkich odcinków prostej linii (polilinii);
- uczyń tekst tekstem zamiast rysować go złożonymi liniami;
- używamy współrzędnych względnych zamiast współrzędnych bezwzględnych (w tym przypadku osoba jest bardziej skomplikowana w czytaniu kodu);
- Wykorzystujemy możliwości SVG (gradienty, filtry) do tworzenia różnych efektów - minimum danych graficznych, aby uzyskać wynik;
- SVG umożliwia ponowne użycie tego samego elementu na ilustracji;
- SVG obsługuje dziedziczenie i grupowanie CSS. Użyj go;
- zmniejsz dokładność danych: do normalnego wyświetlania wystarczą 2-3 miejsca po przecinku;
- redukcja kolorów (na przykład #FFFFFF = #FFF);
- redukujemy szczegóły, gdy tylko jest to możliwe, bez widocznej utraty jakości obrazu;
- usunąć (lub uprościć) niewidzialne elementy (na przykład te, które nakładają się na siebie);
- użyj możliwości znacznika ścieżki dla bardziej zwartego zapisu: współrzędne względne, h i v dla pionowych i poziomych linii, s i t, aby zdefiniować kwadratowe i sześcienne krzywe Beziera.
Archiwizacja SVG
Plik SVG to zwykły plik tekstowy, który można doskonale zaprojektować. Jednym z najlepszych sposobów na to jest teraz kompresja gzip . Skompresowane pliki mogą ważyć 2-5 razy mniej niż pliki nieskompresowane.
W3C: przykłady kompresji plików SVG Nieskompresowany plik SVG Z kompresją gzip Współczynnik kompresji 12.912 2.463 81% 12.164 2.553 79% 11.613 2.617 77% 18.689 4.077 78% 13.024 2.041 84%
Skompresowany plik SVG pobiera rozszerzenie SVGZ.
Automatyzacja optymalizacji
Nawet przy dość prostych zdjęciach ręczna optymalizacja może wymagać godzin. Nie zgodziłem się z tym Yevgeny Stepanischev (bolk) który wziął ten pomysł za podstawę Jos Hirth i stworzył skrypt php do optymalizacji plików SVG z następującą listą opcji optymalizacji:
- usuń białe znaki, znaki linii i komentarze, zastąp pustą parę znaczników otwierających i zamykających krótkim odpowiednikiem;
- usuwanie atrybutów, tagów i przestrzeni nazw edytora Inkscape (które nie są używane przez przeglądarkę);
- zmniejszenie dokładności wartości atrybutu d znacznika ścieżki. Spacje są również usuwane, tam gdzie jest to dozwolone;
- usuń tagi ścieżek z pustym atrybutem d;
- optymalizacja atrybutu stylu („styl”), usuwane są niepotrzebne przestrzenie, usuwane są właściwości, których wartości są równe ich wartościom domyślnym, właściwości związane z „wypełnieniem” i „obrysem” są usuwane, jeśli ustawione są style anulujące te właściwości. Wartości kolorów, jeśli to możliwe, są zredukowane do bardziej zwartej formy;
- redukcja liczb w atrybutach - nieznaczne zera po prawej stronie są obcinane, w atrybutach czysto numerycznych zero jest kasowane od lewej do punktu („0.05000” staje się „.05”);
- usuń nieużywane atrybuty id. Jeśli na ilustracji są znaczniki <script> lub <style>, ten krok zostanie pominięty.
Program działa z linii poleceń. Składnia uruchamiania i dostępne klucze są opisane na końcu samego kodu skryptu.
Uznaliśmy za niewygodne korzystanie z linii poleceń, więc zrobiliśmy wersja przeglądarki optymalizatora SVG .
Oprócz powyższych funkcji dodano możliwość kompresji gzip.
