Чи можна зробити знімок екрана веб-сторінки у вигляді SVG-зображення?

31

У мене веб-сторінка, заснована повністю на векторі (текст, шрифти значків, 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-браузер і wkhtmltopdf створюють файли, що містять векторні зображення.

— Рандалл Вітмен

9

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) він навіть видає математику !!!

— чеширків

0

Один підхід: якщо ви зробите растровий скріншот (PNG, JPG тощо), ви можете використовувати "Trace Bitmap" у Inkscape, щоб "перетворити" поля певних споріднених кольорів на скріншоті у векторні об'єкти. Я впевнений, що в Adobe Illustrator є аналогічний інструмент. Подбайте про те, скільки окремих кольорів ви вказали для відстеження - отримані векторні файли можуть швидко розростися. Кожен колір - це окремий векторний об'єкт, який перекриває інші кольорові об’єкти для подання оригінального растрового зображення, тому вам, ймовірно, доведеться зробити чистку.

— Адам Кек
джерело

1

Для корекції налаштувань знадобиться стільки роботи, я не думаю, що це буде прийнятним. Але ти ніколи не знаєш. Adobe Flash також може це зробити, і він має інший спосіб робити, що може мати кращі або гірші результати.

— SPRBRN

-1

Це може вам допомогти. Існує чудова добавка до Firefox під назвою Зберегти як PDF, яка використовує інструменти з https://pdfcrowd.com/ . Для остаточного виведення SVG я б тоді використовував один із онлайн-інструментів для перетворення у SVG.

— Петро С
джерело