Как создать svg файл. Обзор софта для работы с SVG-графикой. Минусы использования SVG

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

Рисунок SVG – изображение на основе XML, применяемое для обеспечения внедрения векторной графики в браузеры . Другими словами, данная технология позволяет объединить графику, анимацию, текст и интерактивные компоненты. За счет того, что SVG описывает изображение посредством стандартных норм XML, он может быть создан как в графическом редакторе, так и в редакторе верстки html-страниц. Более того, для этого подойдет даже обычный “Блокнот” (Notepad).

Рисунок SVG может быть изменен в размере, при этом маловероятно снижение качества . Кроме этого, SVG-стандарт позволяет описывать анимацию и, используя JavaScript, вполне возможно сделать SVG интерактивным. Однако, несмотря на все преимущества данного формата, SVG пока не поддерживается многими интернет-браузерами. Поэтому веб-дизайнеры, как правило, предпочитают работать с более распространенными растровыми форматами, такими как GIF и JPG.

Для просмотра и редактирования рисунка SVG потребуется специальный плагин, который предстоит скачать с официального сайта Adobe или установить его при инсталляции Illustrator как один из компонентов.

Использовать SVG при веб-разработке довольно легко, однако существуют некоторые особенности, которые стоит учесть. Для начала следует создать изображение, а затем ровно обрезать холст по краю картинки. В SVG холст строится подобным образом, как в JPG или PNG. Сохранить созданный рисунок SVG в соответствующем формате непосредственно в Adobe Illustrator легко: появится диалоговое окно, в котором при нажатии на кнопку “ОК” файл будет сохранен, а при выборе функции “SVG Code” перед вами предстанет текстовый редактор с SVG кодом .

Рисунок SVG можно сохранить как обычный файл, что позволит в дальнейшем использовать его в теге «img», изменяя размер путем определения свойств “height” и “width”.

Благодаря тому, что редактор Illustrator позволяет скопировать код, который можно вставить в HTML, рисунок SVG будет отображаться так же, как и при использовании тега “img” . Это очень удобно, учитывая тот факт, что образ иллюстрации в документ приходит вместе с кодом, и при этом получается избежать HTTP запроса.

Кроме Adobe Illustrator, рисунок SVG можно создать при помощи таких программ, как Inkscape, Corel Draw, Sketch/Skencil, xfig, Karbon14, Xara.

При создании рисованного видео в программе Sparkol VideoScribe возникает вопрос: где взять или как самому сделать SVG-картинки, и в какой программе?

Вы узнаете, где бесплатно скачать SVG-картинки. Познакомитесь с графическими программами, в которых можно сделать изображения в формате SVG самостоятельно.

Г

Приведу два лучших сервиса, где вы сможете скачать SVG-изображения абсолютно бесплатно. Первый из них: pixabay.com — на нём есть поддержка русского языка. Потребуется регистрация (быстрая), но зато он наиболее удобен, и хорош, в смысле выбора картинок.

Картинки там имеют удобное разбиение по тематикам: люди, бизнес, медицина, техника и т.д. Что необходимо сделать обязательно? Выбрать формат «Векторы» и прозрачный фон, можете также выбрать чёрно-белый цвет изображений:

Всё просто. Ещё один сервис, где можно бесплатно скачать SVG-изображения: openclipart.org . Там даже регистрироваться не надо.

Но что делать, если вам требуются оригинальные SVG-картинки? Их можно сделать самому, даже если вы не умеете рисовать.

К ак самому сделать изображения SVG

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

Но что делать тем, кто не имеет навыков рисования? А мышкой нарисовать, тоже не получится.

Существует несколько графических программ, в которых можно сделать изображения SVG самостоятельно. Это редакторы векторной графики, например: CorelDraw, Adobe Illustrator, Sketsa SVG Editor и некоторые другие. Но мы рассмотрим создание SVG-картинки в бесплатном векторном редакторе Inkscape (inkscape.org) — который подходит для любой ОС.

Inkscape предназначен специально для работы с графическим форматом SVG. Он поддерживает конвертацию SVG в PNG и наоборот: позволяет конвертировать некоторые графические форматы в SVG. Но! Такие SVG-картинки не будут прорисовываться в программе VideoScribe. Но выход есть!

Не буду описывать все достоинства редактора Inkscape. Но остановлюсь на лепке узлов — уникальной возможности Inkscape, которая нас интересует. Говоря простым языком это означает: мы можем повторить любой контур изображения, какими бы изогнутыми не были линии этого контура.

На практике это значит: мы, используя дополнительный полупрозрачный слой, сможем легко перерисовать любую картинку — как через кальку! И, если нужно, покрасить — залить замкнутые контуры картинки любым цветом.

Для этого нам потребуется любое векторное изображение, желательно с явными контурами. Открываем его в программе, масштабируем размер, чтобы было удобно с ним работать:

