Простейший способ трассировки графического объекта - открыть или поместить файл в Adobe Illustrator и выполнить автоматическую трассировку с помощью команды «Трассировка изображения»: Справка по Illustrator. Использование инструмента «Трассировка изображения» - CS6
*Еще проще):
Программными средствами предоставленное Вами изображение/картинку/рисунок/фотографию – в вектор за 1(!) евро ->
Изображение в вектор
=== Он-лайн сервисы ===
- Первый платный , хотя два изображения для старта можно сделать бесплатно.
На английском, хотя разобраться несложно. Два варианта пользования – он-лайн или купить программу для компьютера. Цена на он-лайн пользование (безлимитное) $7.95, программа на десктоп стоит $295.00. Есть возможность заказа ручной трассировки.
Конечно, на фри-лансерских порталах можно найти и дешевле, ну тут уж выбор за каждым.
Точность
Выше несколько сравнительных изображений Vector Magic, Adobe Live Trace (CS6) и Corel
Corel PowerTRACE (X6). Обратите внимание на акккуратность обработки Вектором форм.
Легкость использования
Не требуется устанавливать и знать великое множество опций и настроек для достижения приемлемого результата.
Нужно лишь ответить на пару простых вопросов и все. В случае, если результат не удовлетворил, то есть руководство "по неисправностям", где можно без особого труда найти ответ и решить проблему.
Можно пробовать снова и снова, пока не получится удовлетворительный результат.
В общем, можно переложить эту работу на Vector и заняться более творческими задачами.
Перевод вольный, но смысл примерно такой.
Исходные изображения в формате JPG , GIF , PNG , BMP и TIFF . Результат в трех вариантах качества и в трех форматах: EPS , SVG и PNG . По завершении возможно повторение с другим желаемым качеством и некоторое редактирование.
- Следующий, полностью БЕСПЛАТНЫЙ .
Полностью на английском, но с использованием все понятно. Чуть больше настроек и ручной работы, но оно стоит того.
Поддерживаемые исходные форматы:
| Выходные форматы:
|
- позволяет конвертировать изображения в формат . Можно как загрузить файл, так и указать ссылку на изображение. Также возможно наложение цифровых эффектов.
В случае конвертирования растровых изображений (PNG или JPG ) в формат SVG , произойдет преобразование форм и объектов в черно-белую векторную графику, которая масштабируется без какой-либо потери качества. Такие изображения могут быть раскрашены с помощью бесплатных программ по работе с векторными изображениями ( и др.). Фотографы в большинстве случаев не добьются желаемого результата при конвертировании растрового изображения в формат SVG .
Если вы конвертируете в формат SVG какое-либо векторное изображение (например, формата eps или ai), конвертер попытается сохранить все векторные и цветовые данные, а также обеспечит максимально возможную схожесть двух файлов.
Конвертер формата Scalable Vector Graphics (SVG ) позволяет конвертировать файлы более чем 130 форматов. Направления конвертирования:
3FR в SVG , AFF в SVG , AI в SVG , ANI в SVG , ART в SVG , ARW в SVG , AVI в SVG , AVS в SVG , BMP в SVG , CDR в SVG , CGM в SVG , CIN в SVG , CMYK в SVG , CMYKA в SVG , CR2 в SVG , CRW в SVG , CUR в SVG , CUT в SVG , DCM в SVG , DCR в SVG , DCX в SVG , DDS в SVG , DFONT в SVG , DIA в SVG , DNG в SVG , DPX в SVG , DXF в SVG , EPDF в SVG , EPI в SVG , EPS в SVG , EPSF в SVG , EPSI в SVG , EPT в SVG , EPT2 в SVG , EPT3 в SVG , ERF в SVG , EXR в SVG , FAX в SVG , FIG в SVG , FITS в SVG , FPX в SVG , FRACTAL в SVG , FTS в SVG , G3 в SVG , GIF в SVG , GIF87 в SVG , GRAY в SVG , GRB в SVG , HDR в SVG , HRZ в SVG , ICB в SVG , ICO в SVG , ICON в SVG , IPL в SVG , JBG в SVG , JBIG в SVG , JNG в SVG , JP2 в SVG , JPC в SVG , JPE в SVG , JPEG в SVG , JPG в SVG , JPX в SVG , K25 в SVG , KDC в SVG , M2V в SVG , M4V в SVG , MAT в SVG , MIFF в SVG , MNG в SVG , MONO в SVG , MOV в SVG , MP4 в SVG , MPC в SVG , MPEG в SVG , MPG в SVG , MRW в SVG , MSL в SVG , MSVG в SVG , MTV в SVG , MVG в SVG , NEF в SVG , NRW в SVG , ORF в SVG , OTB в SVG , OTF в SVG , PAL в SVG , PALM в SVG , PAM в SVG , PBM в SVG , PCD в SVG , PCDS в SVG , PCL в SVG , PCT в SVG , PCX в SVG , PDB в SVG , PDF в SVG , PDFA в SVG , PEF в SVG , PES в SVG , PFA в SVG , PFB в SVG , PFM в SVG , PGM в SVG , PICON в SVG , PICT в SVG , PIX в SVG , PJPEG в SVG , PLASMA в SVG , PNG в SVG , PNG24 в SVG , PNG32 в SVG , PNG8 в SVG , PNM в SVG , PPM в SVG , PS в SVG , PSD в SVG , PTIF в SVG , PWP в SVG , RAF в SVG , RAS в SVG , RGB в SVG , RGBA в SVG , RLA в SVG , RLE в SVG , SCT в SVG , SFW в SVG , SGI в SVG , SK в SVG , SK1 в SVG , SR2 в SVG , SRF в SVG , SUN в SVG , SVG в SVG , SVGZ в SVG , TGA в SVG , TIF в SVG , TIFF в SVG , TIM в SVG , TTC в SVG , TTF в SVG , TXT в SVG , VDA в SVG , VICAR в SVG , VID в SVG , VIFF в SVG , VST в SVG , WBMP в SVG , WEBP в SVG , WMF в SVG , WMZ в SVG , WPG в SVG , X в SVG , X3F в SVG , XAML в SVG , XBM в SVG , XC в SVG , XCF в SVG , XFIG в SVG , XPM в SVG , XV в SVG , XWD в SVG , YCBCR в SVG , YCBCRA в SVG , YUV в SVG
Построен на открытых решениях, таких как Autotrace, ImageMagick, и различных linux графических компонентах.
Форматы для преобразования:
SVG
- Scalable Vector Graphics files
AI - Adobe Illustrator files (postscript based)
CGM
- Computer Graphics Metafile files
WMF
- Windows Metafile files
SK - Sketch/Skencil files
PDF
- Portable Document Format
EPS
- PostScript
PLT
- HPGL
for cutting plotter files
а также: P2E, FIG , EMF , MIF , ER, DXF , EPD , CGM , oDR2D
В зависимости от того, почему вы хотите конвертировать из.png в.svg, вам, возможно, не придется беспокоиться. Преобразование из.png (растр) в.svg (vector) может быть больно, если вы не очень хорошо знакомы с имеющимися инструментами или если вы не являетесь графическим дизайнером по профессии.
Если кто-то отправляет вам большой файл с высоким разрешением (например, 1024x1024), вы можете изменить его размер до практически любого размера, который вы хотите использовать в GIMP. Часто возникают проблемы с изменением размера изображения, если разрешение (количество пикселей на дюйм) слишком низкое. Чтобы исправить это в GIMP, вы можете:
- File -> Open: ваш.png-файл
- Image -> Image Properties: проверьте разрешение и цветовое пространство. Вы хотите разрешение около 300 ppi. В большинстве случаев вам нужно, чтобы цветовое пространство было RGB.
- Image -> Mode: установите значение RGB
- Image -> Scale Image: оставьте размер отдельно, установите и разрешение Y до 300 или больше. Шкала попадания.
- Image -> Scale Image: теперь разрешение должно быть 300, и теперь вы можете изменить размер изображения до практически любого размера.
Не так просто, как изменение размера.svg-файла, но, безусловно, проще и быстрее, чем пытаться преобразовать.png в.svg, если у вас уже есть большое изображение с высоким разрешением.
Откройте Adobe Illustrator. Нажмите «Файл» и выберите «Открыть», чтобы загрузить файл.PNG в программу. Извлеките изображение по мере необходимости, прежде чем сохранять его как.SVG-файл. Нажмите «Файл» и выберите «Сохранить как». Создайте новое имя файла или используйте существующее имя. Убедитесь, что выбранный тип файла - SVG. Выберите каталог и нажмите «Сохранить», чтобы сохранить файл.
я предпочитаю ИИ, потому что вы можете внести любые изменения
Я просто нашел этот вопрос и ответы, поскольку я пытаюсь сделать то же самое! Я не хотел использовать некоторые из других упомянутых инструментов. (Не хотите отсылать мою электронную почту и не хотите платить). Я обнаружил, что Inkscape (v0.91) может выполнять довольно хорошую работу. Это tutorial быстро и легко понять.
Его так же просто, как выбор растрового изображения в Inkskape и Shift + Alt + B.
Sudo apt-get install potrace imagemagick convert -flatten input.png output.pbm potrace -s output.pbm -o output.svg rm output.pbm
Существует веб-сайт, на котором вы можете загрузить свое изображение и посмотреть результат.
Но если вы хотите скачать svg-образ, вам необходимо зарегистрироваться. (Если вы зарегистрируетесь, вы получите 2 изображения бесплатно)
Тем не менее это не идеально.
Png - это стиль растрового изображения, а SVG - векторный графический дизайн, который поддерживает растровые изображения, поэтому он не будет преобразовывать изображение в векторы, а просто изображение, встроенное в векторный формат. Вы можете сделать это, используя http://www.inkscape.org/ который является бесплатным. Он будет внедрять его, однако он также имеет движок Live Trace, который будет пытаться преобразовать его в пути, если вы хотите (используя potrace). См. Прямую трассировку в adobe illustrator (commericial) является примером:
Я предполагаю, что вы хотите написать программное обеспечение для этого. Чтобы сделать это наивно, вы просто найдете линии и установите векторы. Чтобы сделать это разумно, вы пытаетесь приспособить фигуры к чертежу (подгонка модели). Кроме того, вы должны попытаться определить растровые области (регионы, которые вы не можете моделировать с помощью shames или применения текстур. Я бы не стал рекомендовать идти по этому маршруту, так как это займет довольно много времени и потребует немного знаний о графике и компьютерном видении. Тем не менее, выход будет значительно и масштабироваться намного лучше, чем ваш исходный результат.
Если вы находитесь в какой-то системе Linux, imagemagick идеально подходит. Т.е.
Convert somefile.png somefile.svg
Это работает с кучами разных форматов.
Однако для других носителей, таких как видео и аудио (ffmpeg), я знаю, что вы четко указали png на svg; Это все еще связано с медиа.
Ffmpeg -i somefile.mp3 somefile.ogg
Просто подскажите, хотите ли вы пройти через множество файлов; цикл с использованием основных трюков оболочки.
For f in *.jpg; do convert $f ${f%jpg}png; done
Это удаляет jpg и добавляет png, который сообщает конвертировать то, что вы хотите.
В одном из проектов возле меню выводились небольшие иконки в формате svg, и нужно, чтобы при наведении курсора на пункт меню, текст и иконка меняли цвет. Для того чтобы не плодить большое количество картинок, было решено перевести svg в код и использовать в стилях CSS.
Краткая инструкция как использовать SVG в CSS
полученный код используем в своем css файле.
Например, берем иконку Facebook (стандартная иконка с небольшим изменением).
На сайте https://jakearchibald.github.io/svgomg/ жмем “Open SVG” или просто перетягиваем иконку на область просмотра. В левом верхнем углу жмем “CODE” , выделяем код, а затем жмем на иконку копировать , так мы получим в буфер код нашей свг-картинки.
Примерно такой:
Затем полученный код вставляем в окно выше, жмем Converte и получаем готовый background-image :
Background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"%3e%3cpath fill-rule="evenodd" clip-rule="evenodd" fill="%23FFF" d="M12.748 16v-1h6v1h-6zm0-3h6v1h-6v-1zm4 5h-4v-1h4v1zM13.748 9.975v-3h-4v-1c0-1.104.896-2 2-2h2v-2.95h-2c-2.8.256-5 2.583-5 5.45 0 .017.005.032.005.05h-.005v.45h-3v3h3v8h3v-8h4z"/%3e%3c/svg%3e");
Копируем и используем его в своем css.
Чтобы изменить цвет, меняем fill="%23FFF" , только учитываем, что %23 – это обычный знак # , то есть fill="%23000" – это обычный черный (#000).
SVG image is a major vector format for the next generation of websites, and it’s fully integrated with the new standards of HTML5. With Aurora SVG Viewer & Converter: You can easily View SVG graphics and Convert your productions to multiple formats.
The advent of HTML5 has brought greater usage of SVG-formatted vector images. If you’re a web developer, now’s the perfect time to get ahead of the game and outfit your workflow with everything that you need to work with HTML5 and SVG images. The first step is to grab a copy of today’s discounted software promotion, , available for Mac and Windows users!
Aurora SVG Viewer & Converter makes it easy to organize, view, and convert SVG images. With Aurora SVG Viewer & Converter , you’ll enjoy a convenient thumbnail display mode, and an instantly recognizable folder view. If you need to convert an SVG image to a different format, Aurora SVG Viewer & Converter saves the day by enabling you to save images as TIFF, PNG, JPB, BMP, GIF, TGA, XPM, PPM, XBM, or even PDF format files. Even better, you can convert multiple files in batch!
Of course, you always have full control over the details with Aurora SVG Viewer & Converter . Adjust output resolution, convert portions of SVG images, and set conversion quality!
Windows Screenshot: Mac Screenshot:
Aurora SVG Viewer & Converter Features:
1. Support Windows & MAC OS.
2. Easy folder selection and thumbnail display mode.
3. Quickly preview SVG pictures or convert them; supports SVG and SVGZ .
4. SVG converter to multiple image formats include: tiff, png, jpg, bmp, gif, tga, xpm, ppm, xbm, and pdf .
5. Batch Convert , make a list of images to convert, and then in one sweep convert them and save them to another folder.
6. Output resolution is easily set with the free zoom resolution. Select and convert any area of the SVG canvas.
7. Custom convert any area you choose: select an area of the SVG image and convert .
Иногда появляется необходимость сохранить svg в png средствами браузера. К сожалению, браузер не имеет волшебного api, который позволил бы это сделать без различных хаков. Что же делать, если все таки хочется добиться желаемого?
Первая идея, которая мне пришла в голову, сделать это через canvas, который имеет метод toDataURL("image/png");
Итак, я написал простенький скрипт: jsfiddle , github :
Var html = document.querySelector("svg").parentNode.innerHTML; var imgsrc = "data:image/svg+xml;base64," + btoa(html); var canvas = document.querySelector("canvas"), context = canvas.getContext("2d"); canvas.setAttribute("width", 526); canvas.setAttribute("height", 233); var image = new Image; image.src = imgsrc; image.onload = function () { context.drawImage(image, 0, 0); var canvasdata = canvas.toDataURL("image/png"); var a = document.createElement("a"); a.textContent = "save"; a.download = "export_" + Date.now() + ".png"; a.href = canvasdata; document.body.appendChild(a); canvas.parentNode.removeChild(canvas); };
Суть скрипта проста: я преобразовывал svg в dataUri, загружал его через image, рисовал картинку на canvas и превращал в png. Казалось, цель достигнута, и можно расслабится. Этот подход сработал в Firefox и Chrome, но открыв во всеми нами любимом браузере IE, я получил замечательную ошибку:
Дело в том, что IE считает, что картинка загружена с другого хоста. К сожалению, установить origin для dataUri не получится. Собственно, описание правил можно найти здесь: https://html.spec.whatwg.org/multipage/scripting.html#security-with-canvas-elements . Можно было, конечно, проксировать svg через сервер, и тогда все бы сработало, но хотелось чисто клиентское решение.
И тут я вспомнил про замечательную библиотеку canvg . С помощью этой библиотеки я рисую svg на canvas, а далее поступаю как в первом варианте: беру toDataURL("image/png") . Получился такой незамысловатый код: github :
Var svg = document.querySelector("svg"); var canvas = document.createElement("canvas"); canvas.height = svg.getAttribute("height"); canvas.width = svg.getAttribute("width"); canvg(canvas, svg.parentNode.innerHTML.trim()); var dataURL = canvas.toDataURL("image/png"); var data = atob(dataURL.substring("data:image/png;base64,".length)), asArray = new Uint8Array(data.length); for (var i = 0, len = data.length; i < len; ++i) { asArray[i] = data.charCodeAt(i); } var blob = new Blob(, {type: "image/png"}); saveAs(blob, "export_" + Date.now() + ".png");
Тут стоит сказать, что еще я использовал библиотеку FileSaver для вызова диалогового окна сохранения.
Вот и все, мы добились желаемого результата.
Стоит отметить один нюанс - я задался вопросом сохранения svg в png, когда писал плагин для экспорта tauCharts . Так как стили в svg задаются из внешнего файла, чтобы добиться максимально подобия с исходным svg, я вставляю inline style в svg. И получаем вот такой результат .
Надеюсь, статья окажется полезной для вас и сохранит ваше время.