Convert svg to png mac os

Конвертация SVG в PNG: а воз и ныне там, но есть варианты

Рассказывает Александр Топорков, веб-разработчик Email Soldiers

Графический формат SVG (Scalable Vector Graphics) — самый распространённый сегодня формат векторной графики, которая выгодно отличается от растровой, в первую очередь, возможностью масштабирования и преобразования изображений. Но иногда требуется конвертация SVG в PNG (Portable Network Graphics) — формат растровой графики.

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

Зачем преобразовывать SVG в PNG

Формат SVG по меркам информационных технологий уже давний. С выхода первой версии в 2001 году до актуальной на сегодняшний день версии от 16 августа 2011 прошло целых десять лет. SVG поддерживают все браузеры, и, казалось бы, весь интернет уже должен перейти на векторную графику. Но до сих пор существует масса ограничений на использование SVG.

1. SVG-файлы не показываются в большинстве почтовых клиентов — есть хорошее исследование на эту тему.
2. В фиды RSS, YML (Yandex Market Language) и Google Merchant бессмысленно передавать ссылки на SVG-файлы — они не умеют работать с этим форматом.
3. SVG нельзя использовать в OpenGraph (это такие вставки в HTML-код страницы, которые позволяют красиво репостить страницу в соцсети с предсказуемой иллюстрацией). Видимо, по той же причине: Facebook не работает с SVG.

Так что если у вас на сайте много векторной графики, пока рано отказываться от растровых картинок — придётся использовать и векторную графику, и её растровый аналог. Растровые изображения нельзя автоматически сконвертировать в векторные, поэтому конвертируем векторные.

Отображение векторных изображений на растровом экране — это, по сути, уже конвертация. Задача, казалось бы, тривиальная, но у меня, например, возникли неожиданные трудности.

У одного из наших клиентов (строительной компании) иллюстрации к продаваемой недвижимости были в SVG-формате: разнообразные чертежи и планы. И мы должны были сконвертировать векторные изображения SVG в растровые PNG — для больших YML-фидов, чтобы импортировать эти существенные объёмы данных в Mindbox и там создать товарные рекомендации, которые в дальнейшем вставлять в рассылки.

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

Первая попытка: PHP с библиотекой ImageMagick

Начал я с ImageMagick — программы для работы с графикой, своего рода программным Photoshop. И её возможностями можно пользоваться изнутри программ на PHP. Надо лишь подключить PHP-библиотеку Imagick, то есть специальную комплектацию для PHP.

С этой библиотекой код конвертации SVG в PNG кажется элементарным:

$imagick = new Imagick();

$fp = fopen(‘image.svg’, ’rb’);

$imagick->setImageFormat(«png8«); //png8 — это png c 8-битной палитрой

Но он не заработал. Оказывается, поддержка SVG в ImageMagick не включена по умолчанию, и необходимо подключить ещё одну библиотеку libmagickcore-6.q16-3-extra. К счастью, на нашем хостинге операционная система Debian Linux, которая позволяет устанавливать любые программы и библиотеки без ограничений.

sudo apt-get install libmagickcore-6.q16-3-extra

Появилась поддержка SVG. Тестовый код заработал. Но когда я таким способом стал массово конвертировать файлы, программа споткнулась на одном подозрительном файле: она просто остановилась, и ничего не происходило. Ошибка не показывалась, скрипт продолжал «висеть».

Я попробовал для начала просто пропустить этот файл, не конвертировать. Может он один такой аномальный? Но оказалось, что подобных файлов, на которых спотыкается строка $imagick->readImageFile, больше 5%. Это много.

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

Возможно обновление библиотеки ImageMagick до какой-то версии могло решить эту проблему. Но не стоит заниматься установкой/удалением множества библиотек ради решения одной задачи. Это может повлиять на работоспособность всего хостинга из-за неожиданных конфликтов на других сайтах и программах, использующих ImageMagic текущей версии.

Вторая попытка: Node.js

Если на PHP не выходит, значит, можно попробовать другой язык программирования — JavaScript. И его серверную версию Node.js.

Для работы с SVG были найдены две библиотеки: первая использовала PhantomJS, а вторая — Headless Chrome. Это программы, которые обладают тем же функционалом, что и Chrome-браузер, но не содержат графического интерфейса. С их помощью, например, удобно автоматически делать массовые скриншоты сайтов или имитировать путешествие пользователя по сайту для тестирования. Иными словами, обе библиотеки не преобразовывали SVG в растровую графику самостоятельно, а использовали для этой задачи серверную версию браузера (без графической оболочки). То есть перекладывали всю работу на другие программные компоненты.

