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 a SVG

Envuelve tu HTML y CSS en línea dentro de un SVG escalable usando foreignObject. Previsualízalo en vivo y descárgalo como .svg, PNG o JPG. Todo se ejecuta en tu navegador.

Marcado HTML

Ancho

Alto

Formato

Vista previa

Código fuente SVG

HTML dentro de un vector escalable

El elemento foreignObject de SVG te permite incrustar HTML y CSS vivos dentro de una imagen vectorial. El resultado escala sin perder calidad y puede usarse en cualquier sitio que admita SVG: perfecto para insignias, tarjetas y etiquetas con estilo.

¿Por qué envolver HTML en un SVG?

Un SVG construido con foreignObject no es una captura de pantalla: tu marcado sigue vivo dentro del archivo. El texto sigue siendo texto real, tu CSS en línea lo sigue estilizando y nada se rasteriza, así que el gráfico se mantiene perfectamente nítido a cualquier nivel de zoom mientras el archivo suele ocupar apenas unos kilobytes. Eso hace que este enfoque encaje de maravilla en insignias para README, tarjetas de perfil, widgets de panel y cualquier otro sitio donde quieras que un fragmento de HTML con estilo se comporte como un único archivo de imagen que puedas alojar, incrustar o versionar.

Vector o captura: ¿qué necesitas?

Usa esta herramienta cuando el resultado vaya a mostrarse en un navegador web, porque los navegadores representan foreignObject de forma nativa y lo mantienen nítido. Un vector mantiene tu marcado vivo y escalable, así que se ve nítido a cualquier tamaño y el archivo sigue siendo pequeño. Una captura, en cambio, congela ese mismo marcado en una cuadrícula fija de píxeles: útil donde no se admite SVG, pero después ya no se puede volver a aplicar estilos ni ampliar.

Preguntas frecuentes

Todo lo que necesitas saber sobre la conversión de HTML a SVG.

Tu HTML se coloca dentro de un <foreignObject> de SVG, que los navegadores renderizan como parte del vector. El conjunto escala sin pixelarse.

Lo que mejor funciona es el CSS en línea y las imágenes en URI de datos. Puede que los recursos externos no se carguen cuando el SVG se abra fuera de tu sitio, así que incrusta todo lo que puedas.

No. El SVG se genera íntegramente en tu navegador.

Sí. Introduce el ancho y el alto que quieras en píxeles antes de generarlo. Definen el lienzo del SVG y su viewBox y, como el archivo es vectorial, después podrás escalarlo sin perder nitidez.

foreignObject lo renderizan los navegadores web, pero muchos editores gráficos como Inkscape o Illustrator no lo admiten del todo. Para obtener el mejor resultado, usa el SVG en páginas web o en herramientas basadas en navegador.

Esta herramienta conserva tu marcado como vector y nunca lo rasteriza. Si necesitas una imagen de píxeles, renderiza ese mismo HTML con nuestra herramienta HTML a imagen, que genera PNG, JPG o PDF.