Рис.1. Рабочее окно и инструменты программы Inkscape:
1 - Выделение (F1);
2 - Редактировать узлы контура или рычаги узлов (F2);
3 - Масштаб (F4);
4 - Рисовать кривые Безье и прямые линии (Shift+F6).

Создаём дополнительный слой: Shift+Ctrl+N («Слой - Новый слой»). Регулируем прозрачность первого слоя, чтобы он хорошо просвечивался под вторым слоем, открыв панель — Shift+Ctrl+L («Слой - Слои»):

Опять выделяем второй слой, делая его рабочим, и выбираем инструмент рисования кривых и прямых линий (Рис.1-4). С помощью него абы как повторяем линию контура на втором слое:

Двойной клик позволит прервать рисование линии в точно заданном месте.

Инструментом (Рис.1-2) просто подтягиваем рычаги (прямые отрезки линий) до контура картинки:

Вот тут-то и проявляются замечательные возможности программы Inkscape. Слегка перемещая курсор левее-правее, мы быстро добиваемся точного повторения заданного контура. Изгиб может быть любой выпуклости. При необходимости, этим же инструментом (Рис.1-2) можно смещать узлы — для более точной корректировки их положения.

Теперь остаётся повторить эту операцию нужное количество раз. Для рисования мелких деталей просто увеличивайте масштаб (Рис.1-3) картинки, передвигая нужный участок в центр рабочего окна.

Осталось ещё кое-что уточнить. Чтобы установить толщину или цвет линии, заходим: Shift+Ctrl+F («Объект - Заливка и обводка»):

При открытии нового изображения программа показывает прямоугольную рамку, которая не всегда совпадает с самим рисунком. Её можно убрать так — заходим в Shift+Ctrl+D («Файл - Свойства документа») — далее убрать галочку в поле «Показывать кайму холста»:

Всё. Удаляем первый, теперь уже не нужный слой, и сохраняем картинку: Shift+Ctrl+S («Файл - Сохранить как»), выбрав тип файла: .svg.

Ещё одна маленькая деталь. Проводник Windows не показывает эскизы (превью) графических файлов SVG. Для удобства разумно поступить так, как сделали разработчики Sparkol VideoScribe. Создать небольшого размера, около 100 px по ширине или высоте (сами SVG-изображения не имеют размера), копии новых картинок, экспортировав их в формат PNG. Это делается в Inkscape: «Файл - Экспортировать в PNG». Сохраняйте их в той же папке, под тем же именем, что и их «копии» SVG.

Но если у вас Windows 7, то вам повезло. Найдите в интернете бесплатное расширение для Проводника, вот его точное название: «SVG Viewer Extension for Windows Explorer». Оно позволяет просматривать SVG-файлы в виде эскизов. Для Windows XP — не подходит.

Мы с вами разобрались какие бывают виды изображений и какие файлы, и узнали что для рисованного видео создан специальный файл svg.

В интернете его найти трудно так как он создается в определенных программах и ими же и открывается, А выглядит он вот так:

Этот файл, как я уже говорила в предыдущей статье, создан для программ рисованного видео. С его помощью рисованное видео приобретает еще большую привлекательность.

Файл позволяет как рисовать с контурами, так и делать прорисовки без контуров.

Для примера прорисовка в программе файла PNG и прорисовка без контуров с помощью файла SVG:

А в этом пример вы увидите как выглядит и рисуется файл с помощью контуров SVG файл сделан с помощью векторного растрирования в программе Inscrabe,

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

Хорошо получается растрировать в векторную графику изображения с более четким контуром.

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

Сайт который поможет с конвертацией в любой файл, но работает только в черно-белых тонах:

Скачивание начнется автоматически, но ваш антивирус может вам сказать что файл такого рода опасен для компьютера. Мой антивирус ругается на все редкие файлы.

Второй онлайн сайт который я нашла в интернете

Этот сайт немножко по сложнее и выводит файлы в цвете. При этом количество цветов можно выбирать самому. И на этом сайте можно сделать так же svg для создания рисунка без контуров. Советую загружать сайт на Google и сделать перевод, так как он английский, но в нем можно разобраться.

С онлайн сайтами я думаю все понятно, посмотрим, что мы можем найти из программ.

Adobe Illustrator один из самых распространенных и известных редакторов. Он платный, но ничего не возможного нет, его можно найти и бесплатным и еще и русским. А так же по работе с ним есть бесчисленное множество уроков, курсов как бесплатных так и платных.

Файлы изготовленные в нем качественные и прекрасно работают с программой Explaindio

Из всего перечня только Inscape бесплатный графический редактор. Он выступает не плохим аналогом такой программе как Adobe Illustrator.

Скажу правду в Corel я не пробовала работать.

