Taking SVG “screenshots” of HTML elements

https://2ality.com/2025/09/svg-screenshots.html?utm_medium=email&_hsenc=p2ANqtz-9S-lJWXhT9SPdnUQ8YMhBAINfcvEWWsVVyE_lrPJwkxZ1lOR-cEI4BKzLv82x1M_aczq_Jhw62F8dKNek7kuuVRqt-VQ&_hsmi=383378139&utm_content=383378139&utm_source=hs_email • Oct 4, 2025 15:55

Extracto

I was looking for a way to create images (think screenshots) of CSS layouts that I can use in HTML, EPUB and PDF files. This blog post describes my solution – which produces SVG images.

Resumen

Resumen Principal

El contenido describe una ingeniosa solución para generar imágenes SVG a partir de diseños CSS, específicamente pensadas para su integración en archivos HTML, EPUB y PDF. El método busca resolver la necesidad de crear "capturas de pantalla" de layouts CSS de manera programática y eficiente. Para ello, se utilizan dos librerías JavaScript: satori, que genera SVGs a partir de JSX, y html-to-svg, la cual convierte nodos del DOM directamente en SVGs. El autor destaca que html-to-svg es la más adecuada para su caso de uso. La implementación se basa en una estructura de página web donde secciones HTML específicas contienen demostraciones de diseños CSS. Un script de JavaScript recorre estas secciones, procesando cada una para generar su representación SVG. El resultado se incrusta en un elemento <details> interactivo, permitiendo a los usuarios ver el SVG generado y descargarlo directamente. Este enfoque aprovecha la flexibilidad de SVG, garantizando imágenes escalables y de alta calidad para diversas plataformas.

Elementos Clave

Generación de SVG para Diseños CSS: El objetivo central es producir imágenes SVG de layouts CSS, adecuadas para ser incrustadas en una variedad de formatos de documentos como HTML, EPUB y PDF, ofreciendo una alternativa programática a las capturas de pantalla estáticas.
Uso de Librerías JavaScript Específicas: La solución se apoya en dos librerías JavaScript clave: satori para producir SVGs desde JSX, y html-to-svg para convertir nodos del DOM a SVGs. El autor prioriza esta última por su idoneidad para el caso de uso de transformar layouts existentes.
Metodología de Implementación Basada en Secciones: La estructura propuesta organiza los demos de CSS en elementos <section> con identificadores únicos. Un script de JavaScript itera sobre estas secciones, inyectando un elemento <details> que oculta el SVG generado, permitiendo la comparación visual con el HTML original.
Mecanismo de Descarga de Archivos SVG: Cada SVG generado se ofrece para descarga mediante un enlace interactivo. El JavaScript crea un objeto Blob a partir del outerHTML del SVG y utiliza URL.createObjectURL() para generar una URL que se asigna al href del enlace. El atributo download del enlace, que toma el ID de la sección, permite guardar el SVG con un nombre de archivo relevante.

Análisis e Implicaciones

Esta solución ofrece una manera robusta y automatizada de documentar y compartir diseños CSS. La elección de SVG como formato de salida es crucial, ya que garantiza que los "screenshots" sean escalables y nítidos en cualquier resolución, lo cual es invaluable para la documentación técnica y la demostración de ejemplos de código en múltiples contextos.

Contexto Adicional

La capacidad de generar SVGs directamente desde el DOM mediante JavaScript abre un abanico de posibilidades para la creación de contenido dinámico y la automatización de la documentación en entornos de desarrollo web modernos.

Contenido

I was looking for a way to create images (think screenshots) of CSS layouts that I can use in HTML, EPUB and PDF files. This blog post describes my solution – which produces SVG images.

Two JavaScript libraries that convert HTML to SVG

satori uses JSX to produce SVGs
html-to-svg converts DOM nodes to SVGs
- Showcase

Both are useful, but the latter library works much better for my use case.

Creating a web page full of SVG screenshots

I use html-to-svg as follows (check out my solution online): A file can contain zero or more sections with CSS layout demos. This is an example of such a section:

<h2><code>box-sizing</code></h2>
<section id="css-box-sizing">
  <style>
    .outer {
      ...
    }
  </style>
  <div class="outer">
    ...
  </div>
</section>

JavaScript code iterates over the sections and adds a <details> element:

▶︎ Download css-box-sizing.svg

If you expand the details, you can see the generated SVG image. That lets you compare it with the HTML, etc.
If you click on the download link, the browser downloads an SVG file to your disk.
- The SVG filename is derived from the section’s ID.
- The browser uses that filename because it’s the value of the download attribute of the link.
- The href of the link is set up like this:
```
const fileBlob = new Blob(
  [svgElement.outerHTML], { type: 'text/plain' }
);
link.href = URL.createObjectURL(fileBlob);
```