Делаем SVG изображение

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

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

Inkscape специально заточен для работы с графическим форматом SVG. Он поддерживает конвертацию SVG в PNG и наоборот. Но что делать тем, кто не имеет навыков рисования? А мышкой нарисовать даже простенькую картинку не получится, профессиональные дизайнеры используют для рисования графические планшеты — дигитайзеры.

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

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

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

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

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

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

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

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

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

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

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

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

Как включить эскизы файлов SVG в папках Windows

Проводник Windows не показывает в папках эскизы (миниатюры) графических файлов SVG. Чтобы распознавать такие файлы, обычно создают их копии небольшого размера в формат PNG. Их делают в Inkscape: «Файл — Экспортировать в PNG», сохраняя в той же папке, под тем же именем, что и файлы SVG.

Но эту проблему поможет решить замечательная программа «SVG Viewer Extension for Windows Explorer». Она отлично работает в новых версиях Windows 10, 11, начиная с версии 7 (как 64-разрядных, так и 32-разрядных системах). Программа позволит просматривать SVG-файлы в виде эскизов, её без труда можно найти в сети.

Где взять готовые SVG-изображения

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

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

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

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