SVG против PNG: эксперимент качества изображений средствами браузера




Наши клиенты обращались к нам с вопросом о том, возможно ли распечатывать макеты печатей или штампов прямо из браузера, не прибегая к переходным программам. Такая потребность обуславливается тем, чтоб для изготовления печати на полимере (и не только в этом методе), достаточно просто распечатать макет на кальке (инверсия макета) и пусть в работу. Для реализации этой задачи возможны два варианта, это печать макеты в формате SVG и в формате PNG. Ниже проведен эксперимент, с помощью которого можно проанализировать качество конечного изображения.


Исходный данные

Принтер: hp laserjet m1132 mfp.

Браузеры:

• Opera 33.0

• Google Chrome 44.0.2

• Firefox 41.0.2

• Safari 5.1.7

Эталон:в качестве эталона изображение было, распечатано используя программу CorelDraw. Векторное изображение печати было импортировано в программу, и распечатано. Так же был сделан экспорт в формат PNG, для дальнейших тестов.:


формат печати png в safari
Рис.4. формат SVG - оригинал


Изображение: круглая печать была создана в конструкторе печатей и штампов, после чего сохранена в формате SVG, с размерами 40 на 40 миллиметров. Как было сказано выше, в программе CorelDraw было произведено конвертирования, на выходе мы получили изображение в формате PNG с размерами 450 на 450 пикселов (в тестах изображение выводилось на печать с размерами 40 на 40 миллиметров).

формат SVG - оригинал
Рис.2. формат SVG - оригинал

формат PNG - оригинал
Рис.3. формат PNG - оригинал

Итак начнем.

Были запущенны четыре браузера, в котором поочередно открыты два изображения, сначала в формате SVG затем в формате PNG.
В каждом браузере была использована функция печати страницы, которая производит печать элементов,
которые отображаются в браузере. На выходе были получены, распечатанные изображения. Изображения подвиглись анализу и отфотографированы.

Результат SVG – в четырех случаях на выходе мы получили качество картинки близкое к эталонному. Распечатанное изображение четкое, без ярко выраженной ступенчатости или размытия.

Opera

формат SVG - оригинал в opera
Рис.4. формат SVG - оригинал

формат PNG - оригинал в opera
Рис.5. формат PNG - оригинал


Chrome

формат SVG - оригинал в chrome
Рис.6. формат SVG - оригинал

формат PNG - оригинал в chrome
Рис.7. формат PNG - оригинал


Как видим в браузере Chrome, не с 100% точностью был напечатан шрифт, обратите внимание на букву "R" в слове "MSR"

Firefox

формат SVG - оригинал в firefox
Рис.8. формат SVG - оригинал

формат PNG - оригинал в firefox
Рис.9. формат PNG - оригинал


Safari

формат SVG - оригинал в safari
Рис.10. формат SVG - оригинал

формат PNG - оригинал в safari
Рис.11. формат PNG - оригинал


Результат PNG – в данном случае в четырёх случаях получился одинаковый результат. При печати изображение получилось худшего качества, чем при варианте с SVG. Присутствует выраженная ступенчатость, так же присутствует и размытие границ.

Итоги.

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


Дата публикации 2015-12-06