Как сделать картинку в векторном формате
Работаем с векторной графикой онлайн
Раньше, чтобы работать с SVG-картинками, вам обязательно пришлось бы установить на свой компьютер одно из специализированных десктопных решений вроде Adobe Illustrator или Inkscape. Теперь же подобные инструменты доступны онлайн, без необходимости скачивания.
Как работать с SVG онлайн
Выполнив соответствующий запрос в Google, вы сможете ознакомиться с огромным количеством всевозможных векторных онлайн-редакторов. Но подавляющее большинство таких решений предлагают довольно скудные возможности и чаще всего не позволяют работать с серьезными проектами. Мы же рассмотрим лучшие сервисы для создания и редактирования SVG-изображений прямо в браузере.
Конечно, онлайн-инструменты не могут полностью заменить соответствующие десктопные приложения, однако большинству пользователей предлагаемого набора функций будет более чем достаточно.
Способ 1: Vectr
Продуманный векторный редактор от создателей знакомого многим сервиса Pixlr. Этот инструмент будет полезен как новичкам, так и опытным пользователям в работе с SVG.
Несмотря на обилие функций, потеряться в интерфейсе Vectr будет достаточно сложно. Для начинающих предусмотрены подробные уроки и объемные инструкции по каждой из составляющих сервиса. Среди инструментов редактора имеется все для создания SVG-картинки: фигуры, иконки, рамки, тени, кисти, поддержка работы со слоями и т.п. Нарисовать изображение можно с нуля либо же загрузить собственное.
К возможностям экспорта относится также одна из наиболее отличительных возможностей Vectr — поддержка прямых ссылок на SVG-проект в редакторе. Многие ресурсы не позволяют загружать векторные картинки к себе напрямую, но тем не менее разрешают их удаленное отображение. В этом случае Вектр можно использовать как самый настоящий хостинг SVG, чего другие сервисы делать не позволяют.
Следует отметить, что редактор не всегда корректно обрабатывает сложную графику. По этой причине некоторые проекты могут открываться в Vectr с ошибками или визуальными артефактами.
Способ 2: Sketchpad
Простой и удобный веб-редактор для создания SVG-изображений, основанный на платформе HTML5. Учитывая набор доступных инструментов, можно утверждать, что сервис предназначен исключительно для рисования. С помощью Sketchpad вы можете создавать красивые, тщательно проработанные картинки, но не более.
Инструмент располагает широким ассортиментом настраиваемых кистей различных форм и типов, набор фигур, шрифтов и стикеров для наложения. Редактор позволяет полноценно манипулировать слоями — контролировать их размещение и режимы смешивания. Ну и в качестве бонуса, приложение полностью переведено на русский язык, так что никаких сложностей с его освоением у вас возникнуть не должно.
При необходимости вы можете сохранить незавершенный рисунок как проект Sketchpad, а затем в любой момент закончить его редактирование.
Способ 3: Method Draw
Это веб-приложение предназначено для базовых операций с векторными файлами. Внешне инструмент напоминает десктопный Adobe Illustrator, но по части функционала здесь все значительно проще. Впрочем, есть в Method Draw и некоторые особенности.
Помимо работы с SVG-изображениями, редактор позволяет импортировать растровые картинки и создавать на их основе векторные. Делать это можно на основе ручной трассировки контуров при помощи пера. Приложение содержит все необходимые инструменты для компоновки векторных рисунков. Имеется расширенная библиотека фигур, полноцветная палитра и поддержка клавиатурных сокращений.
Чтобы экспортировать изображение, откройте пункт меню «File» и нажмите «Save Image…». Либо же используйте шорткат «Ctrl+S».
Method Draw однозначно не подойдет для создания серьезных векторных проектов — причиной тому нехватка соответствующих функций. Но благодаря отсутствию лишних элементов и грамотно организованному рабочему пространству, сервис может отлично служить для быстрого редактирования или точечной доработки простых SVG-картинок.
Способ 4: Gravit Designer
Бесплатный веб-редактор векторной графики для продвинутых пользователей. Многие дизайнеры ставят Gravit в один ряд с полноценными настольными решениями, как тот же Adobe Illustrator. Дело в том, что этот инструмент является кроссплатформенным, то есть в полном объеме доступен на всех компьютерных ОС, а также в качестве веб-приложения.
Gravit Designer находится в стадии активной разработки и регулярно получает новые функции, которых уже и так хватает для компоновки сложных проектов.
Редактор предлагает вам всевозможные инструменты для рисования контуров, фигур, путей, наложения текста, заливок, а также различных настраиваемых эффектов. Имеется обширная библиотека фигур, тематических картинок и значков. Каждый элемент в пространстве Gravit имеет перечень свойств, доступных для изменения.
Все это разнообразие «упаковано» в стильный и интуитивно понятный интерфейс, так, что любой инструмент доступен буквально в пару кликов.
Кроме того, есть вариант сохранения проекта как документ с расширением PDF.
Учитывая то, что сервис предназначен для полноценной работы с векторной графикой, его смело можно рекомендовать даже профессиональным дизайнерам. С помощью Gravit вы можете редактировать SVG-рисунки вне зависимости от платформы, на которой это делаете. Пока что данное утверждение применимо лишь для настольных ОС, но вскоре этот редактор появится и на мобильных устройствах.
Способ 5: Janvas
Популярный среди веб-разработчиков инструмент для создания векторной графики. Сервис содержит ряд инструментов для рисования с детально настраиваемыми свойствами. Главная особенность Janvas — возможность создания интерактивных SVG-картинок, анимированных с помощью CSS. А в связке с JavaScript сервис и вовсе позволяет строить целые веб-приложения.
В умелых руках этот редактор является действительно мощным инструментом, тогда как новичок из-за обилия всевозможных функций скорее всего просто не поймет, что к чему.
Да, инструмент, к сожалению не бесплатный. Но это профессиональное решение, которое и пригодится далеко не каждому.
Способ 6: DrawSVG
Удобнейший онлайн-сервис, позволяющий вебмастерам максимально просто создавать качественные SVG-элементы для своих сайтов. Редактор содержит внушительную библиотеку фигур, иконок, заливок, градиентов и шрифтов.
С помощью DrawSVG можно конструировать векторные объекты любого вида и свойств, изменять их параметры и рендерить в качестве отдельных картинок. Имеется возможность встраивать в SVG сторонние мультимедийные файлы: видео и аудио с компьютера или сетевых источников.
Этот редактор, в отличие от большинства других, не похож на браузерный порт настольного приложения. Слева расположены основные инструменты для рисования, а сверху — элементы управления. Основное пространство занимает холст для работы с графикой.
Окончив работу с картинкой, вы можете сохранить результат как SVG или в качестве растрового изображения.
DrawSVG можно назвать облегченной версией Janvas. Редактор поддерживает работу с атрибутами CSS, но в отличие от предыдущего инструмента, не позволяет анимировать элементы.
Перечисленные в статье сервисы — отнюдь не все доступные в сети векторные редакторы. Однако здесь мы собрали по большей части бесплатные и проверенные онлайн-решения для работы с SVG-файлами. При этом некоторые из них вполне способны конкурировать с десктопными инструментами. Ну а то, каким пользоваться, зависит лишь от ваших потребностей и предпочтений.
Создание в Фотошопе векторного изображения
Векторные рисунки весьма популярны, но их создание требует немалого терпения и усидчивости для новичка. Программа Photoshop используется при подготовке таких иллюстраций — с её помощью можно перевести фотографию в векторное изображение. В этой статье мы расскажем, чем отличается такой рисунок от растрового и как сделать векторное изображение в Фотошопе.
Виды изображений
Векторное
Когда вы создадите новый документ в Photoshop, напишите на белом листе любое слово, подобрав удобный размер (использование функций «Текст» — значок с буквой «Т» на панели инструментов).
Увеличьте масштаб инструментом «Лупа» — вы увидите, что буквы состоят из пикселей. На самом деле вид задаётся формулами, только отображение в программе выполняется пикселями.
Возвращаем нормальный размер, кликнув дважды на значок с рукой. Уменьшаем размеры следующим образом: «Редактирование» — «Трансформирование» — «Масштабирование». При уменьшении размеров качество букв сохраняется. Таким же способом увеличиваем текст максимально, качество так же остаётся хорошим, так как формулы работают при любом масштабе хорошо.
Типичный пример векторного изображения
Растровое
Чтобы перевести векторное изображение в Фотошопе в растровое, уменьшим готовую картинку. Затем проходим на вкладку «Слои», там выбираем «Растрировать» — «Текст». У нас получились буквы, действительно состоящие из пикселей.
При увеличении растровой картинки/текста с помощью функций «Редактирование» — «Трансформирование» — «Масштабирование», качество сильно ухудшается. При повторениях процедуры качество каждый раз становится всё хуже — буквы становятся расплывчатыми.
У таких иллюстраций при увеличении по алгоритму программы заполняются цветом новые пиксели. Это происходит менее аккуратно, чем при работе формул.
При увеличении масштаба растровая картинка теряет в качестве
Создание векторной графики
Сделать рисунок можно с помощью любой фотографии. Если вы не знали, как перевести в вектор в Фотошопе фото, преобразовать его, следуйте следующему алгоритму действий:
Терпение, аккуратность, неторопливость — и ваша работа будет готова. При хорошем навыке вы будете изготавливать простые рисунки довольно быстро, А перевести любую картинку в вектор не составит проблемы.
Итогом кропотливой работы станет картинка «в кривых»
Как в Фотошопе сделать векторное изображение человека на основе его фотоснимка? На это вам понадобится много слоёв цвета, а значит, работа займёт довольно много времени. Но сам процесс не так сложен, как кажется, и при достаточном терпении вы вполне справитесь с задачей и получите приличный вектор.
Как реализовать конвертацию из растра в черно-белый вектор на сайте
Все графические файлы делятся на два глобальных типа — растровые и векторные. Иногда нужно сделать конвертацию из растра в черно-белый вектор. Например, для трассировки черно-белых иконок, QR-кодов, штрих-кодов, картинок с растровыми надписями, чеков или картинок в блоге.
Чем отличается растровый файл от векторного
Растровая графика
Растровый файл представляет последовательность цветных квадратов (пикселей). Количество точек в файле определяется его размерами по горизонтали и вертикали. Например, файл размером 640х480 содержит 307 200 точек. Растровый файл можно представить в виде мозаики. Нельзя растянуть растровую картинку, не потеряв в качестве.
Популярные растровые форматы: JPEG, GIF, PNG, TIFF, WEBP, BPG.
Векторная графика
Векторная графика представляет множество различных геометрических фигур, описанных математическими формулами. Наложение этих фигур друг на друга формирует изображение. Например, обычный квадрат описывается четырьмя равными отрезками, каждый из которых соединяется своими концами с концами двух других под углом 90 градусов.
Популярные векторные форматы: SVG, EPS, WMF, PDF.
Из растра в вектор
Алгоритм векторизации
Трассировка происходит в несколько этапов:
Конвертер на основе Potrace
Иногда нужно автоматически конвертировать изображения, которые загружают пользователи из растрового в векторный формат.
Есть очень простой и бесплатный способ внедрить такую конвертацию с применением векторного редактора Inkscape. Inkscape использует Potrace для векторизации картинок.
После трейсинга картинка может быть только черно-белой. На официальном сайте potrace написано, что возможно в будущем поддержка цветности будет реализована.
Пример конвертации из PNG в SVG. На входе функция potrace принимает только файлы с расширением PNM, поэтому перед трейсингом PNG нужно конвертировать:
Вот здесь реализован этот способ и можно посмотреть на качество трассировки любого изображения. Пример векторизации размытого штрих-кода. А это пример трассированного логотипа. Вот так конвертер справляется с фотографиями.
Как сделать выходную картинку цветной
Кроме ручного редактирования есть еще один вариант покраски черно-белой картинки на выходе. Но картинка должна быть малоцветной. Решение подойдёт для трассировки цветных иконок, логотипов и кнопок в вектор.
Можно выделить отдельные цвета с помощью маски ppmcolormask (входит в состав пакета Netpbm):
Затем трассировать каждую часть отдельно и на выходе наложить их друг на друга.
Из вектора в растр
Растеризовать векторный рисунок гораздо проще. На векторную картинку накладывается сетка с ячейками определенного размера и картинка дискретизируется, после чего кодируется согласно выходному формату.
Один из примеров конвертации SVG в PNG с использованием Imagick.
С помощью этого кода можно конвертировать файлы SVG в PNG24:
Вот здесь можно посмотреть результаты конвертации своих картинок из SVG в PNG.
Easily Convert JPG, PNG, GIF Files to PDF, SVG, EPS Vectors
Quickly get your artwork ready to print, embroider, cut, and more with the world’s best full-color auto-tracer!
Online
Automatically convert JPG, PNG, BMP, and GIF bitmap images to true SVG, EPS, and PDF vector images online by simply uploading them. Real full-color tracing, no software to install and results are ready right away!
Pick Image To Upload
Ctrl + V Beta
Desktop
Stand-alone desktop application to convert bitmap images to vector images offline. Supports all the Online Edition file formats, plus AI and DXF output. Works seamlessly with Illustrator, Corel, and others.
Need to get artwork ready to print, cut, or embroider? Vector Magic can help you tame your image flow. Speed up turnaround times, minimize pre-print hassles, and lower your costs!
Your logo represents your brand and is used across a wide range of media: your website, business cards, flyers, banners, etc. Ensure a consistent and crisp display in all contexts by having it in vector format.
Quickly get bitmap source material into your vector compositions, opening up a range of creative possibilities. Or go old-school and draw something on paper, then scan, vectorize, and refine your creation.
Create an artistic effect from your photos, vectorize graphs or maps, turn scanned artwork into something more flexible, and much more. Try it out today!
How To Convert JPG, PNG, GIF Images to PDF, SVG, EPS Vectors
1. Upload
Upload a bitmap image and we automatically figure out what settings to use and trace the image for you.
2. Review & Edit
You can review the vector result, tweak the settings and even edit the result, all within the same tool.
3. Download
The result is delivered in SVG, EPS, and PDF formats. The desktop edition also produces AI and DXF.
Simply the Best Auto-Tracer in the World
Fully automatic vectorization
Vector Magic analyzes your image and automatically detects appropriate settings to vectorize it with, and then goes ahead and traces out the underlying shapes in full color. This makes getting started a real breeze: just upload your image and presto, a result to review!
Naturally you can revise the auto-detected settings. Vector Magic offers you meaningful settings that are comprehensible to humans, not just to a machine, and they’re easy to change.
Need to convert JPG to SVG? Look to Vector Magic for the best results in the industry.
Sub-pixel precision
Vector Magic carefully traces out every bit of information available in your image, slicing each edge pixel at precisely the right spot to re-create the intention of your original.
This allows us to tease out small details that are lost by other tools, pushing the envelope of how small you can go before a nuance of your input is lost.
Clients often give their logos in PNG format, but you may need to convert to SVG to print them. They can take hours to re-draw. Instead, use Vector Magic and you’ll often get great results in just seconds.
The right number of nodes
If you’ve used other auto-tracing tools before, you may have noticed just what an awful number of nodes they use to create your result, and just how weirdly they place them.
Vector Magic is a breath of fresh air, intelligently selecting the right number of nodes to use, and placing them at excellent locations.
This makes working with the results much easier and reduces file sizes.
Vector Magic is bar none the world’s best PNG to SVG converter. If you need to convert PNG to SVG, look no further.
Edit the result
Not only does Vector Magic offer you easy to use settings, we also let you edit the result, both online and in the desktop app.
You can eliminate unwanted shapes, connect shapes that have been separated, fix broken lines, and separate shapes that should not be touching, all in the form of an easy-to-use pixel-style editor.
This remarkable feature can be a real life-saver when there are a few small blemishes in your result.
For some reason, nobody seems to keep originals around in EPS format. Whenever you need to convert to EPS, always try Vector Magic first.
Tracing
Embedding
Tracing not Embedding
Vector Magic always traces your bitmap, carefully teasing out the underlying shapes in it, and provides you with a real vector image with all of its benefits.
In contrast, there are numerous services available online that claim to convert bitmaps to vectors, but that in reality just embed the pixels without actually tracing them into vector shapes.
This leaves you with a file that will still be blurry when scaled, and will not be usable for cutting, sewing, laser engraving, or other purposes that require a real vector.
Save yourself the frustration and go with Vector Magic for real vectorization!
Graphic designers often need to convert JPG to SVG. Use Vector Magic to get the job done fast.
Vector Magic turns the difficult and tedious task of tracing a bitmap by hand into an effortless click-click-done experience. Get back in control of your images!
If you compare results from other tools, you will notice that Vector Magic produces vectors that are more faithful to the bitmap original. This makes them often immediately usable, and if cleanup is required there’s much less of it.
With the high cost of outsourcing and the time hand-tracing takes, Vector Magic pays for itself with even a minimum of use. And since usage is unlimited, it always makes sense to try it on any image you need vectorized.
Why wait when you don’t have to? Vector Magic returns results right away so that you can get on with your day and what really matters.
Bitmap images vs Vector images
What’s the difference between JPG, PNG, GIF images and SVG, EPS, PDF, AI, DXF files?
Vector images consist of shapes like circles, rectangles, lines and curves, while bitmap images, also known as raster images, consist of a grid of pixels. Vectorization or tracing is the process of taking a bitmap image and re-drawing it as a vector image.
The shapes in vector images allow computers to do things that cannot be done with bitmap images, like scale them to any size without loss of quality and using them to e.g. cut, sew, paint, and laser engrave.
Bitmap
Pixels
Vector
Underlying shapes
Vector image
Bitmap image file formats
There is a large number of different bitmap formats. Some of the most common are: JPEG, PNG, GIF, BMP, and TIFF. Broadly speaking, they fall into two categories:
These have smaller file sizes but do not store a perfect copy of the image. They are best suited to photographs and other images where perfect accuracy is not important. They are also commonly used on the web to save bandwidth.
One of the most widely-used image formats. It has excellent compression characteristics and has the nice feature that the user may specify what level of compression they desire, trading off fidelity for file size.
We do not recommend using JPEG files for rasterized vector art, as the compression artifacts substantially degrade the quality of the image near edges.
These store an exact pixel-by-pixel representation of the image, but require more space. They are more suitable for things like logos.
The best of the lossless image formats is called PNG (Portable Network Graphics). This format is widely supported by web browsers and image viewers/editors.
Vector Magic recommends using the PNG format when storing logos as bitmaps.
There are actually several BMP formats (BitMaP). Windows and Macintosh have their own formats, both of which are called BMP. Most modern image editing tools are able to read both.
In any case, all of the variants of BMP should be avoided when possible, as they use little to no compression and consequently have unnecessarily large file sizes.
Vector image file formats
Adobe’s EPS format (Encapsulated PostScript) is perhaps the most common vector image format. It is the standard interchange format in the print industry. It is widely supported as an export format, but due to the complexity of the full format specification, not all programs that claim to support EPS are able to import all variants of it. Adobe Illustrator and recent versions of CorelDRAW have very good support for reading and writing EPS. Ghostview can read it very well but does not have any editing capabilities. Inkscape can only export it.
The W3C standard vector image format is called SVG (Scalable Vector Graphics). Inkscape and recent versions of Adobe Illustrator and CorelDRAW have good support for reading and writing SVG. Further information on the SVG format may be found on the official SVG website.
Adobe’s PDF format (Portable Document Format) is very widely used as a general purpose platform-independent document format. And while it is not exclusively used as such, it is also a very good vector image format. Adobe gives away the Acrobat PDF reader, but sells the tools required to create PDF files (third party tools that perform the same task are also for sale). Those tools work with any program that is able to print. Support for reading and editing PDF files is much more limited.
The native format of Adobe Illustrator is the AI format (Adobe Illustrator Artwork), a modified version of the older EPS format. The AI format is fairly widely supported, but is less ubiquitous than the EPS format, and most programs that read AI can also read EPS.
Drawing eXchange Format. A CAD format from Autodesk, used by CAD tools from many different vendors. Some programs have difficulty reading DXF files with splines (curves), so the Desktop Edition supports line+spline as well as line only output modes.
There are numerous other vector formats: CDR is the CorelDRAW native format and XAR is the Xara Xtreme native format, to name a couple.