Свг это: Файл 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

Конечно, дизайнеру не нужно держать в голове все возможные технические мелочи разработки проекта, но соблюдение нескольких простых принципов, всё же, необходимо:

1. Лучше стараться обходиться как можно меньшим числом точек. Чем меньше точек, тем, как правило, проще редактировать файл и тем меньших он будет размеров. Если используются формы, нарисованные другими специалистами, имеет смысл их упростить — уменьшить количество как опорных, так и управляющих точек. В Adobe Illustrator наиболее оптимальные (с технической стороны) контуры получаются при рисовании инструментом «перо» при грамотном выборе типа точек. Наименее оптимальные, обычно, являются результатом преобразования нарисованных кистью линий в векторные участки, или бездумной трассировки.

   Изображение 1 (Получено от дизайнера) 83 Кб	Изображение 2 (оптимизировано количество точек) 28 Кб	Изображение 2 (оптимизирована разметка) 10 Кб

2. Следует использовать пиксельную сетку и стараться располагать контуры так, чтобы их края были ровно на границе пикселей или на 1/2 пикселя. Если планируется изменения размеров элементов (например, иконки), то нужно проверить, как изменённый размер ляжет на пиксельную сетку. При этом важно помнить о том, что экран — это среда с серьёзными ограничениями, на любом размере попасть в пиксели невозможно, однако для наиболее частых размеров — нужно постараться.

   Формы выровнены по пиксельной сетке (400%)	Формы не выровнены по пиксельной сетке (400%)

3. Стоит создавать и сохранять SVG в том виде, в котором планируется дальнейшее использование этих элементов в дизайне. Иногда встречается ситуация, при которой к PSD-макету приложены использованные SVG, но в самом макете использована векторная форма с какими-то добавлениями (текстовой слой, что-то дорисовано растром, наложен какой-либо эффект). Подобный подход может исключить возможность использовать векторную графику для такого элемента дизайна.
4. Нужно использовать как можно меньше фигур, группировать только необходимое. Следует удалять фигуры, которые не являются составными частями картинки или невидимы (прикрыты другими фигурами).
5. Все символы, текстуры и рисунки кистью лучше преобразовывать в обычные векторные участки, не применяя растровые эффекты (Adobe Illustrator) и режимы наложения.

Полезные ссылки

• Inkscape
• SVG Editor

Введение — SVG | MDN

• « Предыдущая статья
• Следующая статья »

SVG это язык XML разметки, схожий с XHTML, который может использоваться для рисования векторной графики, такой как та, что показана справа. Он может быть использован для создания изображения путём указания всех необходимых линий и форм, путём модификации уже существующих растровых изображений, или путём комбинации обоих. Изображения и их компоненты также могут быть трансформированы, собраны вместе, или отфильтрованы чтобы полностью изменить их внешний вид.

В 1999 году, после конкурса нескольких форматов, SVG был включён в W3C, однако полностью ратифицирован не был. SVG поддерживается всеми наиболее популярными браузерами. Недостатком использования SVG является его медленная загрузка . При этом SVG даёт некоторые преимущества, такие как наличие соответствующего DOM interface, и отсутствие необходимости в стороннем расширении. Использовать данное решение или нет, часто зависит от конкретного случая применения.

Базовые компоненты

В HTML имеются элементы для определения заголовков, параграфов, таблиц и т.п. В SVG, с другой стороны, имеются элементы для кругов, прямоугольников, и простых и сложных кривых. Простой SVG документ состоит из корневого элемента <svg> и нескольких основных форм, которые вместе обеспечивают построение рисунка. Кроме того, есть элемент <g>, который используется для группировки нескольких основных форм вместе.

Начиная с этого, SVG изображение может стать сколь угодно сложным. SVG поддерживает градиенты, вращения, фильтры, анимации, взаимодействие с JavaScript, и т.п. Но все эти дополнительные возможности языка полагаются на этот относительно небольшой набор элементов, определяющих графическую область.

До начала работы

