Svg формат что это
Что такое SVG-графика и зачем она нужна
Простая рисовалка на CSS.
Недавно мы рассказывали о том, чем отличается растровая графика от векторной. Если коротко: растровая графика фотореалистичная, состоит из точек, но её нельзя увеличивать бесконечно без потери качества. Векторная графика работает наоборот: она подходит не для фотографий, а больше для простых рисунков, но её можно увеличивать как угодно и качество останется идеальным.
Сегодня поговорим о том, как рисовать векторную графику в вебе стандартными средствами HTML.
Что такое и зачем нужно SVG
SVG расшифровывается как scalable vector graphics, «масштабируемая векторная графика». Это значит, перед нами векторное изображение, которое можно масштабировать без потери качества.
SVG — это не единственный формат векторной графики, есть много других. Но именно SVG используют на веб-страницах и в HTML-коде. Его инструкции оптимизированы для веб-разработки, и отрисовка происходит прямо в браузере. И, самое главное, все команды SVG представлены в виде текста и координат, а не в виде отдельных файлов. Это значит, что SVG-изображение можно зашить прямо в код веб-страницы, что иногда бывает незаменимо.
SVG используется в вебе для отрисовки:
Как использовать SVG на странице
Например, мы можем поставить на странице любой заголовок, а потом прямо поверх него нарисовать пару зелёных кругов и красную линию:
Теперь давайте разберёмся, как это у нас получилось и что для этого нужно.
Линия
Линия — самый простой элемент SVG-графики. Чтобы нарисовать линию, нам нужно знать:
Соберём всё вместе:
Чтобы нарисовать зелёный круг с жирной фиолетовой обводкой, зададим такие параметры:
Соберём вместе, добавим второй круг и тоже положим это внутрь тега :
Прямоугольник
С прямоугольниками тоже всё просто — указываем размеры, цвет заливки, а также цвет и толщину контура:
Минус стандартного прямоугольника в том, что он всегда рисуется от точки с координатами (0,0). Если прямоугольник нужен в другом месте, используют многоугольник.
Многоугольник
Многоугольник — это фигура, которая получается так:
Например, вот что нужно, чтобы нарисовать синий треугольник:
Как видите, многоугольник позволяет располагать любые фигуры в любом месте страницы.
Продвинутый уровень
Теперь добавим заголовок, чтобы получить картинку как в начале статьи. Пишем после тега тег
Привет, это журнал Код!
Так как наш тег с заголовком первого уровня написан ниже тега с графикой, то браузер и разместил заголовок ниже картинок. Чтобы графика легла сверху текста, нужно пойти на хитрость:
Добавим это в стили и соберём полную страницу:
Внешние SVG-файлы
Инструкции SVG можно упаковывать во внешние файлы и подключать как обычные изображения. Например, вы нарисовали красивую иконку в векторном редакторе, сделали экспорт в формат SVG и подключили к странице как обычное изображение. Браузер поймёт инструкции и нарисует ваше изображение красиво и плавно, какого бы размера оно ни было.
Это особенно полезно на мониторах высокого разрешения и на мобилках: например, если вам на сайте нужны какие-то иконки, вы можете подключить их как SVG-файлы, и браузер отрисует их корректно хоть на retina-дисплеях, хоть на старых Full-HD мониторах.
Если хотите попробовать, скачайте любую из иконок Чикина и добавьте на сайт через тег — увидите, как это красиво. Не забудьте указать width и height, чтобы векторная картинка знала, в каком размере отрисовываться.
Что дальше
Мы разобрали только самые основы SVG-графики. Дальше будем делать красивую SVG-анимацию, рисовать логотипы и работать с векторной графикой на продвинутом уровне. Подпишитесь на нашу рассылку, чтобы не пропустить новые выпуски.
Чем открыть файл в формате SVG – лучшие программы и онлайн-редакторы
Большинство популярных графических редакторов позволяет сохранять изображения в нескольких форматах. Если программа работает с растровой графикой, то для сохранения файлов предлагаются растровые форматы, если с векторной, то, соответственно, векторные форматы. Однако есть растровые редакторы, которые поддерживают экспорт рисунков в векторные и смешанные форматы. Таковым, к примеру, является Adobe Photoshop, умеющий экспортировать рисунок в SVG – достаточно распространенный сегодня формат, способный хранить как растровую, так и векторную графику.
Что за формат SVG и где используется
Разработанный в 2001 году Консорциумом Всемирной паутины, формат SVG представляет собой не совсем обычный документ. В его основу положены языки разметки VML и PGML, то есть речь идет, по сути, о текстовом файле. При этом редакторы и браузеры интерпретируют SVG как изображение, которое может быть как статическим, так и анимированным. Будучи наиболее распространенным среди прочих форматов, предназначенных для хранения векторной графики, в настоящее время SVG активно используется для хранения и распространения векторных и смешанных изображений в интернете.
Как и все форматы, SVG имеет свои плюсы и минусы. К первым относятся масштабируемость без потери качества, относительно малый вес, возможность интеграции в SVG-документы PNG, GIF, JPG-изображений, редактирование (при наличии соответствующего опыта) в текстовых редакторах, индексирование поисковыми роботами, поддержка анимации и распространенность. К преимуществам формата следует также отнести хорошую сжимаемость, открытость и адаптивность.
С другой стороны SVG наследует недостатки XML со всеми вытекающими. Формат плохо подходит для создания сложных объектов, так как файлы SVG быстро «набирают» вес, если состоят из множества мелких деталей. Кроме того, для отображения картинки программам нужно читать весь документ, что затрудняет применение формата в картографических приложениях. Среди недостатков формата отмечаем относительно низкую кроссбраузерность и отсутствие хотя бы минимальной поддержки трехмерной графики.
Лучшие редакторы для работы с файлами SVG
Как уже было сказано, отредактировать файл SVG можно в обычном текстовом редакторе, но для этого нужно обладать специфическими знаниями. Гораздо удобнее и правильнее задействовать векторные графические редакторы.
Adobe Illustrator
Наиболее функциональный инструмент, который отлично подходит на роль редактора SVG. Adobe Illustrator обладает внушительным набором средств для работы с векторной и комбинированной графикой. Он позволяет создавать и редактировать как простые эскизы, так и сложные художественные иллюстрации. При работе с форматом SVG редактор допускает использование слоев и языков сценариев, применение специальных эффектов.
Boxy SVG
Открыть SVG-картинки также можно с помощью специально созданного для работы с этим форматом приложения Boxy SVG. Данный редактор во многом уступает Adobe Illustrator, однако в нём вы найдете все базовые инструменты для создания и редактирования изображений SVG. Приложением поддерживаются работа с фигурами и объектами, импорт шрифтов и картинок популярных форматов, работа с библиотекой Pixabay, просмотр и редактирование исходного кода SVG и CSS. Программа Boxy SVG доступна как онлайн-сервис и как приложение для Windows 10, MacOS и Chrome OS.
Vectr
Чем открыть файл SVG еще? Для работы с файлами этого типа есть программа Vectr, очень даже неплохо справляющаяся с возложенными на неё задачами редактирования. В приложении доступны такие функции, как изменение отдельных частей векторного изображения, работа со слоями, добавление текста и примитивов, применение эффектов (например, прозрачность, обводка, внешняя и внутренняя тень), использование градиентов, пера, линий и других инструментов. Утилита Vectr бесплатна, есть версии для Windows, Linux и Chrome OS.
Inkscape
В отличие от двух предыдущих программ, Inkscape не нуждается в особом представлении. Этот мощный и совершенно бесплатный редактор может быть использован и для редактирования, и для создания векторной графики любой сложности, начиная от SVG-иконок и заканчивая полноценными иллюстрациями. Программа Inkscape умеет работать с контурами, текстом, маркерами, слоями и каналами, градиентами и текстурами. Также поддерживаются векторизация растровой графики, управление цветом SVG и многое другое.
Кстати, изменить цвет SVG можно путем редактирования исходного кода файла, но для этого нужно иметь хотя бы базовые представления о языке CSS и кодах цветов. Отредактировав, к примеру, параметр style в выделенном на скриншоте блоке кода, мы заменили белый цвет на красный. А так, конечно, если чем и редактировать SVG, то Inkscape и подобными ему программами.
Чем открыть SVG онлайн
Если вам нужен онлайн-редактор SVG, используйте веб-версии программ Boxy SVG, Vectr и Inkscape. Функциональный набор таких редакций практически один в один, как у десктопных вариантов. Приложение Inkscape, к примеру, можно запустить в рамках проекта www.rollapp.com/app/inkscape.
Если же вы ищите что-то попроще, попробуйте онлайновый векторный редактор Sketchpad, доступный по адресу sketch.io/sketchpad. В активе Sketchpad имеются такие инструменты, как кисти, линии, стрелки, примитивы, клипарт, перо, мелок, аэрограф, заливка и т.п. Есть работа со слоями, палитрой и градиентами.
А вот для создания SVG-изображений «с нуля» сервис мало подходит, хотя функция произвольного рисования им поддерживается. Ориентирован редактор на начинающих пользователей, так что вы легко с ним разберетесь.
Конвертеры SVG в PNG
Просмотреть файл SVG как обычную картинку можно просто перетащив его на окно браузера, но бывает и так, что SVG-документ необходимо сконвертировать в более доступный и привычный графический формат, скажем, PNG. Если конвертируемых файлов много, есть смысл воспользоваться бесплатной тулзой SVG2PNG, позволяющей преобразовывать SVG в PNG в пакетном режиме. Чтобы конвертировать SVG в PNG, запустите утилиту, перетащите в ее окно векторные файлы, нажмите «Start» и получите результат.
В остальных случаях будет меньше мороки, если воспользуетесь бесплатными конвертерами SVG в PNG, работающими в режиме онлайн. В частности, это svgtopng.com/ru, convertio.co/ru/svg-png и image.online-convert.com/ru/convert-to-png.
Какой из них удобнее, решайте сами. Все эти три конвертера бесплатны и поддерживают работу в пакетном режиме, а Online-Convert вдобавок ко всему еще предоставляет возможность гибкой настройки выходных параметров PNG-файла.
Графический формат SVG и где он применяется
Привет всем, наши дорогие фанаты свободной конвертации. Сегодня у нас на рабочем столе интереснейший проект под кодовым названием Scalable Vector Graphics или кратко SVG. Почему на иностранном языке? Чтобы никто не догадался.
Для проведения исследования нам понадобятся некоторые материальные ресурсы, в том числе какой-либо свободно конвертируемой валюты, возможно рублей.
Во-вторых, нам необходим компьютерный монитор, не важно, десктоп или смартфон. Поскольку вы читаете этот текст, стало быть – один ресурс у вас уже имеется. Остается побеспокоить кого-то из близко оказавшихся добрых людей и позаимствовать несколько тысяч рублей, на худой конец, пару сотен баксов.
Все это нам совершенно необходимо для ясного понимания – что такое SVG и с чем его лучше закусывать.
Масштабируемая векторная графика
Начнем от внешней оболочки, перейдем к внутреннему содержанию и далее, не побоимся этого слова – проникнем в самую сущность исследуемого явления.
Как вы могли слышать – графика бывает двух типов.
Для начала снимите очки и подведите свои глаза поближе к мерцающему компьютерному монитору.
Что вы видите?
Правильно – картинка составляется из миллионов разноцветных точечек. Это и есть растр. Поэтому такой тип графики и называется «растровым».
Переходим ко второй части эксперимента. Поверьте, вам предстоит намного более весело провести время, а может даже найти себе приключений на кой-чего.
Одевайте свою самую модную одежку, звоните другу или подружке. Мы отправляемся в ночной клуб. Зачем? Изучать графику векторную.
Когда гости как следует разогрелись в баре и на танцполе начинаются танцы с бубнами, DJ нажимает маленькую кнопочку и небо заполняют клубы полупрозрачного глицеринового дыма.
Когда дымовал достаточно загустеет, DJ нажимает еще одну кнопочку. Запускается лазерная пушка и над головами танцующей толпы начинает плясать что-то вроде северного сияния.
Это и есть векторная графика. Лазерный луч непрерывен и рисует картины согласно заложенному в компьютерной программе алгоритму – цифровому визуальному образу.
Именно так и работает SVG – это цифровое программное описание графических образов, цветов и их поведения.
Мы не зря в качестве примера выбрали ночной клуб. Суть в том, что лазер-то создает непрерывные линии, но глицериновый дым имеет дисперсную, растровую фактуру. То есть, этот искусственный туман представляет собой взвешенные в воздухе мельчайшие капельки жидкости, от которых и отражается лазерный луч, чтобы в сетчатках наших глаз сформировались визуальные образы.
На экранах компьютеров непрерывные векторы преобразовываются в разноцветные пиксели матрицы и наш мозг по своему алгоритму формирует восприятие плавной картинки.
Технологическое решение SVG
Ну вот, с внешней оболочкой разобрались, теперь переходим к внутренней сущности явления. Вы можете сказать – да нафига нам вся эта наука, лучше скажи прямо – зачем он нужен, этот SVG?
Не торопитесь. Дело в том, что именно технология определяет все внешние эффекты. А теперь откроем вам страшную тайну. SVG – это родной брат языка разметки гипертекста HTML, при помощи которого верстаются сайты, красивые и динамические.
Да-да, файл графики в формате SVG представляет собой текстовый файл XML, наполненный тегами, примерно как в HTML, и данными, структурированными при помощи XML. Логически предположить, что SVG-графику можно интегрировать непосредственно в HTML-код веб-страницы, форматировать при помощи таблиц стилей CSS и даже подключать программные сценарии Javascript.
Просто запустите свое воображение (можно чашечку капучино, плиз) и попытайтесь предоставить бесконечные возможности векторной графики, генно-модифицированной тегами HTML5.
Исходя из этих технических спецификаций мы и выведем сферу применения SVG.
Как можно использовать SVG для пользы и выгоды
В принципах честного маркетинга следует признаться – есть у SVG и недостатки. По мере наращивания детализации изображения, вес файла начинает увеличиваться со скоростью снежной лавины.
Так что, к сожалению, SVG совершенно не годится для реалистичных фотографии высокого разрешения и подробных карт местности.
Формат SVG оптимален для небольших, зато масштабируемых и интерактивных картинок.
Самое полезное – SVG-графика наилучшим образом подходит для электронной коммерции.
Например, на сайте интернет-магазина размещается изображение продаваемого товара. Пользователь может нажимать на отдельные участки картинки и начинается красивая анимация, превращающая образ во что-то другое.
На этой основе можно разработать интерактивный обзор товара со всех сторон и даже изнутри.
Либо на медицинском сайте, при помощи такой графической программы можно сделать тест на беременность. Или диагностический плагин, для желающих пройти экспресс-анализ и узнать, от чего ему предстоит умирать молодым.
После того, как клиент узнает страшную тайну о своем страшном недуге, рука сама тянется кликнуть мышью по соседнему участку SVG-картинки с красной кнопкой «Купить лекарство от всех болезней». Достаточно одной таблэтки. Price$1000.
Вот какое полезное изобретение, этот SVG.
Способы конвертации в SVG
На нашем сайте мы предлагаем вам конвертацию различными методами:
А можно как-то уменьшить размер SVG?
Да! С помощью специальных программ, например SVGO, или на нашем сайте с помощью функции оптимизации SVG.
Введение
SVG это язык XML разметки, схожий с XHTML, который может использоваться для рисования векторной графики, такой как та, что показана справа. Он может быть использован для создания изображения путём указания всех необходимых линий и форм, путём модификации уже существующих растровых изображений, или путём комбинации обоих. Изображения и их компоненты также могут быть трансформированы, собраны вместе, или отфильтрованы чтобы полностью изменить их внешний вид.
Базовые компоненты
Начиная с этого, SVG изображение может стать сколь угодно сложным. SVG поддерживает градиенты, вращения, фильтры, анимации, взаимодействие с JavaScript, и т.п. Но все эти дополнительные возможности языка полагаются на этот относительно небольшой набор элементов, определяющих графическую область.
До начала работы
Существует ряд приложений для рисования, такие как Inkscape, который свободный и использует SVG в качестве родного файлового формата. Однако, это руководство полагается только на надёжный XML или текстовый редактор (на ваш выбор). Идея в том, чтобы обучить основам SVG тех, кто хочет понять его, и это лучше всего сделать, самостоятельно поработав с разметкой. При этом вы должны знать свою конечную цель. Не все программы просмотра SVG одинаковы, и поэтому существует высокий шанс того, что написанное для одного приложения не будет отображаться таким же образом в другом, просто потому что они поддерживают разные уровни SVG детализации или другую детализацию, которую вы используете наряду с SVG (такую как, JavaScript или CSS).
SVG поддерживается всеми современными браузерами и даже, в некоторых случаях, паре их устаревших версий. Достаточно полную таблицу поддерживающих браузеров можно найти в Can I use. Firefox поддерживает некоторый контент SVG, начиная с версии 1.5, и этот уровень поддержки растёт с каждым новым выпуском. К счастью, наряду с этим руководством, MDN может помочь разработчикам не отставать от изменений между Gecko и некоторыми другими основными реализациями.
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, которая имела бы поддержку для множества страниц и улучшенное управление цветом. Эта работа была прекращена.
SVG-файлы изнутри и вывод векторных изображений на canvas «вручную» (ч.1)
Эта статья написана по следам создания плагина для чтения SVG файлов для анимационного векторного редактора NanoFL. В ней вы найдёте некоторые особенности того, как устроены файлы SVG изнутри и какие проблемы возникают при их разборе и последующем выводе на HTML5/Canvas средствами JavaScript.
Формат SVG стал по факту стандартом на обмен векторной графикой между различными программами. Поэтому, было решено сделать его поддержку в NanoFL. В процессе подобной разработки важно контролировать правильность чтения и интерпретации файлов, для чего с сайта w3.org была скачана коллекция SVG-изображений различной тематики.
Общие сведения о том, что находится внутри файлов SVG
Как все, наверное, знают SVG-файлы содержат простые текстовые данные в формате XML. Поэтому, их, теоретически, можно открывать и редактировать в обычном текстовом редакторе. Конечно, на практике это имеет смысл лишь для быстрых правок в небольших файлах.
Вот обзор того, что может содержать SVG-файл:
Заголовок
Обычно имеет следующий вид:
Группы
Группа — это тег-контейнер, внутри которого могут быть практически любые элементы. Используется как правило или для того, чтобы задать некоторые параметры (например, заливку, область отсечения или фильтр) сразу для всех внутренних элементов, или чтобы впоследствии иметь возможность сослаться на эти элементы. Группа напоминает символ в библиотеке редактора, который мы можем использовать несколько раз, причём видоизменяя его при использовании (для того, чтобы сослаться на группу, используется тег ). Ниже приведён пример задания группы и использования ссылок на неё.
Векторные фигуры
Узоры
Закрашивать замкнутые области в SVG можно произвольным векторным узором. На canvas такое невозможно: Context2D поддерживает создание pattern-ов, однако, в их качестве предлагается использовать растровые изображения, а не векторные. Обходным манёвром здесь может быть растеризация вектора на canvas в памяти с последующей заливкой им заданной области. Однако, в общем случае, это приведёт к серьёзной потере производительности (т.к. невозможно растрировать узор заранее и использовать везде из-за незнания масштаба заливаемого объекта). Поэтому, помня о том, что узоры довольно редко используются в реальных художественных векторных изображениях, было решено отказаться от их поддержки в NanoFL.
Заключение
Автор будет рад любым конструктивным комментариям.