Хотя он был задуман еще в конце 1990-х годов, SVG во многих отношениях является форматом файла «гадкий утенок», который стал лебедем. Плохо поддерживаемый и в значительной степени игнорируемый в течение большей части 2000-х годов, в 2017 году все современные веб-браузеры могут отображать SVG — и большинство программ векторного рисования экспортируют его.
Оказывается, SVG был единственным графическим форматом, который наиболее точно отвечает современным требованиям веб-разработки в отношении масштабируемости, отзывчивости, интерактивности, программируемости, производительности и доступности.
Итак, что такое SVG и зачем его использовать?
SVG — это векторный графический формат, основанный на XML и используемый для отображения различной графики в Интернете и других средах.
Внутренние документы SVG — это не более чем простые текстовые файлы, которые описывают линии, кривые, формы, цвета и текст. Поскольку он может быть читаем, понятен и изменен, SVG-кодом можно манипулировать с помощью CSS или JavaScript. Это дает SVG гибкость и универсальность, которые никогда не могут сравниться с традиционными PNG, GIF или JPG.
SVG — это стандарт W3C , что означает, что он может легко взаимодействовать с другими открытыми стандартными языками и технологиями, включая JavaScript, DOM, CSS и HTML. Пока W3C устанавливает глобальные отраслевые стандарты, вполне вероятно, что SVG останется стандартом де-факто для векторной графики в браузере.
Истинная ценность SVG в том, что он решает многие самые неприятные проблемы в современной веб-разработке. Давайте посмотрим, что они есть.
-
Масштабируемость и отзывчивость
Под капотом SVG использует формы, числа и координаты, а не пиксельную сетку, для визуализации графики в браузере, что делает ее независимой от разрешения и бесконечно масштабируемой. Если вы подумаете об этом, инструкции по созданию круга одинаковы, независимо от того, используете ли вы ручку или плоскость скайрайтинга — меняется только масштаб.
С SVG вы можете комбинировать различные формы, контуры и текстовые элементы для создания всех видов визуальных эффектов и быть уверенными, что они будут выглядеть четкими и четкими при любом размере.
Напротив, растровые форматы, такие как GIF, JPG и PNG, имеют фиксированные размеры, что приводит к пикселизации при масштабировании. Хотя различные методы адаптивного изображения оказались ценными для пиксельной графики, они никогда не смогут по-настоящему конкурировать со способностью SVG масштабироваться бесконечно.
-
Программируемость и интерактивность
SVG полностью редактируемый и скриптовый. Все виды анимации и взаимодействия могут быть добавлены в чертеж с помощью CSS и / или JavaScript.
-
доступность
Файлы SVG основаны на тексте и могут быть найдены и проиндексированы. Это делает их читаемыми для программ чтения с экрана, поисковых систем и других устройств. В отличие от диаграммы
-
Производительность
Одним из наиболее важных аспектов, влияющих на производительность сети, является размер используемых файлов на веб-странице. SVG-графики обычно имеют меньший размер файлов по сравнению с их растровыми графическими собратьями.
Общие случаи использования и поддержка браузера
SVG имеет лавину практических случаев использования. Давайте рассмотрим наиболее значимые из них.
-
Простые иллюстрации и диаграммы
Любой традиционный рисунок, который мог быть выполнен ручками и карандашами, должен прекрасно переводиться в формат SVG.
-
Логотипы и иконки
Логотипы и значки часто имеют одинаковую четкость и четкость в любом размере — от кнопки до рекламного щита — что делает их идеальным кандидатом для SVG. Иконки SVG более доступны и их намного легче позиционировать. Для более подробной информации смотрите Inline SVG vs Icon Fonts .
-
Анимации
Вы можете создавать привлекательные анимации и даже специальные виды анимации, включая рисование линий SVG . SVG может взаимодействовать с CSS-анимацией, а также с собственной встроенной возможностью анимации SMIL.
-
Интерактивность (диаграммы, графики, инфографика, карты)
SVG можно использовать для построения графиков и динамического обновления данных в зависимости от действий пользователя или некоторых событий — Interactive SVG Infographic , SVG Interactive Roadtrip Map .
-
Спецэффекты
Многие живые эффекты могут быть достигнуты с помощью SVG, включая изменение формы или различные липкие эффекты
-
Создание интерфейсов и приложений
SVG позволяет создавать сложные интерфейсы и включать их в HTML5, веб-приложения и многофункциональные интернет-приложения (RIA).
-
И многое другое …
Как видите, SVG используется практически везде и в бесчисленных ситуациях. Хорошей новостью является то, что поддержка SVG в браузере улучшается.
На данный момент большинство современных веб-браузеров поддерживают самые важные и основные функции SVG. На caniuse.com вы можете самостоятельно проверить текущую поддержку SVG .
Итак, теперь вы знаете «почему» SVG — давайте посмотрим на «как». В моей следующей статье мы рассмотрим лучший способ использования Adobe Illustrator для подготовки ваших файлов SVG для Интернета.