[Веб-дизайн, Разработка веб-сайтов] Конвертация SVG в PNG: а воз и ныне там, но есть варианты
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Рассказывает Александр Топорков, веб-разработчик Email Soldiers
Графический формат SVG (Scalable Vector Graphics) — самый распространённый сегодня формат векторной графики, которая выгодно отличается от растровой, в первую очередь, возможностью масштабирования и преобразования изображений. Но иногда требуется конвертация SVG в PNG (Portable Network Graphics) — формат растровой графики.
Современные требования к изображениям высоки. Они должны выглядеть симпатично везде: от телефона до огромного экрана. Без векторной графики не обойтись: логотипы, схемы, иллюстрации лучше делать именно векторными — это становится очевидным, если сравнить разные форматы одного и того же изображения при масштабировании:
Зачем преобразовывать SVG в PNG
Формат SVG по меркам информационных технологий уже давний. С выхода первой версии в 2001 году до актуальной на сегодняшний день версии от 16 августа 2011 прошло целых десять лет. SVG поддерживают все браузеры, и, казалось бы, весь интернет уже должен перейти на векторную графику. Но до сих пор существует масса ограничений на использование SVG.
Например, такие:
- SVG-файлы не показываются в большинстве почтовых клиентов — есть хорошее исследование на эту тему.
- В фиды RSS, YML (Yandex Market Language) и Google Merchant бессмысленно передавать ссылки на SVG-файлы — они не умеют работать с этим форматом.
- SVG нельзя использовать в OpenGraph (это такие вставки в HTML-код страницы, которые позволяют красиво репостить страницу в соцсети с предсказуемой иллюстрацией). Видимо, по той же причине: Facebook не работает с SVG.
Так что если у вас на сайте много векторной графики, пока рано отказываться от растровых картинок — придётся использовать и векторную графику, и её растровый аналог. Растровые изображения нельзя автоматически сконвертировать в векторные, поэтому конвертируем векторные.
Отображение векторных изображений на растровом экране — это, по сути, уже конвертация. Задача, казалось бы, тривиальная, но у меня, например, возникли неожиданные трудности.
У одного из наших клиентов (строительной компании) иллюстрации к продаваемой недвижимости были в SVG-формате: разнообразные чертежи и планы. И мы должны были сконвертировать векторные изображения SVG в растровые PNG — для больших YML-фидов, чтобы импортировать эти существенные объёмы данных в Mindbox и там создать товарные рекомендации, которые в дальнейшем вставлять в рассылки.
Задача конвертации SVG в PNG довольно типовая — в сети масса статей на эту тему с примерами кода. Неразумно использовать свою реализацию алгоритма растеризации SVG: сложно, долго и — словно изобретать велосипед. Нужно использовать готовые библиотеки.
Первая попытка: PHP с библиотекой ImageMagick
Начал я с ImageMagick — программы для работы с графикой, своего рода программным Photoshop. И её возможностями можно пользоваться изнутри программ на PHP. Надо лишь подключить PHP-библиотеку Imagick, то есть специальную комплектацию для PHP.
С этой библиотекой код конвертации SVG в PNG кажется элементарным:
<?php
$imagick = new Imagick();
$fp = fopen(‘image.svg’, ’rb’);
$imagick->readImageFile($fp);
$imagick->setImageFormat("png8«); //png8 — это png c 8-битной палитрой
$imagick->writeImage(‘image.png’);
fclose($fp);
Но он не заработал. Оказывается, поддержка 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.
<?php
$cline = ‘convert image.svg image.png’;
shell_exec($cline);
?>
Как и с библиотекой ImageMagick программа зависала на некоторых файлах, и ничего не происходило. Видимо, что-то не так в самом ImageMagick, а не в его библиотеках.
После дальнейших поисков удалось найти другую программу для работы с SVG. Это был Inkscape. Установил его, к счастью, без всяких дополнительных библиотек:
sudo apt-get install inkscape
Для конвертации с его помощью нужно делать вот так:
<?php
$cline = inkscape -z --export-png=image.png image.svg’;
shell_exec($cline);
?>
Можно сконвертировать и сразу подогнать изображение под нужную ширину: SVG масштабируется без потерь.
<?php
$cline = inkscape -z --export-png=image.png -w 1000 image.svg’;
shell_exec($cline);
?>
Тестовый код заработал: Inkscape не зависал, как ImageMagick, SVG-файлы конвертировались в PNG. И работал почти в два раза быстрее. Использовал этот код для решения первоначальной задачи и сконвертировал несколько десятков тысяч SVG-файлов для актуального YML-фида: при его изменении новые картинки будут конвертироваться автоматически.
Inkspace может оказаться отличной рабочей альтернативой популярному ImageMagic для решения задач по программной работе.
Удручает, что задачу по конвертации форматов в принципе всё ещё приходится решать: конвертировать данные для экспорта в Google, Facebook, Yandex. Почему IT-гиганты на своей стороне не могут сделать поддержку SVG? Ведь и в их интересах, чтобы товары, объявления или новости на страницах их сервисов были дополнены графикой.
Риторический вопрос, но задача актуальная, хотя прошло уже 10 лет.
===========
Источник:
habr.com
===========
Похожие новости:
- [Разработка веб-сайтов, Habr, Тестирование веб-сервисов] Различные методы брутфорс атак WordPress
- [Интернет-маркетинг, Email-маркетинг] Выбираем лучшее время для проведения email-рассылки
- [WordPress, Разработка веб-сайтов, Тестирование веб-сервисов] Создаем пентест-лабораторию для WordPress (перевод)
- [Разработка веб-сайтов, CSS, JavaScript, Программирование, HTML] Современный стартовый HTML-шаблон
- [Информационная безопасность, Разработка веб-сайтов, SQL] Web Security SQL Injection 2020
- [Клиентская оптимизация, Управление сообществом, Управление e-commerce, Контент-маркетинг, Email-маркетинг] What is an SEO Company?
- [Разработка веб-сайтов, Angular, Микросервисы] Как мы распилили монолит. Часть 3, Frame Manager без фреймов
- [Разработка веб-сайтов, JavaScript, Angular, TypeScript] Декларативный подход в Angular
- [Разработка веб-сайтов, Программирование, Конференции, Flutter] DartUP 2020: в этом году онлайн и с известными спикерами
- [Веб-дизайн, Разработка веб-сайтов, Интерфейсы, Дизайн мобильных приложений, Графический дизайн] Mathematical Driven Design: размеры и отступы
Теги для поиска: #_vebdizajn (Веб-дизайн), #_razrabotka_vebsajtov (Разработка веб-сайтов), #_webrazrabotka (web-разработка), #_vebdizajn (веб-дизайн), #_emailmarketing (email-маркетинг), #_emailrassylki (email-рассылки), #_vebdizajn (
Веб-дизайн
), #_razrabotka_vebsajtov (
Разработка веб-сайтов
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 23-Ноя 01:27
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
|
Рассказывает Александр Топорков, веб-разработчик Email Soldiers Графический формат SVG (Scalable Vector Graphics) — самый распространённый сегодня формат векторной графики, которая выгодно отличается от растровой, в первую очередь, возможностью масштабирования и преобразования изображений. Но иногда требуется конвертация SVG в PNG (Portable Network Graphics) — формат растровой графики. Современные требования к изображениям высоки. Они должны выглядеть симпатично везде: от телефона до огромного экрана. Без векторной графики не обойтись: логотипы, схемы, иллюстрации лучше делать именно векторными — это становится очевидным, если сравнить разные форматы одного и того же изображения при масштабировании:  Зачем преобразовывать SVG в PNG Формат SVG по меркам информационных технологий уже давний. С выхода первой версии в 2001 году до актуальной на сегодняшний день версии от 16 августа 2011 прошло целых десять лет. SVG поддерживают все браузеры, и, казалось бы, весь интернет уже должен перейти на векторную графику. Но до сих пор существует масса ограничений на использование SVG. Например, такие:
Так что если у вас на сайте много векторной графики, пока рано отказываться от растровых картинок — придётся использовать и векторную графику, и её растровый аналог. Растровые изображения нельзя автоматически сконвертировать в векторные, поэтому конвертируем векторные. Отображение векторных изображений на растровом экране — это, по сути, уже конвертация. Задача, казалось бы, тривиальная, но у меня, например, возникли неожиданные трудности. У одного из наших клиентов (строительной компании) иллюстрации к продаваемой недвижимости были в SVG-формате: разнообразные чертежи и планы. И мы должны были сконвертировать векторные изображения SVG в растровые PNG — для больших YML-фидов, чтобы импортировать эти существенные объёмы данных в Mindbox и там создать товарные рекомендации, которые в дальнейшем вставлять в рассылки. Задача конвертации SVG в PNG довольно типовая — в сети масса статей на эту тему с примерами кода. Неразумно использовать свою реализацию алгоритма растеризации SVG: сложно, долго и — словно изобретать велосипед. Нужно использовать готовые библиотеки. Первая попытка: PHP с библиотекой ImageMagick Начал я с ImageMagick — программы для работы с графикой, своего рода программным Photoshop. И её возможностями можно пользоваться изнутри программ на PHP. Надо лишь подключить PHP-библиотеку Imagick, то есть специальную комплектацию для PHP. С этой библиотекой код конвертации SVG в PNG кажется элементарным: <?php $imagick = new Imagick(); $fp = fopen(‘image.svg’, ’rb’); $imagick->readImageFile($fp); $imagick->setImageFormat("png8«); //png8 — это png c 8-битной палитрой $imagick->writeImage(‘image.png’); fclose($fp); Но он не заработал. Оказывается, поддержка 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. <?php $cline = ‘convert image.svg image.png’; shell_exec($cline); ?> Как и с библиотекой ImageMagick программа зависала на некоторых файлах, и ничего не происходило. Видимо, что-то не так в самом ImageMagick, а не в его библиотеках. После дальнейших поисков удалось найти другую программу для работы с SVG. Это был Inkscape. Установил его, к счастью, без всяких дополнительных библиотек: sudo apt-get install inkscape Для конвертации с его помощью нужно делать вот так: <?php $cline = inkscape -z --export-png=image.png image.svg’; shell_exec($cline); ?> Можно сконвертировать и сразу подогнать изображение под нужную ширину: SVG масштабируется без потерь. <?php $cline = inkscape -z --export-png=image.png -w 1000 image.svg’; shell_exec($cline); ?> Тестовый код заработал: Inkscape не зависал, как ImageMagick, SVG-файлы конвертировались в PNG. И работал почти в два раза быстрее. Использовал этот код для решения первоначальной задачи и сконвертировал несколько десятков тысяч SVG-файлов для актуального YML-фида: при его изменении новые картинки будут конвертироваться автоматически. Inkspace может оказаться отличной рабочей альтернативой популярному ImageMagic для решения задач по программной работе. Удручает, что задачу по конвертации форматов в принципе всё ещё приходится решать: конвертировать данные для экспорта в Google, Facebook, Yandex. Почему IT-гиганты на своей стороне не могут сделать поддержку SVG? Ведь и в их интересах, чтобы товары, объявления или новости на страницах их сервисов были дополнены графикой. Риторический вопрос, но задача актуальная, хотя прошло уже 10 лет. =========== Источник: habr.com =========== Похожие новости:
Веб-дизайн ), #_razrabotka_vebsajtov ( Разработка веб-сайтов ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 23-Ноя 01:27
Часовой пояс: UTC + 5