SVG de sustitución con dimensiones definidas

Diseñadores y desarrolladores pueden crear una imagen provisional cuando una maqueta necesita un SVG con dimensiones elegidas para ese espacio.

Produce un SVG con las dimensiones necesarias y obtén una imagen de sustitución ajustada al espacio exacto que quieres representar.

Cómo usar

Introduce el ancho que necesites en la primera línea y luego la altura en la segunda.
Escribe un texto opcional en la tercera línea si quieres que aparezca dentro de la imagen generada.
Ejecuta la generación para producir el SVG con el tamaño solicitado.
Copia el código del área de resultado y pégalo en tu página o archivo de diseño.
Cambia los valores y vuelve a generar tantas veces como necesites.

Ejemplo

El ejemplo pide un ancho de 800, una altura de 450 y el texto Banner. Después de generar, comprueba que la salida sea realmente marcado SVG y que las dimensiones coincidan con lo que pediste, ya que esos valores deciden cuánto espacio ocupa la imagen de relleno en tu diseño.

Entrada

800
450
Banner

Límites y formatos

La salida es un dibujo vectorial, no una fotografía, así que pertenece a maquetas más que a ilustraciones finales.
Todo procede de lo que introduzcas: el tamaño y, opcionalmente, un texto.
Mantén el ancho y la altura como números enteros positivos.
Observa cómo se representa en tu navegador antes de añadirlo a una página en producción.

Dónde se procesa

La imagen vectorial se describe y se ensambla en la página dentro de tu navegador, usando el tamaño y el texto que proporcionas. No se sube ningún archivo y no se transmite nada durante la generación. El marcado permanece en pantalla hasta que lo borres o salgas de la página.

Preguntas frecuentes

¿Para qué se usa realmente una imagen de relleno?

Ocupa el lugar de una ilustración que aún no está lista. Puedes ver si un diseño se sostiene y si las proporciones previstas parecen correctas, sin esperar la imagen final de un diseñador o fotógrafo.

¿Qué contiene el SVG generado?

Describe un marco con el tamaño que pediste, más el texto que escribiste si escribiste alguno. No se añade nada más, así que siempre sabes qué contiene el código antes de pegarlo en algún sitio.

¿Debería mantenerlo en un sitio web en producción?

Es mejor tratarlo como una herramienta de maqueta, ya que indica que todavía falta un visual. Cámbialo por la imagen final antes de publicar, de lo contrario los visitantes verán la imagen de relleno en lugar de una imagen.