Где взять или как сделать SVG-картинки

дудл-видео

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

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

Где скачать SVG-изображения

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

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

векторные изображения

Далее кликайте по нужной картинке, которая загрузится в отдельном окне. Там обязательно отметьте переключатель «SVG» и жмите кнопку «Бесплатная загрузка»:

скачать SVG-изображения

Всё просто. Ещё один сервис, где можно бесплатно скачать 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, которая нас интересует. Говоря простым языком это означает: мы можем повторить любой контур изображения, какими бы изогнутыми не были линии этого контура.

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

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

инструменты 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 — не подходит.

Читайте урок по созданию рисованного видео в программе Sparkol VideoScribe.