Crea una imagen de relleno como data URI SVG. Elige tamano, colores y texto, y copia el marcado, el data URI o una etiqueta img lista. Sin peticiones ni servicios externos.
Imagenes de relleno sin ninguna peticion. Define dimensiones, colores y texto, y copia el SVG en bruto, un data URI o una etiqueta img completa. No se descarga nada, asi que el placeholder sigue funcionando sin conexion y dentro de un fichero de diseno.
Si lo dejas vacio muestra el ancho y el alto, que es lo que suele querer un placeholder.
Vista previa
Por que un SVG en linea supera a un servicio de placeholders
Un data URI no es una peticion de red
Los servicios de placeholders resultan comodos justo hasta que dejan de serlo: el dominio te limita las peticiones, el proxy de la oficina lo bloquea, haces una demo en un avion, o el servicio cambia su salida en silencio y la mitad de tus maquetas se descoloca. Todos esos fallos tienen la misma causa: el placeholder vive en el servidor de otro.
Un data URI SVG no tiene esa dependencia. La imagen entera es una cadena dentro de tu marcado, asi que se renderiza igual sin conexion, en un cliente de correo, en una exportacion estatica y en una captura hecha dentro de tres anos. Tampoco cuesta latencia: no hay resolucion DNS, ni conexion, ni ida y vuelta. En una pagina con veinte placeholders durante el desarrollo esa diferencia se nota mucho.
Mejor codificado por URL que en base64
El data URI que genera esta herramienta usa codificacion porcentual, no base64. Ambas son validas, pero la porcentual es mejor opcion por defecto para SVG por dos motivos.
El primero es el tamano. Base64 infla la carga en torno a un tercio, mientras que la codificacion porcentual solo expande el punado de caracteres que realmente hay que escapar; como el SVG es casi todo ASCII, suele quedar mas corto. El segundo es la legibilidad: puedes ver un SVG codificado por porcentaje en tu hoja de estilos y aun reconocerlo, cambiar un color o detectar una errata. Un bloque base64 hay que decodificarlo antes de que signifique algo.
Lo unico que exige cuidado en la codificacion porcentual es la comilla simple, y por eso aqui se escapa de forma explicita: los valores url() de CSS suelen ir entre comillas simples, y un apostrofo sin escapar dentro del SVG terminaria el valor antes de tiempo.
Tamano, escalado y el viewBox
El SVG generado lleva atributos explicitos de ancho y alto y ademas un viewBox que concuerda. Esa combinacion es intencionada. El ancho y el alto dan al navegador un tamano intrinseco para que el layout no salte antes de colocar la imagen, y el viewBox permite que la misma imagen escale limpiamente a cualquier tamano que definas en CSS.
Al ser vectorial, el texto se mantiene nitido a cualquier escala: nada de texto borroso en pantallas de alta densidad ni de recurso 2x aparte. Si quieres que el placeholder llene su contenedor, pon width: 100%; height: auto en CSS y el viewBox conservara la proporcion. Si quieres una caja fija sin importar la proporcion, deja los atributos tal cual y el navegador los respetara.
Preguntas frecuentes
Por que el texto muestra las dimensiones por defecto?
Porque eso es lo que suele comunicar un placeholder: como de grande es el hueco. Con el campo vacio aparece un texto tipo "600x350", y escribir cualquier cosa lo reemplaza.
Puedo usar el data URI en CSS?
Si. Ponlo en `background-image: url('...')`. Las comillas simples dentro del SVG se escapan justo para este caso, asi que el valor no se corta antes de tiempo.
El texto escala con la imagen?
Si. El SVG tiene viewBox, asi que todo el grafico incluido el texto escala proporcionalmente al redimensionarlo con CSS. El tamano de fuente que elijas es relativo al viewBox, no a los pixeles renderizados.
Hay opcion de base64?
No, a proposito. La codificacion porcentual suele ser mas corta para SVG y sigue siendo legible, lo que facilita cambiar un color despues sin regenerar nada.
Sirven los colores con nombre o solo hexadecimal?
Ambos. Cualquier color con nombre de CSS como `tomato` o `slategray` se acepta en el campo de texto, junto a valores hexadecimales de 3, 6 y 8 digitos.
El placeholder funciona en correo electronico?
El soporte de SVG en clientes de correo es irregular; Gmail en concreto lo elimina. Para correo, convierte antes el SVG a PNG. Para web, apps y herramientas de diseno, el data URI va bien.