04: Почему именно SVG? Маленький. - CSS-хитрости

Anonim

Размер файла SVG зависит от его сложности, а не от того, насколько он «большой». Помните, SVG на самом деле не волнует, в каком размере они отображаются, они гибкие и четкие, несмотря ни на что.

Представьте себе растровое изображение размером 100 × 100 пикселей. Это 10 000 пикселей информации. SVG - это просто инструкции о том, как что-то нарисовать, поэтому, если эти инструкции достаточно просты, они могут быть немного меньше, чем необходимость хранить данные в каждом пикселе. Это немного сложнее, поскольку сжатие задействовано с обеих сторон, но общая идея присутствует.

Это не так просто, как «SVG меньше» - и не существует формулы для решения, какой формат использовать, который всегда правильный. Иногда это очень очевидно. Сплошная форма логотипа Apple? Вектор будет меньше практически для любого размера. Иллюстрация дуба с большим количеством листьев? Вектор может быть слишком сложным, а формат растрового изображения будет меньше.

Изображение из презентации Тодда Паркера.

Возможно, вам просто придется сохранить копию в обоих направлениях, оптимизировать оба и проверить размер файла.

SVG обычно отлично подходит для таких вещей, как:

  • Логотипы
  • Иконки
  • Простые иллюстрации
  • Диаграммы
  • Карты

Бьюсь об заклад, у вас уже есть довольно хорошая интуиция в отношении того, какую графику целесообразно использовать в векторе.

Файлы

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