Можно ли сделать снимок экрана веб-страницы в виде изображения SVG?

30

У меня есть веб-страница, которая полностью основана на векторах (текст, иконки, SVG, но не PNG, JPEG или GIF).

Можно ли сделать векторный снимок этой веб-страницы и сохранить его как полностью масштабируемый файл SVG?
(чтобы я мог сделать снимок экрана на обычном ПК и хорошо выглядеть на сетчатке)

Это должно быть возможно, но я не могу найти ничего, что сделает это.

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

html screenshot svg

— SLaks
источник

Похоже, что здесь может помочь html2canvas.hertzen.com .

— SLaks

1

действительно ли файл .html не является тем, что вы хотите?

— Спарр

@Sparr: нет; Я хочу манипулировать SVG в редакторе (например, обрезать его, добавить баннер), а затем поместить его в <img>. (для страницы справки / тура веб-приложения)

— SLaks

Как файлы PNG или JPEG будут преобразованы в SVG?

— HairOfTheDog

7

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

— smonff

10

Не совсем скриншот, но если страница печатается хорошо, вы можете распечатать ее в формате PDF. И Inkscape, и Illustrator загрузят PDF-файл (и при необходимости сохранят его в формате SVG).

— Дэн
источник

Когда я попробовал это, Firefox напечатал переключатели растрового изображения в файл PDF. Chromium-browser и wkhtmltopdf производят все-векторные файлы.

— Рэндалл Уитмен

8

CSSBox WebVector преобразует HTML-страницы в SVG. Это Java-приложение командной строки, и вы можете увидеть пример его вывода здесь .

— Андрей
источник

Оба режима командной строки и графического интерфейса на самом деле. Я попробовал WebVector экспортировать в SVG небольшую HTML-форму, содержащую переключатели. По желанию он создал файл SVG, содержащий полностью векторное содержимое - без встроенного растрового содержимого. Переключатели отображаются в виде квадратов, которые выглядят как флажки типичного отображения.

— Рэндалл Уитмен

2

Ответ уже есть на снимке экрана большой веб-страницы в Chrome

Я бы использовал CutyCapt, он захватывает рендеринг webkit в изображение.

CutyCapt - это небольшая кроссплатформенная утилита командной строки для захвата рендеринга WebKit веб-страницы в различные векторные и растровые форматы, включая SVG, PDF, PS, PNG, JPEG, TIFF, GIF и BMP. См. IECapt для аналогичного инструмента на основе Internet Explorer.

— СНХ
источник

Я попробовал CutyCapt экспортировать в SVG небольшую HTML-форму, содержащую переключатели. Он создал файл SVG, содержащий частично векторный и частично растровый контент.

— Рэндалл Уитмен

CutyCapt доступен в канонических репозиториях на Ubuntu 18.04, поэтому sudo apt install cutycaptвсе, что мне нужно было сделать, чтобы попробовать его. С задержкой в пару секунд ( --delay=3000) он даже делает mathjax !!!

— Чеширеков

0

Один из подходов: если вы делаете растровый снимок экрана (PNG, JPG и т. Д.), Вы можете использовать «Трассировку растрового изображения» в Inkscape, чтобы «преобразовать» поля определенных связанных цветов на снимке экрана в векторные объекты. Я уверен, что в Adobe Illustrator есть аналогичный инструмент. Позаботьтесь о том, сколько отдельных цветов вы указываете для трассировки - результирующие векторные файлы могут быстро усложниться. Каждый цвет - это отдельный векторный объект, который перекрывает другие цветовые объекты, чтобы представить исходное растровое изображение, поэтому вам, вероятно, потребуется выполнить некоторую очистку.

— Адам Кек
источник

1

Это займет так много работы, чтобы получить правильные настройки, я не думаю, что это будет приемлемым. Но ты никогда не знаешь. Adobe Flash также может это делать, и для этого есть другие способы, которые могут привести к лучшим или худшим результатам.

— СПРБРН

-1

Это может помочь вам. В Firefox есть отличное дополнение под названием «Сохранить как PDF», в котором используются инструменты https://pdfcrowd.com/ . Для окончательного вывода SVG я бы использовал один из онлайн-инструментов для конвертации в SVG.

— Петр С
источник