Сделать svg из png. Конвертация картинок из растра в вектор
с adobe illustrator:
Откройте Adobe Illustrator. Нажмите «Файл» и выберите «Открыть», чтобы загрузить файл.PNG в программу. Извлеките изображение по мере необходимости, прежде чем сохранять его как.SVG-файл. Нажмите «Файл» и выберите «Сохранить как». Создайте новое имя файла или используйте существующее имя. Убедитесь, что выбранный тип файла - SVG. Выберите каталог и нажмите «Сохранить», чтобы сохранить файл.
я предпочитаю ИИ, потому что вы можете внести любые изменения
Как преобразовать PNG-изображение в SVG?
Тем не менее это не идеально.
Png - это стиль растрового изображения, а SVG - векторный графический дизайн, который поддерживает растровые изображения, поэтому он не будет преобразовывать изображение в векторы, а просто изображение, встроенное в векторный формат. Вы можете сделать это, используя http://www.inkscape.org/ который является бесплатным. Он будет внедрять его, однако он также имеет движок Live Trace, который будет пытаться преобразовать его в пути, если вы хотите (используя potrace). См. Прямую трассировку в adobe illustrator (commericial) является примером:
Существует веб-сайт, на котором вы можете загрузить свое изображение и посмотреть результат.
Но если вы хотите скачать svg-образ, вам необходимо зарегистрироваться. (Если вы зарегистрируетесь, вы получите 2 изображения бесплатно)
Если вы находитесь в какой-то системе 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, который сообщает конвертировать то, что вы хотите.
В зависимости от того, почему вы хотите конвертировать из.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 и выполнить автоматическую трассировку с помощью команды «Трассировка изображения»: Справка по 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
В одном из проектов возле меню выводились небольшие иконки в формате 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 в 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. И получаем вот такой результат .
Надеюсь, статья окажется полезной для вас и сохранит ваше время.
