Этот пост - первый из серии статей о SVG (Scalable Vector Graphic), рассказывающий об основах векторной графики на сайте.
Векторная графика широко применяется в полиграфии. Для веб-сайтов существует SVG, которая согласно официальной спецификации на w3.org является языком для описания двумерной графики в XML. SVG включает в себя три типа объектов: фигуры, изображения и текст. SVG существует с 1999 года , а с 16 августа 2011 включена в рекомендации W3C . SVG сильно недооценена веб-разработчиками, хотя имеет несколько важных преимуществ.
Преимущества SVG
- Масштабирование: в отличие от растровой графики, SVG не теряет в качестве при масштабировании, поэтому ее удобно использовать для разработки под retina.
- Уменьшение HTTP-запросов: при использовании SVG сокращается количество обращений к серверу, соответственно увеличивается скорость загрузки сайта.
- Стайлинг и скриптинг: при помощи CSS можно менять параметры графики на сайте, например фон, прозрачность или границы.
- Анимация и редактирование: при помощи javascript можно анимировать SVG, а также редактировать в текстовом или графическом редакторе (InkScape или Adobe Illustrator).
- Малый размер: объекты SVG весят намного меньше растровых изображений.
Основные SVG-фигуры
Согласно официальной спецификации можно рисовать простые объекты с помощью SVG: прямоугольник, окружность, линию, эллипс, ломаную линию или многоугольник при помощи тега svg .Простая линия с помощью тега line с всего двумя параметрами - точками начала (x1 и x2) и конца (y1 и y2):
Также можно добавить атрибуты или стили stroke and stroke-width, чтобы задать цвет и ширину:
Style="stroke-width:1; stroke:rgb(0,0,0);"
Ломаная линия
Синтаксис аналогичен предыдущему, используется тег polyline , атрибут points задает точки:
Прямоугольник
Вызывается тегом rect, можно добавить некоторые атрибуты:
Окружность
Вызывается тегом circle , в примере с помощью атрибута r задаем радиус, cx и cy задают координаты центра:
Эллипс
Вызывается тегом ellipse , работает аналогично circle , но можно задать два радиуса - rx и ry :
Многоугольник
Вызывается тегом polygon , многоугольник может иметь разное количество сторон:
Использование редакторов
Как видно из примеров, рисование базовых SVG-фигур - это очень просто, но объекты могут быть намного сложнее. Для таких нужно использовать редакторы векторной графики, например Adobe Illustrator или Inkscape, где можно сохранять файлы в SVG-формате, а потом редактировать в текстовом редакторе. Вставлять на страницу SVG можно с помощью embed, iframe и object:
Пример - изображение айпода с сайта OpenClipArt.org .
Файл SVG представляют из себя двухмерные векторные изображения на основе документов в формате XML. Применяют формат SVG не только при описании двухмерной векторной графики, но и при смешанных векторно- растровых изображений.
SVG файлы считаются текстовыми, потому их просмотр становится возможным в любом текстовом редакторе. Данный формат файла был разработан для применения в сети, расширение SVG является открытым. Формат файла SVG был официально рекомендован организацией W3C. Такое расширение файла, может поддерживать статичные и анимированные виды графики. В процессе масштабирования либо изменения показателей размеров, изображение, которое содержит расширение файла SVG, будет сохранено без потери качества.
Scalable Vector включает в себя определенный набор функционала, среди которого альфа-маски, опции применения шаблонов, наложение эффектов фильтров и так далее. Открыть файл, имеющий расширение.svg, можно при помощи практически любого современного браузера. Операционная система Windows предполагает возможность открыть файл SVG с помощью просмотрщика Microsoft Visio или посредством таких программных комплексов, как CorelDRAW Graphics Suite и Adobe Illustrator, а также CADSoftTools ABViewer и Corel PaintShop Pro.
Следует знать, что составляющие файла расширением.svg, могут занимать достаточно большое количество места, поэтому был создан формат.SVGZ, в нем применяется технология сжатия gzip. Vector Graphics даёт пользователям возможность сжимать, а также индексировать изображения, кроме того, файл расширением SVG включает в себя способность выполнять поиск требуемого изображения.
Очень немногие пользователи сталкиваются с файлами, имеющими расширение.svg, и в большинстве случаев не то что некоторые, а практически все юзеры удаляют такие файлы, как говорится, без разбора, совершенно не задумываясь о том, какой программе изначально был сопоставлен файл SVG. Сейчас речь пойдет именно о том, каким средствами можно открыть файл для редактирования и вообще, стоит ли это делать.
Расширение.svg: чем открыть?
Для начала рассмотрим самые простые понятия. Для непосвященного пользователя вопрос о том, чем открывать SVG-файл, может остаться непонятым. Тут стоит обратить внимание на то, что изначально файлы такого типа предназначены для обработки графики с изменением растрового или векторного режима. Если конечный пользователь в этом вопросе, как говорится, профан, то и объяснять ему нечего.
Для остальной аудитории отметим, что сама проблема, чем открывать SVG-формат, в большинстве случаев связана только с выбором соответствующего приложения, установленного по умолчанию или подобного ему.
по умолчанию?
Как известно, самым простым способом открытия файла любого типа является двойной клик в обычном «Проводнике». При этом операционная система (в данном случае Windows) сама определяет, какое именно средство из ее набора будет использовано для открытия файла заданного типа. При этом SVG-файл является, по сути, универсальным.
По существу любая программа, поддерживающая стандарт Scalable Vector Graphics, откуда, собственно, и пошло сокращение, может работать с ним без проблем. В принципе тот же Adobe Illustrator или пакет последней версии или подобные им программные пакеты способны обрабатывать файлы такого типа. При установленных приложениях проблем возникнуть не должно.
Но вот если используется какая-то простенькая утилита типа обычного «майкрософтсофского» Paint, Paint .NET или редакторов, входящих в состав основного пакета Microsoft Office любой версии и года выпуска, тут на что-то особенное рассчитывать не приходится. Они хоть и могут работать с такими данными, но не всегда являются лучшими утилитами для редактирования. Файл SVG ними может и не распознаваться.
В лучшем случае можно просто просмотреть изображение, изменить его позицию на листе, немного «подредактировать» краски или насыщенность, но в остальном все останется, как было (а то и хуже). Попробуем посмотреть на то, чем открывать SVG-файл в плане редактирования с применением сопутствующих программ и приложений.
Средства обработки данных формата SVG
Как ни удивительно это звучит, но считается, что само расширение.svg не имеет принадлежности сопоставленной программы, хотя и считается форматом масштабируемой графики. Чем открывать SVG-файл, особо не имеет значения. В принципе, при достаточном количестве установленных программ и приложений операционная система сама предложит выбрать наиболее подходящее приложение (любой пакет Adobe, вариации Paint, Corel и т.д.).
Тут, кстати, не стоит забывать и том, что та же проблема, связанная с тем, как и чем открывать SVG-файл, имеет обратную сторону медали. Дело в том, что файлы такого типа могут содержать разметку HTML или XML. Так что редактировать такие данные придется при помощи специализированных утилит.
Итог
В общем и целом, если оценивать данный вопрос, так сказать, в глобальном плане, можно отметить, что открытие SVG не выходит за рамки общепринятых понятий.
И это понятно, ведь сам формат и сопутствующее ему расширение относятся к графике, а значит, и открытие для просмотра, и возможность редактирования предусмотрены изначально, и вне зависимости от присутствия специальных редакторов, и тем более, операционных систем.
В целом же можно посоветовать только инсталляцию универсальных клиентов типа ACDSee или чего-то подобного, которые способны не только распознавать файл SVG на начальном уровне (инициализация, сопоставление приложениям, средства просмотра и т.д.), но и работать с ним в полноценном режиме редактирования, применение которого может изменить даже саму структуру искомого файла. В этом смысле может поддерживать любые внутренние внешние изменения даже касательно атрибутики.
Большинство популярных графических редакторов позволяет сохранять изображения в нескольких форматах. Если программа работает с растровой графикой, то для сохранения файлов предлагаются растровые форматы, если с векторной, то, соответственно, векторные форматы. Однако есть растровые редакторы, которые поддерживают экспорт рисунков в векторные и смешанные форматы. Таковым, к примеру, является Adobe Photoshop, умеющий экспортировать рисунок в SVG – достаточно распространенный сегодня формат, способный хранить как растровую, так и векторную графику.
Что за формат SVG и где используется
Разработанный в 2001 году Консорциумом Всемирной паутины, формат SVG представляет собой не совсем обычный документ. В его основу положены языки разметки VML и PGML, то есть речь идет, по сути, о текстовом файле. При этом редакторы и браузеры интерпретируют SVG как изображение, которое может быть как статическим, так и анимированным. Будучи наиболее распространенным среди прочих форматов, предназначенных для хранения векторной графики, в настоящее время SVG активно используется для хранения и распространения векторных и смешанных изображений в интернете.
Как и все форматы, SVG имеет свои плюсы и минусы. К первым относятся масштабируемость без потери качества, относительно малый вес, возможность интеграции в SVG-документы PNG, GIF, JPG-изображений, редактирование (при наличии соответствующего опыта) в текстовых редакторах, индексирование поисковыми роботами, поддержка анимации и распространенность. К преимуществам формата следует также отнести хорошую сжимаемость, открытость и адаптивность.
С другой стороны SVG наследует недостатки со всеми вытекающими. Формат плохо подходит для создания сложных объектов, так как файлы 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» и получите результат.
Форматов для изображений существует очень много, но все они делятся на два больших класса – растровые и векторные . Первые в основном используются для различной сложной и детальной графики, например, фотографии. В них каждый пиксел – мельчайший элемент, может иметь собственный цвет, и в файле, в общем, просто сохраняются цвета для каждой точки изображения. Конечно, используются разные методы, чтобы сжать размер информации, и от этого происходит много растровых форматов – bmp, png, jpg и прочие. Обычно наилучшую эффективность показывает jpg, так как получается небольшой файл при достаточно хорошей детализации. Но у него есть недостаток – потеря информации при сжатии информации. Поэтому, если уменьшать размер файла, происходит ухудшение изображения .
Работа с файлами SVG.
Да и при увеличении таких фотографий становятся видны пикселы. Векторные форматы работают совсем по другому принципу. Они используют линии, отрезки, фигуры, которые описываются математическими формулами. Любое пространство, которое ими ограничивается, можно залить цветом или градиентом. В результате получается изображение, не привязанное к конкретным размерам – его можно легко сжать или растянуть до огромных размеров без потери качества. Одним из таких векторных форматов и является SVG. И он становится всё популярнее, особенно в среде веб-разработки.
Общее описание расширения
Тип файла SVG – сокращение от Scalable Vector Graphics, то есть масштабируемая векторная графика . Для описания изображения используются языки разметки VML и PGML. По сути, это текстовый документ, в котором для каждой фигуры описаны координаты вершин и линий, проходящих через них, а также цвета разных элементов. Первая версия этого формата вышла в 2001 году, и сейчас активно разрабатывается вторая версия. То есть он является перспективным и развивается. Одно из достоинств – малый размер файла, в котором могут быть сохранены довольно сложные рисунки. Поэтому сейчас всё больше иконок, пиктограмм, логотипов и других элементов сайтов используется именно в этом формате, а не в растровых. Это ускоряет загрузку сайта. К уникальным возможностям формата SVG относятся интерактивность и анимация. Первая позволяет картинке реагировать на действия пользователя, например, на клик мышкой или перемещение каких-то элементов. Анимация позволяет создавать довольно сложные сценарии. Всё вместе позволяет создавать очень красивые и живые графические элементы для сайтов. Их даже можно встраивать в обычные растровые изображения в форматах png, jpg и прочих.
Чем открыть файл SVG
В Интернете можно найти множество таких картинок на фотостоках, в том числе бесплатных. Создаются они в графических редакторах Adobe Photoshop, Illustrator, Corel Draw, и некоторых других. Но возникает вопрос – чем открыть формат SVG. Ведь встроенные средства Windows не показывают, какие картинки в них содержатся. Хотя редактировать SVG можно даже в текстовом редакторе, например, в Блокноте, ведь это текстовый документ, но для этого нужно иметь немалые знания в языках разметки. Открыть файл SVG можно либо в программе, в которой он создавался, либо в каком-нибудь другом графическом редакторе, поддерживающем этот формат. Самые популярные:
Конечно, этими названиями список программ для работы с векторной графикой не исчерпывается. Их очень много, в том числе и самый популярный редактор Adobe Photoshop может сохранять изображения как векторы и имеет плагин для их открытия. Не стоит забывать и про популярнейший редактор векторной графики Corel Draw, который можно назвать самым популярным.
Что ещё может вызывать проблемы с файлом
Обычными средствами Windows, да и многих других операционных систем, файлы SVG не открываются. Чтобы видеть их содержимое и тем более редактировать их, нужно установить любой графический редактор с поддержкой этого формата.