Можно ли экспортировать часть HTML-страницы в изображение SVG?

Мне нужно векторное изображение википедии. К сожалению, Inkscape не может открыть файл HTML, и ни Opera, ни Chromium не могут сохранить страницу в формате SVG. Гуглить, гуглить, и еще больше гуглить ничего не получалось; в частности, "HTML2svg", по-видимому, означает функциональность, когда HTML "общается" с SVG-изображением внутри него. Кто-нибудь, как превратить HTML в SVG, или всю страницу или div на странице? Мне нужны стилизованные HTML, CSS и все.

Источник

8 ответов

Решение

Мне удалось найти сайт, который сделает конверсию для вас. Все, что вам нужно сделать, это вставить HTML между переносами строк, и он сделает все остальное. URL-адрес: http://www.hiqpdf.com/demo/ConvertHtmlToSvg.aspx

Источник

Я столкнулся с такой же потребностью и нашел следующие бесплатные утилиты, которые обещают, что это возможно:

  1. WebVector - это конвертер HTML в SVG или PNG. Он преобразует документ HTML в векторное изображение в формате SVG или растровое изображение в формате PNG. Файлы стандартной векторной графики (SVG) могут быть отредактированы различными редакторами векторной графики, такими как Inkscape.
    http://cssbox.sourceforge.net/webvector/

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

  3. wkhtmltopdf и wkhtmltoimage - это инструменты командной строки с открытым исходным кодом (LGPL) для рендеринга HTML в PDF и различные форматы изображений с использованием механизма визуализации QT Webkit. Они работают полностью "без головы" и не требуют отображения или обслуживания дисплея. Существует также библиотека C, если вы в такой вещи.
    http://wkhtmltopdf.org/

-

Вопросы без ответов: я знаю, что вы можете использовать что-то вроде rasterize.js для рендеринга объектов DOM в <canvas> Но как эти библиотеки построены так, что они могут экспортировать SVG? В частности, можно ли использовать сам WebKit для вывода "идеального по пикселям" редактируемого SVG-содержимого веб-содержимого и фрагментов HTML-кода? Это относительно простая задача для библиотеки или это что-то значительно более сложное?

Источник

Вы можете попробовать wkhtmltoimage. Он может конвертировать HTML в SVG и многие другие форматы.

Источник

Попробовал совет xthexder: печать в файл. (А затем преобразование PDF в SVG.) Я попробовал Opera, Firefox и Chromium под Linux; обзор ниже. Жалко об ошибках Opera.

Я сделал этот ответ сообщества вики; дополнения для других ОС приветствуются.

Opera 11.61 (Linux)

  • поддерживает печать в SVG(!), PDF и PS
  • использует таблицу стилей автора (если вы не выберете другую таблицу стилей в меню "Вид" или не отключите CSS)
  • С выводом PDF и PS текст не помещается в файл! Это очень странно и должно быть ошибкой.
  • Если я выберу выход SVG, Opera выдаст .svg файл, но записывает в нем код PostScript.:-(

Firefox 11.0 (Linux)

  • поддерживает печать в PDF и PS
  • игнорирует таблицу стилей автора, печатает черно-белое изображение
  • Использует шрифт DejaVu Serif в несколько большем размере

Chromium 17 (Linux)

  • поддерживает печать только в PDF
  • игнорирует таблицу стилей автора, печатает черно-белое изображение
  • Использует Times New Roman
Источник

Самый простой способ, который я использую, - это распечатать веб-сайт из Google Chrome в формате PDF, обычно используя самый большой размер страницы, портретный режим и проверенную фоновую графику. Иногда в нем есть небольшие ошибки, но это намного лучше, чем все решения из других ответов.

Источник

вы можете использовать foreignObject в своем svg для определения элемента html в svg.

Если вы хотите преобразовать элементы html в элементы svg, такие как rect, text, image, вы можете использовать для этого htmlsvg.js.

живая демонстрация:https://htmlsvg.netlify.app/

Источник

Как упоминалось в принятом ответе, библиотека wkhtmltoimage - достойное решение, хотя и не всегда идеально. Сначала я был немного смущен тем, как его использовать, поэтому хотел бы поделиться своим текущим рабочим процессом:

  1. установите wkhtmltopdf и добавьте его в свой путь env var
  2. откройте свое веб-приложение и переведите его в любое состояние, которое хотите захватить
  3. используйте расширение браузера SingleFile, чтобы сделать его статический снимок в формате html
  4. бегать wkhtmltoimage mySnapshot.html mySnapshot.svg
  5. откройте его в Inkscape, разгруппируйте изображение и извлеките интересующую вас часть векторизованной страницы
Источник

Вы можете попробовать http://www.letime.net/alpha/glm.html

это делает текст в HTML5 рисует в CSS3

Источник
Другие вопросы по тегам