В Vector magic, можно конвертировать любое изображение в другие файлы, это скорее конвертер, чем редактор. Но достаточно не плохой.

Вот мы с вами и познакомились с файлом SVG. Новым фалом который появился только в начале 2000 годов, но уверенно начинает занимать свое место среди веб-разработчиков и дизайнеров.

Жду вас у себя на боге. До новых встреч.

С уважением к вам Валентина Дудниченко.

SVG представляет собой формат изображения для векторной графики. В буквальном смысле это ни что иное, как масштабируемая векторная графика. То есть это как раз то, с чем вы работаете в Adobe Illustrator. Использовать SVG при web-разработке довольно легко, но есть особенности, которые стоит рассмотреть.

Для чего используют SVG

• Маленький размер файла, который хорошо сжимается
• Масштабирование до любого размера без потери качества
• Отлично смотрится на дисплеях retina
• Полный контроль дизайна при интерактивности и в фильтрах

Нарисуем что-нибудь для предстоящей работы в Adobe Illustrator. Возьмём птичку Kiwi:

​

Обратите внимание, что холст обрезается ровно по краю картинки. Холст в SVG абсолютно идентично строится, как PNG или JPG. Вы можете сохранить файл непосредственно из Adobe Illustrator как SVG файл.

​

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

​

Самое интересное здесь то, что вы можете либо нажать ОК и сохранить файл, или нажать кнопку “SVG Code…” и откроется текстовый редактор с кодом SVG.

​

Оба способа могут оказаться полезными.

Используем SVG в виде тега img

В Illustrator наш холст получился 612px ✕ 502px.

Насколько большим изображение будет на страницу решать вам. Вы можете изменить размер изображения путем определения свойств width и height, то есть абсолютно так же, как и с PNG или JPG. Вот пример:

Check out this Pen!

Как сделать кроссбраузерный SVG

Используя SVG таким образом, нужно иметь ввиду о разной поддержки браузерами. По сути, SVG работает везде кроме IE8 и нижу, а также Android 2.3 и ниже.

Если вам необходимо использовать SVG, но также нужна поддержка вышеперечисленных браузеров, есть несколько вариантов решения проблемы. Я использовал несколько техник в различных проектах для решения этой проблемы.

Одним из способов, чтобы проверить поддержку SVG является Modernizr, с помощью которого меняется путь src:

If (!Modernizr.svg) { $(".logo img").attr("src", "images/logo.png"); }

David Bushell придумал очень легкий альтернативный способ, но он содержит javascript в разметке:

Также может помочь сервис SVGeezy. По ходу продолжения этой статьи мы разберём много различных резервных методов для поддержки SVG.

Использование SVG в качестве фона background-image

По аналогии с тегом img, SVG можно использовать в качестве фонового изображения:

Kiwi Corp .logo { display: block; text-indent: -9999px; width: 100px; height: 82px; background: url(kiwi.svg); background-size: 100px 82px; }

Обратите внимание, мы устанавливаем background-size точно таким же, как и размер элемента. Это необходимо сделать, так как в противном случае мы бы увидели небольшую верхнюю часть оригинального изображения. Эти цифры учитывают оригинальные пропорции изображения. Вы также можете использовать в качестве значений background-size ключевые слова, например contain, чтобы изображение полностью занимало весь элемент.

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

Modernizr может помочь нам здесь еще более эффективным способом, чем в случае с img. Дело в том, если заменить фоновое изображение с поддерживаемым форматом, то будет выполнен лишь один HTTP запрос вместо двух, как в случае с img. Modernizr добавляет имя класса “no-svg” к тегу HTML, если браузер не имеет поддержки SVG:

Main-header { background: url(logo.svg) no-repeat top left; background-size: contain; } .no-svg .main-header { background-image: url(logo.png); }

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

Использование “inline” SVG

Выше упоминалось, что при сохранении картинки в формате SVG, с помощью редактора Illustrator можно получить правильный SVG код (также можно отрыть файл с помощью текстового редактора и скопировать этот код). Вы можете скопировать этот код в ваш HTML и SVG будет отображаться абсолютно также, как при использовании img.

Это может быть полезным, так как образ изображения приходит вместе с кодом в документ и при этом не осуществляется HTTP запрос. Другими словами, преимущества такие же, как при использовании данных Data URI. Однако, недостатки тоже есть. Из-за вставки вставки прямого кода SVG, документ начинает быть похож на большой раздутый кусок дерьма.

Также есть вариант для вставки SVG на стороне сервера:

Оптимизация SVG

Adobe Illustrator не производит по умолчанию действия по оптимизации получаемого SVG изображения. Он предоставляет DOCTYPE и заметки, и всё это по большому счёту мусор. SVG по умолчанию имеет довольно небольшой вес, но почему бы не сделать его ещё меньше? Peter Collingridge предоставил онлайн инструмент для оптимизации SVG Optimiser. С помощью этого сервиса вы можете закачать старый файл и получить оптимизированный новый.

