04: Dlaczego SVG? Mały. - CSS-Tricks

Anonim

Rozmiar pliku SVG zależy od tego, jak jest on złożony, a nie od tego, jak „duży” jest. Pamiętaj, że SVG tak naprawdę nie obchodzi, w jakim rozmiarze są renderowane, są elastyczne i ostre bez względu na wszystko.

Wyobraź sobie obraz rastrowy 100 × 100 pikseli. To 10 000 pikseli informacji. SVG to tylko instrukcje, jak coś narysować, więc jeśli te instrukcje są wystarczająco proste, mogą być nieco mniejsze niż konieczność przechowywania danych w każdym pikselu. Jest to trochę bardziej złożone, ponieważ kompresja wchodzi w grę po obu stronach, ale ogólna idea istnieje.

Nie jest to jednak tak proste, jak „SVG jest mniejsze” - i nie ma ustalonej formuły decydującej o tym, który format jest zawsze prawidłowy. Czasami jest to bardzo oczywiste. Solidny kształt logo Apple? Wektor będzie mniejszy dla prawie każdego rozmiaru. Ilustracja dębu z dużą ilością liści? Wektor może być zbyt skomplikowany, a format obrazu rastrowego będzie mniejszy.

Zdjęcie z prezentacji Todda Parkera.

Konieczne może być po prostu zapisanie kopii w obie strony, zoptymalizowanie obu i przetestowanie rozmiaru pliku.

SVG jest zazwyczaj świetne do takich rzeczy, jak:

  • Logo
  • Ikony
  • Proste ilustracje
  • Wykresy
  • Mapy

Założę się, że masz już całkiem niezłą intuicję, jaki rodzaj grafiki ma sens jako wektor.

Akta

  • 04-icon_62532.png.webp
  • 04-icon_62532.svg