How does HTML to SVG work?

Your HTML is placed inside an SVG foreignObject, which browsers render as part of the vector so it scales without pixelation.

Do external images and fonts work?

Inline CSS and data-URI images work best. External resources may not load when the SVG is opened outside your site.

Is my HTML uploaded anywhere?

No. The SVG is generated entirely in your browser.

Can I set the size of the SVG?

Yes. Enter any width and height in pixels before generating. They define the SVG canvas and its viewBox, and because the file is a vector you can scale it later without losing sharpness.

Why does my SVG look blank in some graphics apps?

foreignObject is rendered by web browsers, but many graphics editors such as Inkscape or Illustrator do not fully support it. For best results use the SVG on web pages or in browser-based tools.

Can I turn the result into a PNG or JPG instead?

This tool keeps your markup as a vector and never rasterizes it. If you need a pixel image, render the same HTML with our HTML to Image tool, which outputs PNG, JPG or PDF.

HTML в SVG

Оберните HTML и встроенный CSS в масштабируемый SVG с помощью foreignObject. Посмотрите результат в реальном времени и скачайте готовый файл .svg. Все работает прямо в браузере.

HTML-разметка

Ширина

Высота

Предпросмотр

Исходный код SVG

HTML внутри масштабируемого вектора

Элемент foreignObject в SVG позволяет встроить живые HTML и CSS внутрь векторного изображения. Результат масштабируется без искажений и подходит везде, где принимается SVG, — отлично для бейджей, карточек и оформленных подписей.

Зачем оборачивать HTML в SVG?

SVG, созданный с помощью foreignObject, — это не скриншот: разметка внутри файла остается живой. Текст остается настоящим текстом, встроенный CSS продолжает его оформлять, а растеризации не происходит, поэтому изображение остается идеально четким при любом масштабе, а сам файл обычно занимает всего несколько килобайт. Это делает такой подход отличным решением для бейджей в README, карточек профиля, виджетов дашбордов и любых других мест, где оформленный фрагмент HTML должен вести себя как единый файл изображения, который можно разместить, встроить или версионировать.

Вектор или скриншот — что вам нужно?

Используйте этот инструмент, если результат будет показан в веб-браузере, — браузеры отрисовывают foreignObject нативно и без потери четкости. Если нужно растровое изображение, которое работает везде — в мессенджерах, документах или дизайнерских программах, — отрисуйте ту же разметку конвертером HTML в изображение, который создает PNG, JPG или PDF. Эти два инструмента дополняют друг друга: один сохраняет HTML в виде масштабируемого вектора, другой превращает его в растровое изображение.

Часто задаваемые вопросы

Все, что нужно знать о конвертации HTML в SVG.

Ваш HTML помещается внутрь <foreignObject> в SVG, который браузеры отрисовывают как часть вектора. Все изображение масштабируется без пикселизации.

Лучше всего работают встроенный CSS и изображения в формате data-URI. Внешние ресурсы могут не загрузиться, если SVG открыть за пределами вашего сайта, поэтому по возможности встраивайте их.

Нет. SVG полностью создается в вашем браузере.

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

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

Этот инструмент сохраняет разметку в виде вектора и никогда не растеризует ее. Если нужно растровое изображение, отрисуйте тот же HTML инструментом HTML в изображение — он создает PNG, JPG или PDF.