Если хотите больше хардкора – без проблем, вот инструмент для оптимизации SVG с помощью серверного javascript Node JS tool https://github.com/svg/svgo

Стилевое оформление SVG

Видите, как SVG похож на HTML? Это потому что они оба являются данными XML. В нашем дизайне есть два элемента, которые составляют основу, это ellipse и path. Мы можем без проблем указать им классы через HTML код.

Сейчас мы можем контролировать эти элементы с помощью специального SVG CSS. Этот CSS не должен напрямую встраиваться в SVG, он может быть расположен абсолютно в любом месте. Обратите внимание, что SVG элементы имеют специальный набор стилей, которые созданы специально для работы с векторной графикой. Например, используется не обычный background-color, а fill. Хотя некоторые обычные стили также работают, например:hover.

Kiwi { fill: #94d31b; } .kiwi:hover { fill: #ace63c; }

В SVG имеются забавные фильтры. Например размытие:

...

Затем вы можете при необходимости применить это в css:

Ground:hover { filter: url(#pictureFilter); }

Вот, что получилось:

Check out this Pen!

Поддержка “inline” SVG браузерами

Список браузеров, поддерживающих данный режим отображения SVG можно посмотреть здесь http://caniuse.com/#feat=svg-html5. Опять же, поддержки нет в IE8 и Android 2.3.

Один из вариантов фолбэка для такого типа SVG:

...

Затем снова используем Modernizr:

Logo-fallback { display: none; /* Make sure it"s the same size as the SVG takes up */ } .no-svg .logo-fallback { background-image: url(logo.png); }

Использование SVG в качестве объекта object

Если использование “inline” SVG вам не по душе (помните, что у этого варианта есть недостатки, например отсутствие кеширования), вы можете связать SVG с объектом object и потом менять его с помощью css:

Для кроссбраузерной поддержки используем Modernizr:

No-svg .logo { width: 200px; height: 164px; background-image: url(kiwi.png); }

Этот вариант отлично работает с кешированием и имеет самую большую поддержку браузерами, чем все вышеперечисленные. Но, чтобы подействовать с помощью CSS на такой объект, придётся прописывать стили непосредственно в SVG файл.

...

Использование Data URI вялется способом уменьшения веса SVG. Mobilefish.com предоствляет онлайн инструмент оптимизации для этой цели. Достаточно вставить содержимое вашего SVG файла и заполнить форму, далее результат будет отображён в текстовом поле, который можно скопировать. Выглядит это так:

​

Вы можете использовать этот код где угодно! Нпример:

Logo { background: url(data:image/svg+xml;base64,); }

И кстати, если у вас есть встроенные style в SVG, который находится до base64, он будет работать, если вы используете его, как object!

Поддержка масштабируемой векторной графики (SVG) превосходна работает во всех современных браузерах, формат изображения появляется в удивительных контекстах на многих различных веб-страницах. Но несмотря на то, что в течение почти двух десятилетий он был стандартом, SVG остается несколько новым форматом для некоторых дизайнеров и разработчиков, оставляя их в замешательстве относительно того, как он должен использоваться на сайте. Вот, некоторые причины, почему вы должны использовать SVG:

Крошечный размер файла

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

Масштабируемость

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

Взаимодействует с DOM

SVG иногда упоминается как «рисование с разметкой»: каждый элемент в SVG-изображении взаимодействует с DOM, это означает, что CSS и JavaScript могут манипулировать части SVG-документа. В отличие от растровой графики, каждая отдельная форма в SVG может иметь свой собственный идентификатор или класс.

Легко модифицировать и адаптировать

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

логотипов

• иллюстраций и чертежей

Инструменты для работы с SVG

Хотя вы можете создать документ SVG с помощью любого текстового редактора, программы для векторной иллюстрации, например Adobe Illustrator или Inkscape, как правило, является лучшим выбором (хотя следует отметить, что другие приложения, включая 3D-программы, такие как Blender и серверные приложения, могут экспортировать SVG).

Независимо от того, что вы используете, вы должны знать, что создание SVG из приложений по-прежнему иногда оставляет желать лучшего: результирующий документ часто перекодирован и иногда плохо отформатирован. Файл.svg можно сделать меньшим, более компактным, обработав его с помощью оптимизатора, такого как SVGOMG . Иногда передача неверного документа.svg через валидатор W3C может помочь вам выявить проблемы.

Интеграция SVG

Существует три основных способа, которыми SVG можно использовать непосредственно на веб-странице:

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


Подобно растровым изображениям, файл SVG можно ссылаться на тег или через CSS в качестве фонового изображения. Это часто лучший способ, если SVG не нуждаются в индивидуальном внимании CSS и JavaScript.


Вставляется как