HTML в SVG
Поместите свой HTML и встроенный CSS в масштабируемый SVG с помощью foreignObject. Смотрите результат вживую и скачивайте его как .svg, PNG или JPG. Всё работает в вашем браузере.
HTML внутри масштабируемого вектора
Элемент foreignObject в SVG позволяет встроить живые HTML и CSS внутрь векторного изображения. Результат масштабируется без искажений и подходит везде, где принимается SVG, — отлично для бейджей, карточек и оформленных подписей.
Зачем оборачивать HTML в SVG?
SVG, созданный с помощью foreignObject, — это не скриншот: разметка внутри файла остается живой. Текст остается настоящим текстом, встроенный CSS продолжает его оформлять, а растеризации не происходит, поэтому изображение остается идеально четким при любом масштабе, а сам файл обычно занимает всего несколько килобайт. Это делает такой подход отличным решением для бейджей в README, карточек профиля, виджетов дашбордов и любых других мест, где оформленный фрагмент HTML должен вести себя как единый файл изображения, который можно разместить, встроить или версионировать.
Вектор или скриншот — что вам нужно?
Используйте этот инструмент, когда результат будет показан в веб-браузере: браузеры отображают foreignObject нативно и сохраняют чёткость. Вектор сохраняет вашу разметку живой и масштабируемой, поэтому она остаётся чёткой при любом размере, а файл — небольшим. Снимок экрана, наоборот, замораживает ту же разметку в фиксированной сетке пикселей: удобно там, где SVG не поддерживается, но заново оформить или увеличить его уже нельзя.
Часто задаваемые вопросы
Все, что нужно знать о конвертации HTML в SVG.
Ваш HTML помещается внутрь <foreignObject> в SVG, который браузеры отрисовывают как часть вектора. Все изображение масштабируется без пикселизации.
Лучше всего работают встроенный CSS и изображения в формате data-URI. Внешние ресурсы могут не загрузиться, если SVG открыть за пределами вашего сайта, поэтому по возможности встраивайте их.
Нет. SVG полностью создается в вашем браузере.
Да. Перед созданием введите любую ширину и высоту в пикселях. Они задают холст SVG и его viewBox, а поскольку файл векторный, позже его можно масштабировать без потери четкости.
foreignObject отрисовывается веб-браузерами, но многие графические редакторы, такие как Inkscape или Illustrator, поддерживают его не полностью. Для лучшего результата используйте SVG на веб-страницах или в браузерных инструментах.
Этот инструмент сохраняет разметку в виде вектора и никогда не растеризует ее. Если нужно растровое изображение, отрисуйте тот же HTML инструментом HTML в изображение — он создает PNG, JPG или PDF.