Kompresja kodu SVG

  1. Optymalizacja kodu SVG
  2. Archiwizacja SVG
  3. Automatyzacja optymalizacji

Autor: Jewgienij Ryżkow Data publikacji: 09/08/2010

Jedną z zalet plików SVG są doskonałe możliwości kompresji 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.

Materiały