Generador de marcadores de posición SVG

Cómo funciona el generador de marcadores de posición SVG

Qué hace la herramienta

El generador de marcadores de posición SVG crea imágenes vectoriales ligeras de marcador de posición con dimensiones personalizadas, colores de fondo, superposiciones de texto y ajustes de fuente. Genera el marcado SVG directamente y como un data URI Base64 listo para incrustar en HTML o CSS. Como el SVG es independiente de la resolución y normalmente ocupa menos de 1KB, estos marcadores de posición cargan al instante sin solicitudes de red.

Casos de uso comunes para desarrolladores

Los desarrolladores frontend usan marcadores de posición SVG durante el prototipado para reservar espacio en el diseño antes de que las imágenes reales estén disponibles, evitando el desplazamiento acumulativo del diseño (CLS). Son útiles en sistemas de diseño para alternativas de avatar, esqueletos de miniaturas y contenedores de imágenes responsivos. Los desarrolladores de email incrustan marcadores de posición data URI en plantillas HTML donde la carga de imágenes externas puede estar bloqueada por los clientes de correo.

Formatos de datos, tipos o variantes

La salida es un documento estándar SVG 1.1 que contiene un rectángulo relleno y un elemento de texto centrado. La variante data URI codifica este SVG como una cadena Base64 con el prefijo 'data:image/svg+xml;base64,' para su uso directo en atributos src de img, propiedades CSS background-image o HTML en línea. Las dimensiones se especifican en píxeles, pero el SVG se escala a cualquier tamaño de contenedor sin pixelación, ya que es un formato vectorial.

Errores comunes y casos límite

Los URI de datos no se almacenan en caché por los navegadores de forma independiente del documento en el que están incrustados, por lo que usar el mismo marcador de posición en muchas páginas aumenta el tamaño total de transferencia en comparación con un único archivo externo almacenado en caché. Las etiquetas de texto muy largas pueden desbordar el viewBox del SVG si las dimensiones son pequeñas. Algunos clientes de correo electrónico antiguos no admiten URI de datos SVG, y recurren a un icono de imagen rota. Los encabezados de Content Security Policy (CSP) pueden bloquear los URI de datos en línea si 'data:' no está incluido en img-src.

Cuándo usar esta herramienta vs código

Usa esta herramienta del navegador para generar rápidamente imágenes de marcador de posición puntuales durante el wireframing o la creación de prototipos sin añadir dependencias de compilación. Para la generación dinámica de marcadores de posición en producción (p. ej., alternativas para imágenes subidas por usuarios), usa plantillas SVG del lado del servidor o servicios especializados como plaiceholder que se integran con tu canalización de optimización de imágenes y pueden generar marcadores de posición de imagen borrosa de baja calidad (LQIP) a partir de imágenes reales.