Печать SVG

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

На одном проекте я решил попробовать сделать то, что описал, но столкнулся с одной проблемой, про которую мало кто пишет (хотя интерес есть): печать SVG. Отображение на экране проблем обычно не вызывает, но как только вы хотите отправить свое векторное изображение на принтер, браузеры начинают вести себя довольно непредсказуемо.

Тестирование

Я сделал специальный тест для разных типов внедрения SVG. Можете сами попробовать, кликнув на ссылке Print me. Тест включает в себя 4 варианта, которые меня интересовали: фоновая картинка, простая вставка, вставка только для печати и динамическая вставка (при помощи JS в момент печати). Каждый вариант представлен в виде элементов <img> и <embed>. Кроме того есть пример с простым PNG для сравнения. Я ориентировался лишь на современные браузеры поэтому ограничился такими тестами.

Особенность фонового изображения в том, что у большинства браузеров печать фоновых изображений по умолчанию отключена (в Хроме я даже не смог найти, где включается печать фона). Поэтому если вы хотите гарантировано вывести изображение на печать, используйте прямую вставку, а не фон.

Печатал я в PDF, используя на платформе Windows 7 программу PDF Creator, а на маке — встроенный механизм печати в PDF. Надеюсь, печать в PDF не особо отличается от печати на бумагу.

Результаты тестов

Как ни странно, лучше всех показал себя Internet Explorer 9. Он и показал и распечатал все 6 вариантов совершенно как надо: с высоким разрешением и без каких-то видимых проблем. Просто идеал. Результат в PDF.

Хром (20.0.1123.4) распечатал все img-варианты (кроме фоновых), хотя разрешение явно выставил поменьше. А вот embed-вариант он распечатал лишь один — самый простой (зато с хорошим разрешением и без мыла). Ни версию для печати, ни динамику не захотел. Результат в PDF.

Сафари (6.0.1) на маке сработала аналогично Хрому. Результат в PDF.

Firefox (15.0.1) оказался похуже, но вообще-то повел себя несколько странно: на маке распечаталось всё, кроме динамического <embed>. А вот на винде он вообще отказался печатать SVG в виде <img>. <embed> был распечатан, но лишь в случае статичного размещения: динамика не прошла. Результаты: Windows-версия в PDF, Mac-версия в PDF.

Опера (12.02)… Ну, Опера меня сильно разочаровала и вообще ничего не распечатала. Ни на маке, ни на винде. Более того, Опера даже не смогла показать SVG в качестве фонового изображения, хотя это явно заявлено в поддержке. Очень надеюсь, что придёт Вадим Макеев и объяснит, что я делаю не так. В моем проекте Опере пришлось подставлять старый-добрый (мыльный) PNG. Печальные результаты: Windows-версия в PDF, Mac-версия в PDF.

Выводы

В любом случае, если у вас на странице просто вставлен SVG-логотип, то вы можете распечатать его почти везде — кроме Оперы. Правда, вставлять SVG лучше через элемент <embed> <object> (см. ниже) — так разрешение в Хроме будет оптимальным и FF его точно напечатает на любой платформе.

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

Обновление: в комментах справедливо упомянули про <object> (раньше мне казалось, что он не поддерживается в IE), который работает примерно так же как и <embed>, но все же печатается в Опере. Ура! Обновленная ссылка на тест.

И еще спасибо Вадиму за подсказку о * { -webkit-print-color-adjust:exact } для печати фона в Сафари, что тоже может пригодиться.