При установке мы столкнулись с некоторыми сложностями: библиотеки и их зависимости были установлены, но при попытке сконвертировать SVG в PNG полетели ошибки. Для решения вновь придётся заниматься кропотливой установкой библиотек, соблюдать правильную версионность, искать причины ошибок в сети — на этот раз для node.js.

Современный программист при написании программ массово использует уже готовые библиотеки, написанные и развиваемые кем-то ещё. Это напоминает сборку автомобиля из отдельных узлов и агрегатов.

Но проблема многих модулей и программных библиотек — их несовместимость между собой. Авторы библиотек не успевают за изменениями друг друга. Да и компьютеры и операционные системы у всех разные.

Выход — отказаться от библиотек и использовать чужие готовые программы.

Третья попытка: консольные программы

Консольные программы — это программы без графической оболочки, которые запускаются из командной строки. Их можно запускать изнутри своего PHP-кода. Часто эту возможность ограничивают по соображениям безопасности. Но у меня эта возможность была.

Для начала я попробовал использовать всё тот же ImageMagick.

$cline = ‘convert image.svg image.png’;

Как и с библиотекой ImageMagick программа зависала на некоторых файлах, и ничего не происходило. Видимо, что-то не так в самом ImageMagick, а не в его библиотеках.

После дальнейших поисков удалось найти другую программу для работы с SVG. Это был Inkscape. Установил его, к счастью, без всяких дополнительных библиотек:

sudo apt-get install inkscape

Для конвертации с его помощью нужно делать вот так:

$cline = inkscape -z —export-png=image.png image.svg’;

Можно сконвертировать и сразу подогнать изображение под нужную ширину: SVG масштабируется без потерь.

$cline = inkscape -z —export-png=image.png -w 1000 image.svg’;

Тестовый код заработал: Inkscape не зависал, как ImageMagick, SVG-файлы конвертировались в PNG. И работал почти в два раза быстрее. Использовал этот код для решения первоначальной задачи и сконвертировал несколько десятков тысяч SVG-файлов для актуального YML-фида: при его изменении новые картинки будут конвертироваться автоматически.

Inkspace может оказаться отличной рабочей альтернативой популярному ImageMagic для решения задач по программной работе.

Удручает, что задачу по конвертации форматов в принципе всё ещё приходится решать: конвертировать данные для экспорта в Google, Facebook, Yandex. Почему IT-гиганты на своей стороне не могут сделать поддержку SVG? Ведь и в их интересах, чтобы товары, объявления или новости на страницах их сервисов были дополнены графикой.

Риторический вопрос, но задача актуальная, хотя прошло уже 10 лет.

Источник

Конвертер SVG в PNG

Сконвертируйте ваши svg-файлы в png онлайн и бесплатно

• Image
• Document
• Ebook
• Audio
• Archive
• Video
• Presentation
• Font
• Vector
• CAD

• abc
• abw
• csv
• dbk
• djvu
• dng
• doc
• docm
• docx
• erf
• ebm
• ewm
• emw
• gzip
• kwd
• odt
• oxps
• ppt
• pptx
• pdf
• rtf
• rar
• txt
• wps
• xls
• xlsx
• zip

• Image
• Document
• Ebook
• Audio
• Archive
• Video
• Presentation
• Font
• Vector
• CAD

• abc
• abw
• csv
• dbk
• djvu
• dng
• doc
• docm
• docx
• erf
• ebm
• ewm
• emw
• gzip
• kwd
• odt
• oxps
• ppt
• pptx
• pdf
• rtf
• rar
• txt
• wps
• xls
• xlsx
• zip

Масштабируемая векторная графика

Портативная сетевая графика

Как сконвертировать SVG в PNG

Загрузите svg-файл(ы)

Выберите файлы с компьютера, Google Диска, Dropbox, по ссылке или перетащив их на страницу.

Выберите «в png»

Выберите png или любой другой формат, который вам нужен (более 200 поддерживаемых форматов)

Загрузите ваш png-файл

Позвольте файлу сконвертироваться и вы сразу сможете скачать ваш png-файл

Источник

Конвертируем svg to png

Иногда появляется необходимость сохранить svg в png средствами браузера. К сожалению, браузер не имеет волшебного api, который позволил бы это сделать без различных хаков. Что же делать, если все таки хочется добиться желаемого?

Первая идея, которая мне пришла в голову, сделать это через canvas, который имеет метод toDataURL(‘image/png’);
Итак, я написал простенький скрипт: jsfiddle, github:

Суть скрипта проста: я преобразовывал 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:

Тут стоит сказать, что еще я использовал библиотеку FileSaver для вызова диалогового окна сохранения.
Вот и все, мы добились желаемого результата.

