Generador de Placeholder SVG
Genera imágenes de placeholder en SVG ligeras con tamaño, colores y texto personalizados. Copia el código SVG o el data URI, o descarga el archivo.
Crea imágenes de placeholder en SVG ligeras directamente en tu navegador. Define el ancho y el alto, elige los colores de fondo y del texto, añade una etiqueta opcional y obtén al instante un código SVG limpio o un data URI listo para usar: sin servicios externos de placeholder, sin solicitudes de red y sin rastreo. Copia el marcado o descarga el archivo .svg con un solo clic.
¿Qué es un generador de placeholder SVG?
Un generador de placeholder SVG crea una imagen de placeholder vectorial simple: un rectángulo de color con texto centrado opcional que muestra las dimensiones, sin llamar a un servicio remoto como placeholder.com o placehold.it. Como la salida es un SVG en línea, se mantiene nítida a cualquier tamaño, pesa solo unos pocos bytes y puedes insertarla directamente en tu HTML, CSS o maqueta de diseño.
Cómo generar un placeholder SVG
Introduce el tamaño que necesitas, elige los colores, añade un texto opcional y luego copia el código o descarga el archivo.
- Define el ancho y el alto en píxeles del placeholder.
- Elige un color de fondo y un color de texto.
- Deja la etiqueta en blanco para mostrar las dimensiones o escribe tu propio texto.
- Elige código SVG o data URI como formato de salida.
- Haz clic en Copiar para tomar el marcado, o en Descargar SVG para guardar el archivo.
¿Por qué usar este generador de placeholder SVG?
- Vista previa en vivo que se actualiza al instante mientras cambias el tamaño, los colores y el texto.
- Genera el marcado SVG sin procesar o un data URI autónomo para usar en el src de una img o en CSS.
- Independiente de la resolución: los placeholders vectoriales se mantienen nítidos en cualquier pantalla.
- Tamaño de archivo mínimo, sin solicitudes HTTP adicionales a un servicio de placeholder.
- 100% privado: todo se ejecuta localmente en tu navegador.
- Descarga el placeholder como un archivo .svg reutilizable con un solo clic.
Preguntas frecuentes
¿Cuál es la diferencia entre el código SVG y un data URI?
El código SVG es el marcado svg sin procesar que puedes pegar directamente en una página HTML o guardar como un archivo .svg. Un data URI codifica ese mismo SVG en una sola cadena que comienza con data:image/svg+xml, que puedes usar como atributo src de una img o como background-image en CSS sin necesidad de un archivo separado.
¿Por qué usar un placeholder SVG en lugar de un servicio como placeholder.com?
Un placeholder SVG en línea no tiene dependencia de red, por lo que carga al instante y sigue funcionando sin conexión o detrás de un firewall. Además, es independiente de la resolución y evita filtrar solicitudes a un servicio de terceros, lo que es mejor para la privacidad y la fiabilidad.
¿Puedo usar el placeholder como imagen de fondo en CSS?
Sí. Cambia la salida a Data URI, copia la cadena y úsala como background-image: url('...') en tu hoja de estilos. Como es autónoma, no se necesita ningún archivo ni solicitud adicional.
¿El tamaño de la fuente se ajusta automáticamente?
Sí. Deja el campo de tamaño de fuente en blanco o en cero y la etiqueta se dimensiona automáticamente para encajar en el placeholder. Introduce un valor si quieres anularlo con un tamaño de fuente específico.