формат svg что это такое чем открыть
Как работать с форматом SVG: руководство для начинающих веб-разработчиков
Файлы в формате SVG «лёгкие» и масштабируемые, а также их можно модифицировать через код. Они обеспечивают высокое качество изображений независимо от размера экрана. С ними можно работать как с обычными изображениями, а также использовать инлайн в HTML. Подробнее о преимуществах формата в статье.
Зачем использовать SVG
Если вам нужны чёткие, адаптивные или анимированные элементы интерфейса, иконки, логотипы, векторные изображения, стоит подумать об использовании формата SVG. Ниже перечислены его основные возможности и преимущества.
Масштабирование изображения с сохранением качества pixel perfect
При использовании формата PNG или растровых изображений разработчики ограничены пикселями. Масштабирование картинки снижает её качество. Поэтому приходится использовать несколько разных фото для девайсов с разным разрешением экрана.
Изображения в формате SVG сохраняют качество при масштабировании, так как они нарисованы с помощью кода, а не с помощью пикселей.
Сравнение качества растровых и векторных изображений
Возможность модификации
Изображения в формате SVG можно анимировать или стилизовать с помощью CSS. Вы можете изменить цвета, размеры элементов, шрифты и так далее. Элементы векторных изображений можно делать адаптивными.
Небольшой «вес» файлов
Изображения в формате PNG становятся очень «тяжёлыми», когда вы используете высокое разрешение. Это негативно влияет на скорость загрузки страницы, что в свою очередь может ухудшить результаты сайта в поисковой выдаче.
Файлы в формате JPG чуть «легче» картинок в PNG, но всё равно они слишком «тяжёлые». А изображения SVG представляют собой код, поэтому они «весят» очень мало. Поэтому смело используйте этот формат для создания иконок, логотипов и других элементов интерфейса.
Доступность
Если SVG-изображения содержат текст, поисковики могут их индексировать и выдавать в ответ на запросы пользователей. Скринридеры, которые используют слабовидящие и слепые пользователи, тоже поддерживают SVG. Это обеспечивает доступность файлов этого формата для всех посетителей сайта.
Использование SVG: распространённые практики
Векторные изображения долго были непопулярными, так как не все браузеры их поддерживали. В настоящее время эта проблема решена. Поэтому формат активно применяется для решения задач веб-разработки. Наиболее популярные кейсы использования представлены ниже.
Логотипы и иконки в SVG
Логотипы и иконки должны сохранять качество на экранах с любым разрешением. Чёткость нужна всем элементам интерфейса сайта: от маленькой кнопки до экранной заставки.
Использование SVG обеспечивает разработчикам контроль над каждой линией, формой и элементом изображения. Также формат облегчает позиционирование элемента и позволяет манипулировать его элементами.
Инфографика
Элементы SVG можно динамически обновлять в зависимости от действий пользователей или изменений данных. Поэтому SVG — идеальный вариант для создания интерактивных карт и инфографики.
Визуальные эффекты
С помощью SVG удобно делать разные визуальные эффекты, например, изменения формы элемента или превращение одного элемента в другой. К примеру, можно менять форму букв или трансформировать один логотип в другой.
Анимация
SVG можно использовать для создания CSS-анимации, поэтому фронтенд-разработчикам не придётся изучать дополнительные техники. Также можно воспользоваться SMIL SVG — инструментом анимации векторных изображений. SMIL обеспечивает разработчикам даже больше возможностей, чем обычная CSS-анимация.
Иллюстрации и рисунки
Обычные рисунки и иллюстрации, если они не слишком сложные, легко трансформировать в SVG. Также это практически идеальный формат для скетчей, схем, например, для иллюстраций, схематически показывающих принцип работы какого-то механизма.
Интерфейсы и приложения
SVG используются для создания сложных интерфейсов, которые интегрируются с насыщенными интернет-приложениями (RIA, rich internet application). Благодаря свойствам формата элементы интерфейса получаются лёгкими, при необходимости анимированными и привлекательными.
Далее речь пойдёт о том, как правильно добавлять файлы SVG на сайт.
Изучайте вёрстку на Хекслете В рамках профессии «Верстальщик» вы изучите HTML5 и CSS3, научитесь пользоваться Flex, Grid, Sass, Bootstrap. В процессе обучения сверстаете несколько полноценных лендингов и добавите их в портфолио. Базовые курсы в профессии доступны бесплатно.
Использование SVG в HTML и CSS
Файлы в формате SVG можно добавлять на страницы сайта средствами HTML и CSS.
Тег img
Первый способ — URL изображения можно указать в атрибуте src тега img. В этом случае вы работает с форматом так же, как с картинками jpg, png и так далее.
Если вы добавляете изображение через тег img, его можно стилизовать с помощью CSS. Но вы не можете манипулировать элементами изображения с помощью JavaScript и внешних стилей. При этом можно использовать CSS инлайн для изменения кода SVG.
Использование SVG в CSS
Изображения в формате SVG можно указывать в свойстве background-image, как фото в других форматах. Ниже пример кода.
Этот способ сохраняет все преимущества векторных изображений, включая высокую четкость на экранах с любым разрешением. Также этот способ позволяет масштабировать, повторять и позиционировать изображения.
Инлайн SVG в HTML
Файл SVG можно открыть в любом текстовом редакторе, скопировать код и добавить его в HTML-разметку страницы. Это называется использованием SVG инлайн. Пример ниже.
Такой подход уменьшает количество http-запросов и сокращает время загрузки страницы. В тегах можно указывать классы и id и использовать их для изменения стилей элемента с помощью CSS.
Использование SVG в формате кода
В SVG-файлах используется основанный на XML язык, который описывает векторные изображения. Как и HTML, это язык разметки. Но код SVG позволяет манипулировать элементами, например, применять к ним эффекты.
Код SVG можно добавлять в HTML-разметку страницы или писать его в отдельных файлах. Ниже пример создания окружности и прямоугольника с помощью SVG.
Подробнее о работе с простыми фигурами ниже.
Рисуем с помощью SVG: круг
Чтобы нарисовать круг, необходимо указать три атрибута:
Код, с помощью которого можно нарисовать круг, можно посмотреть ниже. Цвет линии и фона можно указывать инлайн или отдельно.
Круг нарисован с использованием обсуждаемого формата
Рисуем с помощью SVG: прямоугольник
Создание прямоугольников с помощью SVG похоже на рисование окружностей. Достаточно указать координаты центра по осям x и y, а также высоту и ширину для определения размера. Пример кода ниже.
Прямоугольник нарисован с помощью SVG
Рисуем с помощью SVG: линия
Чтобы нарисовать линию, нужно указать координаты по осям x и y двух точек. Также можно указать цвет и толщину линии. Код ниже наверняка выглядит понятнее объяснения словами.
Рисуем с помощью SVG: звезда
С помощью SVG можно рисовать звёзды и другие многоугольники. Для этого достаточно указать координаты точек углов фигуры. Пример кода ниже.
Сложный многоугольник в формате SVG
Рисуем с помощью SVG: пути
С помощью элемента можно рисовать ломаные кривые. Они позволяют создавать объекты разной формы. С помощью атрибута d определяется путь или координаты ломаной линии. Команда M используется для абсолютного позиционирования, а m — для относительного. С помощью команды L определяются координаты новой точки.
Вот пример использования path:
А это пример нескольких линий, созданных с помощью path:
Рисуем с помощью SVG: кривые
Для рисования кривой линии используется команда C. В примере ниже определяются начало кривой, точки смещения и конец кривой.
С помощью команды S можно объединять кривые и создавать сложные формы.
Читайте также Когда роботы заменят верстальщиков на рынке труда: большая обзорная статья о профессии с комментариями экспертов.
Как работать с текстом с помощью SVG
Формат SVG позволяет работать с текстом. Для этого применяется тег
Обычный текст создан с помощью SVG
С помощью свойства stroke можно задать цвет шрифта. Позиция текста на странице определяется координатами x и y. В свойствах stroke и fill можно использовать градиенты.
Как управлять свойствами шрифта с помощью svg
SVG позволяет управлять следующими свойствами шрифта:
С помощью тега можно выбрать одно или несколько слов в тексте и изменить их свойства.
Также SVG позволяет переворачивать текст, менять цвет линии и заполнения букв и выполнять другие трансформации. Ниже пример создания контура текста, написанного справа налево. Последнее определено с помощью свойств direction и unicode-bidi.
можно связывать текст с путями. Это делается с помощью атрибута xlink:href. Пример кода ниже.
Как использовать CSS в SVG
Код CSS можно указывать инлайн в коде SVG. Смотрите пример.
Также можно писать CSS в отдельных файлах и применять стили к элементам SVG. Например, в SVG можно указать класс.
В CSS можно работать с этим классом.
Вместо заключения: как дела с SVG 2.0
SVG 2.0 активно разрабатывается. Продукт находится в стадии предварительной версии (Candidate Recommendation). Браузеры не полностью поддерживают SVG 2.0. В новой версии добавлены некоторые возможности HTML 5 и WOFF (web open font format). Следить за стадиями разработки SVG 2.0 можно на сайте W3C.
Адаптированный перевод статьи All you need to know about SVG on the web by Richard Mattka. Мнение автора оригинальной публикации может не совпадать с мнением администрации «Хекслета».
Никогда не останавливайтесь: В программировании говорят, что нужно постоянно учиться даже для того, чтобы просто находиться на месте. Развивайтесь с нами — на Хекслете есть сотни курсов по разработке на разных языках и технологиях
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Формат svg, что это такое? Где он используется и как его открыть
Формат svg, что это? В данной статье разберем определение формата. Также рассмотрим, где используется формат SVG, как его открыть для просмотра и конвертировать в другие форматы.
Формат svg, что это? Текстовый формат и SVG графика
Здравствуйте, друзья! В Интернете есть много форматов, которые хранят в себе медиа-файлы. Сегодня будем говорить о формате SVG и рассматривать вопрос, формат svg, что это? Ведь многие новички еще не знают, что это за формат и как с ним работают.
Итак, SVG формат – это масштабируемая векторная графика. Информация из Википедии. Простыми словами это файл языковой разметки XML, который хранит растровые изображения (скрин 1).
Файлы в формате SVG состоят из текстового формата, который описывает векторную графику с помощью кода (скрин 2).
Допустим, есть картинка в формате СВГ. На ней изображается лес и люди гулящие по лесу. Данный формат хранит эту картинку и вместе с тем описывает ее через программный код. То есть, именно то, что сохранено в растровом формате. Растровые картинки имеют такие форматы, как Jpg, Png, tiff и другие.
Таким образом, SVG изображение можно оптимизировать для своего сайта или блога, чтобы картинка продвигалась, например, через поиск. Данный формат не занимает много места на сайтах. Кроме того, SVG легко поддается редактированию.
Ниже в статье мы покажем, где использовать формат SVG. Будут рассмотрены преимущества и недостатки формата, сделаем конвертацию данного формата в другой.
Где используется формат svg
Формат SVG используется во многих отраслях деятельности Интернета аналогично растровым форматам. Рассмотрим примеры использования формата:
Кроме того, он позволяет создавать рисунки и разные фигуры. Данный процесс происходит через код языковой разметки XML.
Чем открыть формат svg
Итак, SVG формат нельзя открыть в стандартной программе Windows для просмотра фотографий. Для его открытия используем проверенные программы:
Данных программ вам хватит, чтобы формат SVG успешно открылся на компьютере. Рассмотрим пример открытия формата в браузере Яндекс и программой IrfanView. Запускайте браузер. Далее удерживаете левой кнопкой мыши формат файла SVG и переносите файл в браузер. После этого, в браузере раскроется изображение для просмотра.
Формат SVG открывается в программе IrfanView так же просто, как и в других утилитах. Скачиваем утилиту с официального сайта «irfanview.com» и устанавливаем на компьютер. Далее запускаем программу. Она на английском языке, но в ней разберется каждый пользователь компьютера. Жмите кнопку вверху «File» далее «Open», чтобы загрузить SVG в программу (скрин 3).
В окне должна появится картинка, которая была сохранена в SVG. К этой программе необходимо устанавливать специальный плагин для поддержки просмотра СВГ формата. Скачать плагин можно здесь «cadsofttools.ru/products/plugins-for-3d-party-programs/». Данная программа не нагружает компьютер лишними файлами.
Преимущества svg формата и его недостатки
В любом формате файлов и у SVG, есть преимущества и недостатки. Разберем плюсы СВГ:
Из недостатков выделяем:
Как видите, минусов у СВГ мало. Его могут использовать многие веб-мастера и блогеры.
Конвертация svg в другие форматы
Чтобы конвертировать svg файлы в другие форматы, используйте онлайн-конвертеры:
Заходите, например, на первый конвертер, который указан выше. На конвертере выберите формат, в который нужно перевести файл. Допустим в Png. Перетаскиваете клавишей мыши файл SVG на сервис и отпускаете (скрин 4).
После чего нажмите «Конвертировать», чтобы получить файл другого формата.
Когда сервис преобразует файл, кликните по кнопке «Скачать» и изображение загрузится на ваш компьютер.
Заключение
В статье было рассказано о том, формат svg, что это. Мы рассмотрели как открыть данный формат, как с ним работают. Также показали процесс конвертации формата. Использование этого формата даст вам явное преимущество – вы сможете забыть о длительной загрузке страниц вашего сайта или блога. Скорость загрузки ресурса увеличится во много раз.
Что такое файлы SVG, и какими программами они открываются
Форматов для изображений существует очень много, но все они делятся на два больших класса – растровые и векторные. Первые в основном используются для различной сложной и детальной графики, например, фотографии. В них каждый пиксель – мельчайший элемент – может иметь собственный цвет, и в файле, в общем, просто сохраняются цвета для каждой точки изображения. Конечно, используются разные методы, чтобы сжать размер информации, и от этого происходит много растровых форматов – BMP, PNG, IPG и прочие. Обычно наилучшую эффективность показывает IPG, так как получается небольшой файл при достаточно хорошей детализации. Но у него есть недостаток – потеря информации при сжатии. Поэтому, если уменьшать размер файла, происходит ухудшение изображения.
Да и при увеличении таких фотографий становятся видны пиксели. Векторные форматы работают совсем по другому принципу. Они используют линии, отрезки, фигуры, которые описываются математическими формулами. Любое пространство, которое ими ограничивается, можно залить цветом или градиентом. В результате получается изображение, не привязанное к конкретным размерам – его можно легко сжать или растянуть до огромных размеров без потери качества. Одним из таких векторных форматов и является SVG. И он становится всё популярнее, особенно в среде веб-разработки.
Общее описание расширения
Тип файла SVG – сокращение от Scalable Vector Graphics, то есть масштабируемая векторная графика. Для описания изображения используются языки разметки VML и PGML. По сути, это текстовый документ, в котором для каждой фигуры описаны координаты вершин и линий, проходящих через них, а также цвета разных элементов. Первая версия этого формата вышла в 2001 году, и сейчас активно разрабатывается вторая версия. То есть он является перспективным и развивается. Одно из достоинств – малый размер файла, в котором могут быть сохранены довольно сложные рисунки. Поэтому сейчас всё больше иконок, пиктограмм, логотипов и других элементов сайтов используется именно в этом формате, а не в растровых. Это ускоряет загрузку сайта. К уникальным возможностям формата SVG относятся интерактивность и анимация. Первая позволяет картинке реагировать на действия пользователя, например, на клик мышкой или перемещение каких-то элементов. Анимация позволяет создавать довольно сложные сценарии. Всё вместе позволяет создавать очень красивые и живые графические элементы для сайтов. Их даже можно встраивать в обычные растровые изображения в форматах PNG, IPG и прочих.
Чем открыть файл SVG
В Интернете можно найти множество таких картинок на фотостоках, в том числе бесплатных. Создаются они в графических редакторах Adobe Photoshop, Illustrator, Corel Draw и некоторых других. Но возникает вопрос – чем открыть формат SVG. Ведь встроенные средства Windows не показывают, какие картинки в них содержатся. Хотя редактировать SVG можно даже в текстовом редакторе, например, в Блокноте, ведь это текстовый документ, но для этого нужно иметь немалые знания в языках разметки. Открыть файл SVG можно либо в программе, в которой он создавался, либо в каком-нибудь другом графическом редакторе, поддерживающем этот формат.
Существует довольно приличный перечень программ и сервисов, позволяющих работать с файлами формата SVG.
Также важно отметить, что вне зависимости от используемого программного обеспечения, SVG файлы с лёгкостью открываются через популярные браузеры. Именно веб-обозреватели можно применять в качестве инструментов для открытия таких документов.
Если же говорить непосредственно о программных решениях и специальных сервисах, работающих в режиме онлайн, то тут можно привести обширный список возможных вариантов.
Для удобства они были разделены на несколько категорий.
Для ОС Windows и Mac OS
Нельзя отрицать тот факт, что подавляющее большинство компьютеров и ноутбуков работают именно на базе операционных систем, разработанных компанией Microsoft.
Самой актуальной выступает ОС Windows 10, но многие юзеры продолжают пользоваться Windows 8, Windows 7 и более старыми версиями операционки.
Если и у вас установлена одна из ОС серии Windows, для работы с файлами формата SVG можно воспользоваться следующими программами:
Для ОС Linux
Операционная система Linux по уровню своего распространения уступает лидерам в лице Windows и Mac OS.
Но ОС всё равно является востребованной, в результате чего разработчики программного обеспечения считают необходимым выпускать ПО для этой платформы.
Что же касается файлов формата SVG, то здесь их можно открыть с помощью таких рассмотренных уже инструментов как Inkscape, а также GIMP.
Но ещё пользователям Linux доступна такая интересная программная разработка как KolourPaint.
Простой, но очень удобный редактор, позволяющий работать с графикой, включая векторную и растровую. Подойдёт даже новичкам.
Да, по меркам современных версий некоторых программ этот инструмент выглядит устаревшим. Но в плане функциональных возможностей к нему нет никаких существенных претензий.
Главное преимущество заключается в бесплатности этой программы. Ничего платить за использование широких возможностей софта не придётся.
Онлайн сервисы
Отдельно стоит взглянуть на несколько онлайн сервисов, с помощью которых можно открывать файлы формата SVG.
К их числу относятся такие онлайн инструменты:
Перечисленные программы, сервисы и приложения наглядно показывают, что открывать и редактировать файлы формата SVG можно с помощью большого числа различных решений.
Вопрос лишь в том, что нужно конкретному пользователю.
Конечно, этими названиями список программ для работы с векторной графикой не исчерпывается. Их очень много, в том числе и самый популярный редактор Adobe Photoshop может сохранять изображения как векторы и имеет плагин для их открытия. Не стоит забывать и про популярнейший редактор векторной графики Corel Draw, который можно назвать самым популярным.
Что ещё может вызывать проблемы с файлом
Обычными средствами Windows, да и многих других операционных систем, файлы SVG не открываются. Чтобы видеть их содержимое и тем более редактировать их, нужно установить любой графический редактор с поддержкой этого формата.
Что дизайнеру нужно знать о SVG: за и против
Ранее в нашем блоге мы поднимали тему создания качественных веб-интерфейсов, в частности в одном из предыдущих топиков рассматривался вопрос правильного использования анимаций. В сегодняшнем материале речь пойдёт о технологии SVG, принципах работы с этой технологией, её плюсах и минусах. Кроме того, мы поинтересовались у отечественных дизайнеров, применяют ли они SVG, и если нет, то почему.
Очень коротко: что такое SVG
SVG (Scalable Vector Graphics) — язык разметки векторной графики, созданный W3C, подмножество языка XML. Предназначен для описания векторной и смешанной (векторно-растровой) двухмерной графики, поддерживает анимацию и интерактивность. В 2001 году вышла версия 1.0, в 2011 — версия 1.1, актуальная ныне. Поддержка браузерами хорошая, но есть нюансы в IE, пикселизация при увеличении в Opera Mini и Opera Mobile 12.1.
Плюсы и сложности применения SVG
Прежде чем начать рассматривать вопрос о том, как дизайнеры могут использовать в своей работе SVG, следует сделать небольшое логическое отступление и поговорить об этой профессии подробнее. На наш взгляд, сложившееся в ИТ-отрасли разделение на веб-дизайнеров и верстальщиков, не всегда соответствует реалиям создания веб-проектов.
Создать не просто красивый, но действительно хороший дизайн веб-страницы без понимания того, как эта страница будет загружаться, показываться в браузере, адаптироваться к размерам вьюпорта, меняться при модификации контента, просто невозможно. Исходя из этого, можно сказать, что веб-дизайнер — это техническая специальность (возможно, суть этой работы лучше передаёт термин «веб-инженер»), по большей части подразумевающая использование логики и знаний, и лишь малой толикой которой является художественное творчество. Иными словами, плох тот веб-дизайнер, который совсем не умеет верстать.
Разобравшись с тем, кем на самом деле является современный дизайнер, мы можем переходить к обсуждению плюсов, которые такие специалисты могут извлечь из использования технологии SVG. Вкратце, её применение помогает увеличить скорость и качество работы: дизайнеру приходится выполнять меньше действий самому, что уменьшает затраты времени на различных этапах создания проекта.
Рассмотрим список плюсов SVG подробнее:
SVG легко модифицируется (причём, как в графическом редакторе, так и на самой странице средствами CSS). Поменять расположение, форму, размер, пропорции, цвет, заливку и все прочие свойства составляющих частей изображения проще, чем в случае с растровой графикой. При работе с растром придётся хранить «исходник» в формате со слоями, все изменения делать в нём, экспортировать. С SVG обычно необходимости в «исходнике» просто нет.
Для экранов с повышенной плотностью пикселей достаточно одного изображения. В случае с растровой графикой на данный момент (весна 2015 г.) нужно, минимум, три (!) версии картинки: 100% макетного размера, 200% и 300%. В случае использования SVG, достаточно одной версии — как и для любого векторного формата, пиксели, нужные для показа изображения, «возникают» непосредственно перед показом, исходя из необходимого пиксельного размера.
SVG быстро загружается. Да-да, ведь, как мы выяснили выше, дизайнеры должны думать и о скорости загрузки страницы тоже, ведь чем больше времени проходит от отправки запроса до показа страницы, тем ниже конверсия проекта. Во-первых, SVG-файлы, как правило, имеют меньший размер файла, чем их растровые версии (исключения составляют изображения малого пиксельного размера и сложные векторные изображения со множеством форм). Во-вторых, в один SVG-файл можно добавить несколько версий изображения и показывать их по определённым условиям (уменьшение количества запросов к серверу). В-третьих, в SVG можно использовать «клонирование» — единожды прописать форму (градиент, текстуру) и многократно использовать её, ссылаясь на оригинал. Есть, правда, и минус: отрисовка SVG в браузере чуть медленнее, чем показ растрового изображения, но чтобы заметить эту разницу, нужно сравнивать большие и сложные изображения.
SVG легко сделать адаптивным. В том случае, когда необходимо на узких вьюпортах показывать логотип сайта в упрощённом варианте, SVG позволяет добиться этого всего за один запрос к серверу.
SVG может быть интерактивным. Внутри изображения могут быть ссылки, скрипты, интерактивные части могут реагировать на наведение и другие действия пользователя, можно добавить анимацию.
Свободно распространяемое ПО. Для работы с SVG не обязательно использовать Adobe Illustrator (как стандарт в мире векторной графики), достаточно свободно распространяемого Inkscape. Есть и ряд других инструментов.
Несмотря на перечисленные плюсы формата SVG, далеко не все дизайнеры используют его в своих проектах. О причинах сложившейся ситуации мы поинтересовались у известных российских экспертов в области дизайна и проектирования интерфейсов:
Юрий Ветров, руководитель отдела проектирования и дизайна Mail.Ru
Простой ответ — дизайнеру мало научиться готовить SVG, нужно чтобы разработчики могли его использовать в продукте, а это не так-то просто, нужно менять многое в технологических решениях. Во-вторых, сам процесс работы с вектором нужно оптимизировать, чтобы SVG было комфортно экспортировать из использующихся графических редакторов. Т.е. каких-то предубеждений нет, просто надо значительно перестраивать процесс работы, а явных выхлопов для бизнеса это особых не даёт. Т.е. это инфраструктурная задача, которая в меньшем приоритете всегда. Все, конечно, перейдут на него со временем, но проблемы примерно как описал выше.
Денис Кортунов, UX-директор Acronis
Это вопрос не совсем к дизайнерам, но к веб-технологам или фронтенд-разработчикам. Сейчас немало дизайнеров изначально делают дизайн в векторе, и нет никакой проблемы представлять графику в виде SVG. Основная проблема — совместимость с разными браузерами. Такие картинки зачастую просто не отображаются и нужно много «танцев с бубнами». Распространённая альтернатива SVG — использование шрифтов. Это «хак», позволяющий использовать векторные изображения в вебе.
Вообще, в современном вебе есть проблема — нужен простой и универсальный формат для отображения векторных изображений на страницах. Вполне возможно, что SVG скоро станет стандартом. Очень жду этого.
Дмитрий Зимин, менеджер проекта «Киноход»
Что касается того, «почему не используют SVG», я могу говорить только за наш проект. У нас есть особенность: большая часть контента — это фотографии (постеры, кадры из фильма, превью ролика).
Интерфейс в мобильном приложении хотим перевести на вектор, потому что нарезать картинки в трёх разрешениях (х.png, @2x.png, @3x.png) и утомительно, и провоцирует на ошибки. Но, пока банально не дошли руки.
Артём Геллер, главный разработчик сайта Kremlin.ru
В своих проектах мы активно используем SVG, однако у этой технологии есть и определённые ограничения. Для нас они, конечно, перекрываются пользой, которую несёт в себе SVG — нам не нужна сложная анимация в элементах, да и что-то красить в них нужно не так часто.
При этом, мы заменяем элементы в SVG на PNG, в том случае, если с этим форматом конкретная версия браузера не дружит.
Никита Михеенков, директор по развитию Nimax Design
Нам кажется, что дело здесь совсем не в дизайнерах, а во всей команде, делающей проект. Сила привычки тянет назад к растровой графике — так проще и привычнее. В своих проектах мы постоянно работаем с SVG и особенно любим делать всякие анимированные и летающие штуки.
Вот несколько примеров с векторной графикой: один, два, три.
Вместо заключения: как делать SVG
Конечно, дизайнеру не нужно держать в голове все возможные технические мелочи разработки проекта, но соблюдение нескольких простых принципов, всё же, необходимо: