Как сделать svg картинку

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

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

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

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

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

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

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

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

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

Рис.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.

Конвертируйте изображение в формат SVG

Он-лайн конвертер изображений

Бесплатный он-лайн конвертер позволяет конвертировать изображения в формат SVG (Scalable Vector Graphics) (внимание! бета-версия конвертера). Вы можете как загрузить файл, так и указать ссылку на изображение. Вы также можете наложить цифровые эффекты.

Ошибка: количество входящих данных превысило лимит в 10.

Чтобы продолжить, вам необходимо обновить свою учетную запись:

Ошибка: общий размер файла превысил лимит в 100 MB.

Чтобы продолжить, вам необходимо обновить свою учетную запись:

Ошибка: общий размер файла превысил абсолютный лимит в 8GB.

Для платных аккаунтов мы предлагаем:

Вплоть до 8GB общего размера файла за один сеанс конвертирования
200 файлов на одно конвертирование
Высокий приоритет и скорость конвертирования
Полное отсутствие рекламы на странице
Гарантированный возврат денег

До 100 Мб общего размера файла за один сеанс конвертирования
10 файлов на одно конвертирование
Обычный приоритет и скорость конвертирования
Наличие объявлений

Мы не может загружать видео с Youtube.

В случае конвертирования растровых изображений (PNG или JPG) в формат SVG произойдет преобразование ваших форм и объектов в черно-белую векторную графику, которая масштабируется без какой-либо потери качества. Такие изображения могут быть раскрашены с помощью бесплатных программ по работе с векторными изображениями (Inkscape и др.). Фотографы в большинстве случаев не добьются желаемого результата при конвертировании растрового изображения в формат SVG.

Если вы конвертируете в формат SVG какое-либо векторное изображение (например, формата eps или ai), конвертер попытается сохранить все векторные и цветовые данные, а также обеспечит максимально возможную схожесть двух файлов.

Конвертер формата Scalable Vector Graphics (SVG) позволяет вам конвертировать файлы более чем 130 форматов. Для получения большей информации о формате перейдите по ссылке. Ниже представлен список направлений конвертирования:

SVG, Scalable Vector Graphics File (.svg)

Файлы SVG представляют собой двухмерные векторные изображения на основе XML. Спецификации формата SVG открыты для доступа сторонних лиц. Они были разработаны консорциумом World Wide Web Consortium.
Что такое SVG?

Читать еще: Как сделать военную машину в майнкрафте

6 бесплатных онлайн SVG-редакторов: сравнение

Дата публикации: 2017-04-03

От автора: SVG-изображения не так распространены, как наши любимые растровые форматы PNG и JPG, однако преимущества векторной графики привлекают все больше дизайнеров. Дизайнеры все чаще используют векторную графику в своих проектах. Раньше нам нужно было скачивать десктопные приложения типа Adobe Illustrator и Inkscape, но в 2017 проектировать векторную графику можно, не выходя из браузера. Если вы искали бесплатный SVG-редактор, то можете начать с этих шести бесплатный инструментов.

Vectr

Vectr – хороший выбор для новичков и продвинутых пользователей SVG. Интерфейс аккуратный и не переполнен множеством инструментов, которыми вы не будете пользоваться. Редактор хорошо подходит для новичков в векторной иллюстрации. Пользователь не должен теряться среди инструментов, которые непонятно для чего используются. В комплекте идет несколько уроков. Даже если вы полный ноль с SVG, у вас есть возможность быстро научиться.

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

При загрузке сложных иллюстраций в Vectr могут возникать ошибки (карты или детальные диаграммы). Редактор не всегда хорошо обрабатывает сложную графику. Однако для более простого SVG (иконки, логотипы и т.д.) этого редактора будет достаточно.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Если в онлайн версии нет нужных вам функций, можно скачать десктоп версию приложения. Редактор доступен для Windows, Mac, Linux и Chromebook.

Возможно, самая крутая функция в Vectr – вы можете делать ссылки и вставлять изображения прямо с сайта Vectr, что делает его эффективным хостингом для SVG. Множество сервисов блокируют загрузку SVG файлов, поэтому это серьезный плюс. Вы можете показывать SVG изображения из Vectr на удаленных сайтах типа WP, Medium, Tumblr и т.д., которые блокируют прямую загрузку SVG, но разрешают ее показ по удаленке.

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

С этой целью Vectr недавно выпустили версию редактора в виде плагина для WP .

RollApp

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

Для работы в RollApp нужен аккаунт. Можно зарегистрировать новый или войти с помощью Google, Facebook, Amazon. Очень удобно, я ненавижу создавать тысячи новых аккаунтов лишь для того, чтобы увидеть приложение.

После авторизации откроется следующая страница:

Inkscape во всей красе! Без сомнения, RollApp – самое богатое на функционал приложение из списка. Вы буквально используете Inkscape в браузере! Я не сравнивал все до мелочей, но на вид в этом приложении есть ВСЕ фукнции Incscape, такие как слои, объекты, текст, пути, фильтры, эффекты, расширения и т.д.

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

Читать еще: Велотренажер похудей сделать своими руками схема

BoxySVG

Если вы давно читаете SitePoint, вам должен быть знаком редактор BoxySVG , потому что за последние 12 месяцев мы уже рассказывали про него. Не буду делать детальный обзор, так как это уже сделано в этой статье .

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Janvas

Пару лет назад Janvas был очень популярным SVG-редактором. К сожалению, последнее время данный редактор не разрабатывается, но даже так он до сих пор работает. Веб движется вперед, а Janvas стоит на месте, поэтому интерес к нему угас. Alex с сайта SitePoint работал с этим инструментом немного в 2013-14 (в том числе с платной версией) и даже отвечал на вопросы некоторое время на странице Google+. Janvas был довольно мощным инструментом.

Главная проблема Janvas – он немного устарел. Браузеры развиваются, а приложения, которые не следуют за браузерами, с каждым днем становятся все менее стабильными. В Janvas множество функций: фигуры, текст, инструменты рисования, пути, маски и слои. Однако пользователи на форумах говорят, что множество этих функций не приносят желаемого результата.

Есть хорошая новость – выйдет новая версия в виде Chrome-приложения. Надеемся, они пофиксят проблемы.

DrawSVG

Возможно, вы уже выбрали себе бесплатный онлайн SVG редактор. Если же нет, то идем дальше. DrawSVG – полностью совместимый SVG-редактор с множеством функций. Мне очень нравится, что у этого приложения дизайн реально заточен под веб и не похож на порт десктопного приложения под браузер. Меню расположено слева, по клику открывается меню второго уровня и т.д.

С помощью DrawSVG можно рисовать, изменять и рендерить объекты. Рисовать можно простые фигуры, есть кривые Безье, прямой и изогнутый текст, множество стилей обводок и заливок и т.д. Также SVG можно экспортировать в PNG.

SVG-edit

SVG-edit – дедушка онлайн редакторов векторной графики, появился в середине 2000-х. Серверного функционала нет, все работает в браузере. Сохранить свою работу без добавления своего собственного функционала нельзя.

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

С помощью SVG-edit можно рисовать простые фигуры (линии, прямоугольники, круги, многоугольники, линии от руки и т.д.), использовать пути, слои, градиенты, можно просматривать и редактировать SVG-исходники, экспортировать в PNG, JPEG, BMP, WEBP и т.д.

Заключение

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

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

PS: также можно попробовать Figma . Это больше инструмент для создания UI, а не SVG-редактор. Тем не менее, он имеет отличный набор инструментов и генерирует хорошо оптимизированный код SVG.

Автор: Ada Ivanoff

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Источники:

http://webmastersam.ru/kak-sdelat-svg-kartinki.html

http://image.online-convert.com/ru/convert-to-svg

http://webformyself.com/6-besplatnyx-onlajn-svg-redaktorov-sravnenie/