§ CALCULADORA
Generador de placeholder SVG
Crea imágenes placeholder a medida: ajustas dimensiones, colores y texto, y obtienes el SVG como data URL listo para pegar o como archivo .svg para descargar.
Cómo funciona
Un SVG es solo texto. Esta calculadora arma el XML del SVG con tus dimensiones y colores, lo codifica como URL y lo entrega listo para pegar en cualquier lugar que acepte una imagen: src de un img, background-image en CSS, og:image en un meta tag.
El truco está en encodeURIComponent. SVG con caracteres especiales necesita escape para que el navegador lo lea bien dentro de una data URL. Esta calculadora se encarga de eso. Si necesitas el archivo aparte, también puedes descargar el .svg directo.
Para placeholders en producción (lazy loading, fallback de imagen rota), un SVG inline pesa menos de medio kilobyte y carga inmediato. No hay request adicional, no hay CDN externo.
Preguntas frecuentes
¿Por qué SVG y no PNG?
SVG es texto, pesa poco, escala sin perder calidad y se incrusta inline. PNG necesitaría un servicio externo.
¿Se puede usar en producción?
Sí, para placeholders, fallbacks y lazy loading. Para imágenes reales sigue siendo mejor el archivo final.
¿Cuánto pesa?
Entre 200 y 400 bytes. Despreciable.
¿Cómo lo uso en CSS?
background-image: url("data:image/svg+xml,..."). También funciona en src de img, og:image y meta tags.
Esta calculadora es parte de la suite aGo Tools. Para optimizar imágenes reales antes de subirlas: Abrir Squeezer
¿Necesitas pipeline de generación de imágenes a escala? Conversemos con aGo lab
§ aGo lab estudio
¿Tu equipo necesita una calculadora similar integrada?
Si el cálculo que hace esta calculadora es parte de tu operación diaria, aGo lab puede integrarlo a tu sistema interno.