Envuelve tu HTML y tu CSS en línea dentro de un SVG escalable usando foreignObject. Previsualízalo en vivo y descarga un archivo .svg listo para usar. Todo se ejecuta en tu navegador.
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.
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.
Usa esta herramienta cuando el resultado vaya a mostrarse en un navegador web, porque los navegadores renderizan foreignObject de forma nativa y lo mantienen nítido. Si necesitas una imagen de píxeles que funcione en todas partes —en aplicaciones de mensajería, documentos o programas de diseño—, renderiza ese mismo marcado con nuestro conversor HTML a imagen, que produce un PNG, un JPG o un PDF. Las dos herramientas se complementan: una conserva tu HTML como vector escalable y la otra lo congela en un mapa de bits.
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.