Стоит отметить один нюанс — я задался вопросом сохранения svg в png, когда писал плагин для экспорта tauCharts. Так как стили в svg задаются из внешнего файла, чтобы добиться максимально подобия с исходным svg, я вставляю inline style в svg. И получаем вот такой результат.

Надеюсь, статья окажется полезной для вас и сохранит ваше время.

Источник

Convert SVG to PNG

Convert your SVG images to PNG format Online for Free with modern browser like Chrome, Opera or Firefox.

Powered by aspose.com and aspose.cloud

Send the download link to

Press Ctrl + D to store it in your bookmarks in order not to search it again

Bookmark this app

Send us your feedback

Aspose.Imaging Conversion

Integrate SVG to PNG Conversion feature in your own projects

This free conversion is based on Aspose.Imaging for .NET, which is a fast API for image processing, including but not limited to image conversion.
You can use it in your own apps and integrate image conversion in your C# .NET projects. Aspose.Imaging for .NET is suitable in the following scenarios:

• High performance document conversion with native APIs
• Integrate document conversion in your own project/solution
• 100% private on premise APIs. Your files are processed at your own servers
• Cross-platfrom deployment

For Java developers, we offer native Aspose.Imaging for Java API to use in your Java applications. Please visit https://products.aspose.com/imaging/java/conversion/svg-to-png to try.

SVG Scalable Vector Graphics File

SVG files are Scalable Vector Graphics Files that use XML based text format for describing the appearance of image. The word Scalable refers to the fact that the SVG can be scaled to different sizes without losing any quality. Text based description of such files make them independent of resolution. It is one of the mostly used format for building website and print graphics in order to achieve scalability

PNG Portable Network Graphic

PNG, Portable Network Graphics, refers to a type of raster image file format that use loseless compression. This file format was created as a replacement of Graphics Interchange Format (GIF) and has no copyright limitations. However, PNG file format does not support animations. PNG file format supports loseless image compression that makes it popular among its users. With the passage of time, PNG has evolved as one of the mostly used image file format

How to convert SVG files using Aspose.Imaging Conversion

1. Click inside the file drop area to upload SVG files or drag & drop SVG files.
2. You can upload maximum 10 files for the operation.
3. Your SVG files will be uploaded and will be converted to PNG format
4. Download link of PNG files will be available instantly after conversion
5. You can also send a link to the PNG file to your email address.
6. Note that file will be deleted from our servers after 24 hours and download links will stop working after this time period.

❓ How can I convert SVG image?

🛡️ Is it safe to convert SVG images using free Aspose.Imaging Conversion image?

💻 Can I convert SVG images on Linux, Mac OS or Android?

🌐 What browser should I use to convert SVG images?

What People Are Saying

See what users have to say about Aspose.Imaging Conversion free app

Useful Website Thank you . User from Colombo, Sri Lanka

Greaat. Your app save my time to convert my equation (from Word). Thank you very much. May Allah bless you. Baarokallahu fiik (Bless him in you) User from Jakarta, Indonesia

Other Supported Conversions

You can also convert SVG into many other file formats. Please see the complete list below

• Convert SVG to PDF Portable Document
• Convert SVG to PSD Adobe Photoshop Document
• Convert SVG to JPG Joint Photographic Expert Group Image File
• Convert SVG to JPEG Joint Photographic Expert Group Image File
• Convert SVG to JP2 JPEG 2000 Core Image File
• Convert SVG to J2K JPEG 2000 Image
• Convert SVG to JPEG2000 JPEG 2000 Image
• Convert SVG to GIF Graphical Interchange Format File
• Convert SVG to APNG Animated Portable Network Graphics
• Convert SVG to BMP Bitmap Image File
• Convert SVG to TIFF Tagged Image File Format
• Convert SVG to TIF Tagged Image File Format
• Convert SVG to TGA Truevision Graphics Adapter
• Convert SVG to WEBP Raster Web Image File Format
• Convert SVG to DICOM Digital Imaging and Communications in Medicine
• Convert SVG to DCM Digital Imaging and Communications in Medicine
• Convert SVG to HTML5 Canvas Hyper Text Markup Language
• Convert SVG to SVGZ Compressed Scalable Vector graphics
• Convert SVG to EMF Enhanced Metafile Format
• Convert SVG to EMZ Windows Compressed Enhanced Metafile
• Convert SVG to WMF Windows Metafile
• Convert SVG to WMZ Windows Media Player skins file
• Convert SVG to ICO ICO File Format
• Convert SVG to DXF Autodesk Drawing Exchange File Format

Upload your image, choose the save format type and click on “Convert” button. You will get the download link as soon as the file is converted.

It works from all platforms including Windows, Mac, Android and iOS. All files are processed on our servers. No plugin or software installation required for you.

Источник