Можно ли сделать снимок экрана веб-страницы в виде изображения 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.

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