Навигация по сайту

Популярные статьи

Увлекательный поход по Крыму

Мы предлагаем вам увлекательный поход по живописным местам горного Крыма, полюбоваться красотами каньонов и горных водопадов, послушать журчание горных рек и пение птиц, насладиться экзотическими пейзажами

Отдых в Карпатах

Активный отдых - это очень важная часть жизни абсолютно любого человека, который способен обогащать и закалять человека как напрямую физически, улучшая форму, так и духовно, психологически, морально,

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:

Wielu już zaczęło aktywnie wykorzystywać grafikę svg w układzie stron

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.

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 .

Czy muszę nawet zmniejszyć rozmiar pliku svg?
Czy muszę nawet zmniejszyć rozmiar pliku svg?