SVG - будущее изображений в интернете

SVG - будущее изображений в интернете

Традиционные растровые форматы изображений, такие как GIF, PNG, JPG, были неотъемлемой частью работы в сети долгое время, пока не появились устройства с большой плотностью пикселей. Если проблему размера экрана можно решить адаптивностью, то как справиться с различной плотностью пикселей? Ответ: векторная графика.

SVG или Scalable Vector Graphics является форматом изображений, использующим разметку, основанную на XML и хранимую в удобочитаемом коде, который может быть использован браузером или графическими программами. Проще говоря, SVG – это обычный текстовый файл, с кучей разметки внутри.

Что же хорошего есть в SVG, чего нет в традиционных форматах изображений:

  • Отзывчивость. SVG можно масштабировать как угодно и сколько угодно, он не будет получаться неровным.
  • Меньше HTTP запросов. Со встроенной поддержкой SVG в браузере, можно полностью избежать использования внешних изображений.
  • Стилизованность и «Скриптованность». Разметка SVG может быть доступна из CSS, с его помощью, можно манипулировать стилем и размером изображения. Можно также генерировать SVG и добавлять его в DOM динамически.
  • Анимированность. Можно применять CSS или стандартную SVG анимацию, чтобы делать удивительные вещи.
  • Маленький размер. Поскольку SVG – это просто куча кода, он может быть сжат до смехотворных размеров.

Прошли те времена, когда можно было смириться с 72dpi в изображениях на своем сайте, и быть уверенным, что они будут выглядеть четко на всех дисплеях. Сейчас нужно, чтобы все выглядело резко и красиво на экранах любой пиксельной плотности, но при этом имело небольшой размер, для сохранения производительности. SVG может решить эту проблему.

Добавить комментарий

Нам важно знать ваше мнение. Оставьте свой отзыв или ответ

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent

Комментариев 0

Новые обсуждения на Форуме