Jak zmniejszyć wagę plików svg na stronie internetowej

1. Czy muszę nawet zmniejszyć rozmiar pliku svg?
2. Przygotuj svg podczas zapisywania w programie Adobe Illustrator
3. Jeszcze bardziej zmniejszamy rozmiar svg
4. Podsumowując

Wielu już zaczęło aktywnie wykorzystywać grafikę svg w układzie stron. Być może nawet wielu ludzi już wie o sposobie zmniejszenia wagi plików svg, który omówię dzisiaj. Ale nie udaję oryginalności, chcę tylko dzielić się informacjami.

Jeśli czytasz tę publikację, to już wiesz, jak osadzić plik svg w układzie. Wspomniałem o tym niedbale w artykule o svg pokolenie sprite w ilustratorze . Również w Internecie znajduje się tłumaczenie dobrego artykułu na ten temat (ale nie szukaj informacji w jednym pełnym źródle, wszystko jest lepiej znane za pomocą prób i błędów).

Czy muszę nawet zmniejszyć rozmiar pliku svg?

Niezależnie od tego, w jaki sposób iw jakim celu używasz svg w układzie, jeśli nie osadzisz kodu bezpośrednio w html, zdecydowanie musisz zmniejszyć rozmiar plików svg. Pomimo rozwoju prędkości Internetu, każdy kilo-Buitin jest wciąż na koncie (choć z innych powodów).

Najprawdopodobniej, jeśli pracujesz z grafiką svg, używasz do tego pewnego rodzaju edytora graficznego. Kiedy zapisujesz plik w svg w edytorze, zapisuje się na nim wiele niepotrzebnych informacji: różne metadane, komentarze, ukryte elementy, niektóre ustawienia itp. To z tego musisz się pozbyć podczas przygotowywania svg do internetu .

Przygotuj svg podczas zapisywania w programie Adobe Illustrator

Eksportuję svg z układu do Adobe Illustrator. Istnieje kilka ustawień, które pozwalają zmniejszyć rozmiar pliku już podczas normalnego zapisywania. Co więcej, te ustawienia pomogą zmniejszyć rozmiar generowanego kodu, jeśli umieścisz kod svg bezpośrednio w HTML!

Dla zwięzłości właśnie zrobiłem zrzut ekranu z ustawieniami:

Wybierz optymalne ustawienia osadzania SVG w układzie

Oto najważniejsze dla nas opcje:

• Podzbiór
  Wybór zależy od liczby znaków tekstowych.Jeśli znaki są nieliczne, bardziej korzystne będzie wybranie ustawienia „ Tylko używane glify ”. Spowoduje to osadzenie czcionki z literami użytymi w pliku. Ale jeśli jest dużo liter, to niewątpliwie lepiej jest wybrać „ Brak (Użyj czcionek systemowych) ”, po uprzednim przetłumaczeniu czcionki na krzywe.
• Lokalizacja obrazu
  Z reguły wybierz „ Link ”. To znacznie zmniejszy rozmiar pliku. Jednak z tą opcją musisz być ostrożny: jeśli jakiekolwiek efekty, takie jak gradient, są używane w pliku, to może nie być oczekiwanym wynikiem i będziesz musiał „osadzić” wszystkie efekty w pliku za pomocą opcji „ Osadź ”.
  Pamiętaj, że musisz odznaczyć opcję „ Zachowaj możliwości edycji programu Illustrator ” - nie zwiększa to rozmiaru pliku.
• Miejsca dziesiętne
  Dokładność zapisanego wektora. Im większa wartość, tym więcej rodzajów krzywych i punktów, a także rozmiar pliku. Z reguły większa dokładność nie jest potrzebna, ponieważ i tak nie będzie widoczna dla oka. Wybieram liczbę od 1 do 3 w zależności od sytuacji.

Możesz dowiedzieć się więcej o eksportowaniu Svg z Illustratora w oficjalna dokumentacja (tam możesz nauczyć się czegoś nowego, bardzo przydatnego artykułu).

Jeszcze bardziej zmniejszamy rozmiar svg

Ale te ustawienia nie są wystarczające, jeśli nie osadzisz kodu svg w HTML, ale „wyciągniesz” cały plik w układzie (bez względu na to, jak). Możesz jeszcze bardziej ograniczyć grafikę svg do układu!

Jest taka biblioteka svgo . Dzięki temu można zmniejszyć rozmiar pliku svg, usuwając różne metadane, komentarze itp.

Oprócz pracy z wiersza poleceń oraz w postaci różnych modułów do tworzenia projektów js, program ten ma graficzną (GUI) wersję dla Windows i Mac. Możesz go pobrać tutaj .

Używam wersji tego programu GUI. Jest niesamowicie prosty, lekki i, jak pamiętam, nie wymaga instalacji.

Interfejs jest niezwykle prosty i zwięzły: wystarczy przeciągnąć i upuścić żądany plik do okna programu, a zostanie on zmniejszony i ponownie zapisany.

Ten program zmniejszy średnio o 40% naszą grafikę svg na stronie.

Nawet przy stosunkowo niewielkich rozmiarach plików może to spowodować znaczne zmniejszenie.

Czasami ten program po prostu pomaga ... Na przykład, gdy trzeba zapisać złożone logo w svg, którego nie można już zredukować za pomocą ustawień, ale to bardzo waży.

Podsumowując

Muszę powiedzieć, że to nie jedyny sposób na optymalizację plików svg. Ale podobał mi się ten program: jest dość skuteczny i jednocześnie nie usuwa niczego dodatkowego. Mały, ale zdalny)

UPD. Jeśli jesteś programistą front-end, prawdopodobnie używasz frameworka od dłuższego czasu. Aby teraz zredukować plik svg, używam wtyczki imagemin-svgo .