Saltar al contenido
Totalmente local

Generador de imágenes de marcador

Genera una imagen SVG de marcador con tamaño, colores y etiqueta personalizados — como SVG, data: URI o una etiqueta <img>.

0
Salida

Generador de imágenes de marcador

Elige un ancho y alto — o una relación de aspecto común como 16:9 o 4:3 — y esta herramienta dibuja una imagen de marcador al instante, lista para colocar en un maqueta, un esquema o un espacio en tu código HTML donde el recurso final aún no esté listo. Se renderiza como SVG, por lo que la caja se ve nítida en cualquier tamaño y se escala sin un fondo de píxeles borroso.

Establece un color de fondo y de texto, y deja que la etiqueta sea por defecto las dimensiones renderizadas (como "800×600") o escribe tu propio título — un nombre de componente, un punto de ruptura, cualquier cosa que te ayude a distinguir un marcador de otro mientras construyes. La familia de fuentes y el tamaño también se pueden ajustar, y redondear las esquinas u superponer una cuadrícula o una cruz diagonal le da a la caja el aspecto familiar de "esto es un marcador" en lugar de un simple rectángulo gris.

Elige cómo sale el resultado: marcado SVG sin procesar para guardar como archivo, un data: URI codificado en porcentaje o uno en base64 para un fondo CSS o una fuente de imagen en línea, o una etiqueta img completa que puedas pegar directamente en HTML. Las dimensiones muy grandes o una etiqueta irrazonablemente larga se limitan en lugar de permitir que la pestaña se congele o produzca algo que nadie podría usar.

Todo se dibuja localmente en tu navegador en el momento en que cambias una opción — ninguna imagen se genera en un servidor y nada de lo que escribes se carga a ningún lugar. Copia el resultado, descárgalo como archivo .txt, o envíalo directamente a otra herramienta como el codificador de URL SVG o el convertidor de colores.

Preguntas frecuentes

¿Se actualiza la imagen mientras cambio las opciones?
Sí. La vista previa se regenera en vivo a medida que ajustas el ancho, alto, colores, la etiqueta u cualquier otra opción.
¿Puedo usar la salida directamente como fuente de imagen?
Sí. Elige el formato data: URI o base64 y pega el resultado directamente en un <img src="…"> o un background-image de CSS.
¿Qué pasa si establezco una relación de aspecto y una altura al mismo tiempo?
La relación de aspecto gana: la altura se recalcula desde el ancho para que la imagen mantenga esa proporción exacta.
¿Hay un límite de tamaño?
El ancho y alto están limitados a 4000 px cada uno, y una etiqueta personalizada extremadamente larga se rechaza con un mensaje pidiéndote que la acortes, por lo que la herramienta nunca intenta construir una imagen inutilizablemente grande.
¿Se carga mi información en algún lugar?
No. La imagen de marcador se genera completamente en tu navegador — nada se envía a un servidor.