Cómo generar una imagen de marcador de posición en SVG

Para qué sirve y qué puedes configurar

Este generador sirve para crear una imagen provisional cuando necesitas reservar espacio en una maqueta, una presentación o una interfaz antes de disponer de la imagen definitiva. Puedes definir el ancho, el alto, el texto visible y los colores del fondo y del texto. El resultado es un gráfico SVG de marcador de posición y también una representación de datos de imagen integrada que comienza con un prefijo de datos de imagen SVG.

Cómo generar el marcador de posición

1. Introduce el ancho y el alto que necesites. Si no indicas estos valores, se utilizan 400 píxeles de ancho y 300 de alto. Cada dimensión se ajusta de forma independiente al intervalo comprendido entre 1 y 2000 píxeles: un valor inferior se eleva a 1 y uno superior se limita a 2000.

2. Escribe el texto que quieres mostrar sobre la imagen. El texto es opcional. Si se deja vacío, el rótulo visible se forma con las dimensiones efectivas, unidas por el signo de multiplicación. Los caracteres introducidos se escapan antes de aparecer en el SVG y en el texto alternativo de la imagen, por lo que no se interpretan como marcado.

3. Configura el color de fondo y el color del texto si quieres personalizar el marcador. Cuando no se proporcionan, el fondo es #cccccc y el texto es #333333. Los valores suministrados se emplean en el SVG generado.

4. Ejecuta la generación con los datos introducidos y revisa el resultado. Las dimensiones personalizadas y el texto personalizado forman parte de las combinaciones verificadas con generación correcta. Si necesitas reutilizar la imagen, conserva la representación de datos integrada que devuelve el generador, sin tratarla como una URL pública.

Cómo interpretar el resultado

Comprueba primero que el tamaño visual corresponde al espacio que quieres reservar. Si has solicitado una dimensión fuera del intervalo admitido, el resultado no conserva ese valor: se aplica el límite inferior o superior correspondiente. También conviene distinguir entre el texto que escribes y el que aparece cuando el campo queda vacío; en este último caso, el rótulo refleja las dimensiones efectivas, no necesariamente las que se introdujeron originalmente.

El resultado debe entenderse como un recurso provisional, no como una fotografía ni como una dirección web alojada. El SVG contiene el fondo, el texto y las dimensiones configuradas. La representación de datos integrada empieza con un prefijo de imagen SVG y puede servir para incorporar el resultado donde se admita ese formato.

Ejemplo práctico

Una persona prepara una maqueta de una página y necesita reservar un espacio panorámico antes de tener la imagen final.

Indica 640 de ancho, 360 de alto, escribe «Vista previa» y proporciona los dos colores; después genera el resultado y comprueba sus dimensiones, rótulo y representación integrada.

Se obtiene un gráfico SVG de marcador de posición de 640 × 360 con el texto «Vista previa», fondo azul claro y texto oscuro, junto con una representación de datos de imagen que comienza con un prefijo SVG.

Limitaciones

• El resultado está limitado a un marcador SVG y a su representación de datos de imagen integrada; las dimensiones solicitadas fuera de 1 a 2000 no se conservan tal cual.

Errores frecuentes

• Causa: introducir un ancho o un alto fuera del intervalo de 1 a 2000 y esperar que se mantenga sin cambios. Corrección: usa valores dentro de ese intervalo o revisa el resultado teniendo en cuenta que cada dimensión se ha ajustado al límite correspondiente.

Preguntas frecuentes

¿Qué ocurre si no escribo ningún texto?

Si el texto está vacío, el rótulo visible se sustituye por las dimensiones efectivas unidas por un signo de multiplicación. Si escribes texto, ese contenido se muestra después de escaparse para no interpretarse como marcado.

¿Qué tamaño puedo indicar?

El ancho y el alto se controlan por separado. Cada uno admite como resultado efectivo un valor entre 1 y 2000 píxeles; por debajo se aplica 1 y por encima, 2000.

¿Qué resultado genera la herramienta?

El resultado incluye un gráfico SVG de marcador y una representación de datos de imagen que comienza con un prefijo de datos de imagen SVG. No debe confundirse con una URL pública alojada.