Существует ряд приложений для рисования, такие как Inkscape, который свободный и использует SVG в качестве родного файлового формата. Однако, это руководство полагается только на надёжный XML или текстовый редактор (на ваш выбор). Идея в том, чтобы обучить основам SVG тех, кто хочет понять его, и это лучше всего сделать, самостоятельно поработав с разметкой. При этом вы должны знать свою конечную цель. Не все программы просмотра SVG одинаковы, и поэтому существует высокий шанс того, что написанное для одного приложения не будет отображаться таким же образом в другом, просто потому что они поддерживают разные уровни SVG детализации или другую детализацию, которую вы используете наряду с SVG (такую как, JavaScript или CSS).

SVG поддерживается всеми современными браузерами и даже, в некоторых случаях, паре их устаревших версий. Достаточно полную таблицу поддерживающих браузеров можно найти в Can I use. Firefox поддерживает некоторый контент SVG, начиная с версии 1.5, и этот уровень поддержки растёт с каждым новым выпуском. К счастью, наряду с этим руководством, MDN может помочь разработчикам не отставать от изменений между Gecko и некоторыми другими основными реализациями.

Перед тем как начать, вы должны иметь основное понимание XML или другого языка разметки, такого как HTML. Если вы не очень знакомы с XML, ниже имеются некоторые рекомендации, которые следует иметь ввиду:

• Элементы и атрибуты SVG должны быть все введены в указанном регистре, поскольку XML обладает чувствительностью к регистру (в отличии от HTML).
• Значения атрибутов в SVG должны быть помещены внутри кавычек, даже если они являются цифрами.

SVG имеет довольно большую спецификацию. Это руководство охватывает только основы. После ознакомления с ними, тебе следует использовать Справочник SVG элементов и SVG интерфейсы, чтобы найти что-либо ещё при необходимости.

Особенности SVG

Начиная с рекомендации 2003 года, самой свежей «полной» версией SVG является версия 1.1. Она построена на SVG 1.0, но содержит также больше модульности для упрощения реализации. Второй выпуск SVG 1.1 стал Рекомендацией в 2011 году. «Полная» версия SVG 1.2 стала следующим главным выпуском SVG. Ей пришла на смену развивающаяся SVG 2.0, которая сейчас усиленно разрабатывается и следует схожему с CSS 3 подходу, в котором она разделяет компоненты в несколько свободно связанных специфирований.

Кроме полных рекомендаций SVG, рабочая группа при W3C ввела SVG Tiny и SVG Basic в 2003 году. Эти две версии нацелены главным образом на мобильные устройства. Первый, SVG Tiny, должен выдавать графические примитивы для небольших устройств с низкими возможностями. SVG Basic имеет много общего с полным SVG, но не включает те компоненты, что трудны для реализации или являются тяжёлыми для воспроизведения (как анимации). В 2008, SVG Tiny 1.2 стала Рекомендацией W3C.

Существовали планы для спецификации SVG Print, которая имела бы поддержку для множества страниц и улучшенное управление цветом. Эта работа была прекращена.

• « Предыдущая статья
• Следующая статья »

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Weclome To SVG, Inc

От стратегии бизнес-систем до внедрения, SVG, Inc объединяет наши отраслевые знания с технологическим опытом для создания решений, которые приносят реальную, ощутимую корпоративную ценность нашим клиентам. Мы стремимся повысить скорость бизнеса, согласовывая бизнес-технологии и системные технологии и обеспечивая быструю окупаемость инвестиций с помощью ускоренных решений. Наши клиенты считают нас своим партнером, потому что мы выполняем то, что обещаем, и стремимся к их успеху.

Управление научными данными

Среда управления научными данными (SDME) позволяет разработчикам, специалистам по данным и аналитикам архивировать данные любого размера, типа и формы вместе с их метаданными, чтобы эффективно обнаруживать данные и безопасно сотрудничать. SDME удовлетворяет потребности более широкой аудитории и требует курируемых репозиториев с управлением, семантической согласованностью и контролем доступа. Это устраняет сложности, связанные с приемом и хранением всех ваших данных, и ускоряет запуск и запуск с пакетной и многокомпонентной потоковой передачей. Он легко интегрируется с вашими существующими хранилищами операционных данных, чтобы вы могли расширять текущие приложения данных.

SDME предоставляет высоконадежные услуги:

• Предоставляет стабильные средства для хранения, обнаружения и обмена управляемыми данными с точки зрения исследователя и аналитика
• Создать высоконадежную модель хранения
• Механизмы поддержки для аннотирования наборов данных
• Включить большее значение, полученное из сгенерированных данных и наборов данных
• Содействовать соблюдению новых требований к обмену данными
• Разрешает миграцию/постановку данных в соответствующее хранилище в зависимости от использования
• Создать статистику использования и отчет.
• Независимый от технологии интерфейс для пользователей системы

Загрузка данных

Данные могут загружаться в SDME синхронно или асинхронно. Оба механизма обеспечивают надежную передачу данных и целостность данных. Прием данных поддерживает фильтрацию данных и добавление к ним необязательных метаданных. Асинхронная передача данных через Globus поддерживает передачу…

Data Annotation & Discovery

Поиск нужных данных в архиве миллиардов файлов подобен поиску одной конкретной иглы из стопки иголок. Информация о данных, называемая метаданными, чрезвычайно полезна для обнаружения данных, находя соответствующие данные в больших наборах данных. SDME управляет объектом данных…

Безопасность данных

Безопасность данных имеет первостепенное значение для SDME. Его API, веб-интерфейс и командные утилиты защищены аутентификацией и авторизацией пользователя. Владелец данных имеет полный контроль над их видимостью и доступом. SDME API и веб-интерфейс упрощают управление безопасностью…

Политики и рабочие процессы

SDME обеспечивает гибкий способ настройки иерархии данных и структуры ее метаданных. Его управление политикой на основе правил обеспечивает большую гибкость для принятия любых изменений политики на основе DOC (подразделения, организации, центра) и принудительного применения их к соответствующему DOC или пользователю.

В центре нашего внимания в SVG, Inc. находится обеспечение качества и достижение ощутимых результатов для наших клиентов, и у нас есть истории успеха, доказывающие это. Они демонстрируют, как мы поддерживаем наших клиентов в решении ключевых вопросов бизнеса. Они включают в себя поперечное сечение отраслей от государственного сектора до коммерческого. Они решают различные ключевые проблемы современного бизнеса, такие как стратегия, отношения с клиентами, управление цепочками поставок, аутсорсинг и многое другое.

Weclome To SVG, Inc

Наше видение

Наша цель в SVG, Inc — считаться основным источником передового опыта и добросовестности в сфере консалтинга в области информационных технологий (ИТ).

Наша миссия

Предоставление услуг, превосходящих ожидания наших клиентов, за счет повышения их производительности, прибыльности и конкурентных преимуществ. И быть компанией, которую ИТ-консультанты выбирают в качестве партнера для предоставления услуг по управлению информацией.

Наша философия

Наша философия вращается вокруг людей, знаний, технологий, инноваций, качества, честности и сообщества.

Люди

Клиенты, консультанты и сотрудники — наши самые ценные ресурсы. Наша основная функция заключается в согласовании интересов этих заинтересованных сторон для формирования взаимовыгодных консультационных соглашений. Мы стремимся обеспечить нашим клиентам повышенную производительность, прибыльность и конкурентное преимущество в их отраслях. Мы стремимся предоставить нашим консультантам веселую рабочую среду, высококачественный социальный пакет, перспективные возможности, щедрое вознаграждение и возможность изучать новые технологии.

Знания

В гиперконкурентной ИТ-индустрии успешные люди творчески мыслят, выявляя возможности и используя их. Одним из лучших способов развития творческих способностей является непрерывное образование. Дополнительные аспекты выявления возможностей проистекают из нашей способности превращать данные в информацию, информацию в знания, а знания в правильные решения. Наше стремление к знаниям дает нам стратегическое конкурентное преимущество. Мы постоянно бросаем вызов нашей зоне комфорта, превращая проблемы в возможности для роста и обучения.

Технология

Наша основная компетенция — это всестороннее понимание технологии и того, как внедрить соответствующую технологию для вашего бизнеса. Управление информацией — это наша работа. Наши инструменты являются продуктами исследований и разработок в области электротехники и программного обеспечения. Научные прорывы происходят молниеносно. Чтобы реализовать наше видение, мы должны постоянно бросать себе вызов с помощью новых технологий.

Инновации

Мы ценим инновации. Претворяя в жизнь ценностные утверждения о людях, знаниях и технологиях, мы приходим к инновациям.