Código QR SVG y archivos vectoriales: descarga un ejemplo, mira qué hay dentro y úsalo donde quieras

Descarga un código QR SVG de ejemplo

Empieza por el archivo en sí: descarga el código QR SVG de ejemplo. Pesa 6.355 bytes, es un símbolo de versión 6 de 41 x 41 módulos con nivel de corrección de errores H, y codifica la dirección de esta página. Se generó con el mismo codificador que KoloQR usa en el navegador y se comprobó con el decodificador jsQR antes de publicarlo, el 22 de septiembre de 2026, así que escanea. Para saber qué formato descargar para cada trabajo - SVG, PNG, PDF o EPS - consulta SVG vs PNG vs PDF vs EPS para códigos QR; esta página trata de obtener, leer y usar el SVG en sí.

El ejemplo es a propósito el SVG más simple que puede ser un código QR. Módulos cuadrados negros sobre fondo blanco, una zona de silencio de cuatro módulos, sin logotipo, sin marco, sin esquinas redondeadas y sin atributos width ni height, así que una herramienta de diseño lo abre al tamaño por defecto que use y el archivo escala limpiamente desde ahí. Un código con estilo del generador es un archivo más largo con más partes; el ejemplo es el que conviene abrir en un editor de texto cuando la pregunta es qué es realmente un código QR SVG.

La única regla del ejemplo es lo que codifica. Escanearlo abre esta guía, y nada en Illustrator, Figma ni en ninguna otra herramienta puede hacer que abra otra cosa, porque el patrón de módulos es la dirección. Úsalo como sustituto en una maqueta, una plantilla o una maquetación de impresión mientras el código real todavía se está decidiendo, y luego sustitúyelo por un código generado desde el destino real antes de imprimir nada.

Qué hay dentro del archivo SVG de ejemplo, elemento por elemento

El SVG de ejemplo contiene seis líneas: una declaración XML, un comentario, un elemento svg de apertura con un viewBox, un rectángulo de fondo blanco, un trazado negro que contiene todos los módulos oscuros y la etiqueta de cierre. Ese es el archivo completo, y cada parte tiene una función de la que depende un escáner o una herramienta de diseño.

Los datos del trazado se leen en unidades de módulo. M4 4h7v1H4z significa: ir a la columna 4, fila 4, dibujar 7 unidades a la derecha, 1 unidad hacia abajo, volver a la columna 4 y cerrar - que es el borde superior del patrón de posición superior izquierdo, justo dentro de la zona de silencio de cuatro módulos. Cada subtrazado es esa misma forma con números distintos. Los módulos oscuros adyacentes de una fila se fusionan en un solo tramo en vez de dibujarse como un cuadrado cada uno, lo que hace el archivo un poco más pequeño y no cambia nada en la geometría que ve un escáner.

Un código QR SVG de otro generador se diferenciará en los detalles - un rectángulo por módulo, un grupo por fila, una transformación en lugar de un desplazamiento del viewBox - y ninguna de esas diferencias le importa a un escáner. Lo que importa está en la tabla: un viewBox, un fondo claro bajo la zona de silencio y módulos oscuros como formas rellenas sin trazo.

Qué es un código QR vectorial, y por qué el patrón es el dato

Un archivo vectorial es una imagen guardada como formas y coordenadas en lugar de píxeles, así que se puede redibujar a cualquier tamaño sin perder definición en los bordes. Un código QR vectorial es, por tanto, un conjunto de formas rellenas sobre una cuadrícula, y la cuadrícula es el mensaje: un escáner lee qué celdas son oscuras y cuáles claras y convierte esa disposición de nuevo en la dirección.

Un módulo es uno de los pequeños cuadrados claros y oscuros que llevan los datos de un código QR, y la unidad más pequeña que un escáner tiene que resolver. En el ejemplo hay 1.681 posiciones de módulo y 823 de ellas son oscuras. Cuáles son esas 823 lo decide el codificador a partir del texto, el nivel de corrección de errores y un patrón de máscara, y por eso ninguna herramienta de diseño tiene un campo donde escribir la dirección - la dirección no está guardada junto a la imagen, la dirección es la imagen.

La zona de silencio es el margen vacío alrededor de un código QR que permite a un escáner detectar dónde empieza y dónde acaba el símbolo, y la norma especifica cuatro módulos en cada lado. En un archivo vectorial la zona de silencio se pierde con facilidad, porque una herramienta que recorta al arte visible recorta a los módulos oscuros y tira el margen. Por eso el ejemplo mantiene el margen dentro del viewBox y lo pinta de blanco. La zona de silencio explica qué pasa cuando desaparece.

Qué contiene una exportación SVG de KoloQR

Una descarga SVG de KoloQR es un único archivo llamado qr-by-koloqr-com.svg que contiene el código como partes vectoriales con nombre propio: un fondo, los módulos, los tres ojos de posición, un marco si se eligió uno, un logotipo si se añadió uno y cualquier texto de etiqueta ya convertido a contornos. KoloQR, un generador de códigos QR gratuito con códigos QR circulares y de formas personalizadas, escribe ese archivo en el navegador y no le añade nada - ni marca de agua, ni elemento de seguimiento, ni cuenta.

Qué hace el código de exportación en el momento de la descarga, en el orden en que lo hace:

• Contornea las etiquetas. Si un marco de código QR lleva texto como SCAN ME, la exportación espera a que cargue la fuente de la etiqueta y redibuja cada etiqueta como un trazado antes de serializar, así que el archivo nunca contiene un elemento de texto que necesite una fuente instalada más adelante.
• Serializa el arte. El elemento svg que estaba en pantalla se escribe con su viewBox, y el archivo recibe una declaración XML si no la tenía ya.
• Añade un width y un height explícitos. Los dos atributos se copian del viewBox para que una herramienta de diseño que los lea, Figma en particular, coloque el código a su tamaño real en vez de en una caja por defecto.
• Hace únicos los ids referenciados. Cualquier id al que apunte algo dentro del archivo - una máscara de recorte, el arco invisible que sigue una etiqueta curva - recibe un prefijo único de esa exportación, así que dos códigos pegados en un mismo documento no pueden recortarse entre sí. Los ids que solo nombran capas, como Background y Logo, se dejan legibles.

Las partes que una herramienta de diseño muestra en su panel de capas vienen del propio archivo. El elemento raíz se llama by KoloQR.com; el fondo es un rectángulo llamado Background, que se omite cuando el fondo está en transparente; los módulos de datos están en un grupo relleno con el color de primer plano, cada módulo como su propia forma - un cuadrado, un círculo o una cápsula cuando un patrón de píldora fusiona un tramo; cada ojo de posición es un trazado con su hueco recortado mediante un relleno par-impar, así que se recolorea con un clic; un marco diseñado es un trazado con un hueco real; un logotipo vive en un grupo llamado Logo. La escala está fijada en diez unidades por módulo, que la guía de formatos ya usa para derivar las cifras de PNG y PDF, así que aquí no se repite.

El mismo marcado es lo que Copy to Figma deja en el portapapeles. Nada difiere entre el texto copiado y el archivo descargado salvo dónde aterriza, y por eso copiar un código QR a Figma describe las capas que produce un pegado exactamente en los términos de arriba.

Cómo obtener un código QR como SVG con KoloQR

Obtener un SVG lleva una visita al generador y una descarga: introduce el contenido, dale estilo al código si el diseño lo pide, elige SVG en el menú de descarga, abre el archivo en la herramienta de diseño y escanea la prueba. No hay cuenta, ni paso de correo, ni límite de tamaño del archivo.

1. Abre el generador e introduce el contenido. Abre el generador y escribe la URL, los datos de la Wi-Fi, el texto u otro contenido. Los botones de descarga siguen inactivos hasta que el campo de contenido tiene algo, así que el ejemplo con estilo que se muestra antes de escribir no se puede exportar por error.
2. Dale estilo al código antes de exportar. Ajusta la forma, el patrón de módulos, el estilo de los ojos, los colores, el marco y el logotipo aquí y no en la herramienta de diseño. El SVG es una instantánea de la vista previa, y el indicador de contraste del generador comprueba el par de colores antes de que quede fijado en un archivo.
3. Elige SVG en el menú de descarga. Haz clic en la flecha junto a Download y elige SVG. El archivo qr-by-koloqr-com.svg aterriza en la carpeta de descargas; Copy to Figma está en el mismo menú y pone el marcado idéntico en el portapapeles en su lugar.
4. Abre o coloca el archivo en la herramienta de diseño. Coloca el SVG en Illustrator, InDesign o Affinity, arrástralo al lienzo de Figma o Inkscape, o súbelo a Canva. Redimensiona con las proporciones bloqueadas y deja la zona de silencio dentro del arte.
5. Escanea la prueba. Escanea el código colocado desde la pantalla al 100% y, para imprimir, desde una prueba impresa a tamaño final, con un iPhone y un teléfono Android. Confirma que la dirección que se abre es la que introdujiste en el paso 1.

Cómo usar un código QR SVG en Illustrator, Figma, Inkscape y Affinity

Los cuatro editores vectoriales abren un código QR SVG como formas editables, y el método de trabajo es el mismo en todos: trae el archivo, deja en paz la geometría de los módulos, cambia el color a través del relleno y redimensiona con el bloqueo de proporciones activado. Los nombres de menú de abajo son los habituales; cambian entre versiones, así que tómalos como lo que hay que buscar.

• Adobe Illustrator. Usa Archivo, luego Colocar, o abre el SVG directamente. Un SVG colocado suele llegar como un grupo vinculado o incrustado; desagrupa una vez si hay que cambiar el relleno por partes, luego selecciona las formas de los módulos y ajusta el relleno. No hace falta ningún paso de Expandir - los módulos ya son trazados, no efectos en vivo. Escala con Mayús pulsada, o desde el panel Transformar con el bloqueo de proporciones activado.
• Figma. Arrastra el archivo .svg al lienzo, o pega el marcado SVG en bruto desde el portapapeles. El centro de ayuda de Figma dice que cuando se importa un archivo SVG deja de tratarse como imagen y se convierte en una capa vectorial editable. La ruta completa, los nombres de capa que llegan y las ediciones seguras están en cómo copiar un código QR a Figma.
• Inkscape. Archivo, luego Abrir, abre el SVG como documento; Archivo, luego Importar, suele preguntar si incluir el SVG como objetos editables o como imagen vinculada - elige editables. El SVG propio de Inkscape es un superconjunto del archivo, así que guardarlo después como SVG simple lo mantiene portable.
• Affinity Designer. Archivo, luego Colocar, o Archivo, luego Abrir. Un SVG colocado suele llegar como documento incrustado que se puede editar en el sitio o desagrupar; el relleno se cambia desde el panel de color, y el panel Transformar tiene un bloqueo para el escalado proporcional.

En los cuatro, la edición tentadora es seleccionar todo y aplicar un trazo, un efecto o un degradado. El trazo es el que falla en silencio, y la sección después de la siguiente explica la geometría. Recolorea el relleno, y solo el relleno.

Cómo poner un código QR SVG en Canva, InDesign, Word y PowerPoint

Las herramientas de maquetación y de oficina toman un SVG como imagen y no como formas editables, lo que está bien para un código QR: el código hay que colocarlo y dimensionarlo, no redibujarlo. Canva lo sube, InDesign lo coloca, y Word y PowerPoint para Microsoft 365 lo insertan desde el menú Imágenes.

• Canva. Sube el SVG desde el panel Subidas y arrástralo al diseño. Canva acepta subidas de SVG, con un límite de tamaño de archivo que su centro de ayuda indica por plan - un código QR SVG pesa unos pocos kilobytes, así que el límite no es la cuestión; si la subida está permitida en un plan concreto sí lo es, y la propia página de requisitos de subida de Canva es donde confirmarlo. Si se rechaza una subida de SVG, sube en su lugar un PNG exportado al tamaño impreso final. Crear un código QR en Canva cubre toda la ruta, y la comparación KoloQR vs Canva explica por qué la exportación SVG propia de Canva es el camino más difícil.
• Adobe InDesign. Archivo, luego Colocar, y haz clic o arrastra para fijar el marco. InDesign trata un SVG colocado como un gráfico: normalmente no recolorea los rellenos, así que fija los colores antes de exportar. Mantén la escala al 100% en ambos ejes o, cuando tenga que cambiar, cambia ancho y alto en el mismo porcentaje.
• Word y PowerPoint. La página de soporte de Microsoft sobre editar imágenes SVG dice que Word, PowerPoint, Outlook y Excel para Microsoft 365 en Windows, Mac, Android y Windows Mobile insertan archivos SVG desde Insertar, luego Imágenes, luego Este dispositivo. Las versiones perpetuas más antiguas varían, y por eso un PNG es el adjunto más seguro cuando no se conoce la versión del destinatario. La opción Convertir a forma de la pestaña Formato de gráfico rompe el código en piezas editables; no hay ningún motivo para usarla en un código QR.
• Google Docs y Slides. Ninguno de los dos importa SVG en el momento de escribir esto, así que inserta un PNG. Expórtalo al doble del tamaño mostrado para que se mantenga nítido en una pantalla de alta densidad.

Sea cual sea la herramienta, la comprobación de tamaño es la misma. Un código QR impreso quiere aproximadamente un centímetro de ancho por cada diez centímetros de distancia de lectura, y la calculadora de tamaño de impresión convierte una distancia de lectura en un ancho. Redimensiona el SVG colocado a ese ancho con las proporciones bloqueadas, y comprueba que la zona de silencio sigue dentro del marco colocado en vez de quedar recortada por él.

Cómo usar un código QR SVG en una página web y en una imprenta

En una página web, referencia el SVG desde un elemento img con width y height, y se renderiza nítido en cualquier pantalla. En una imprenta, envía un PDF salvo que la imprenta diga que acepta SVG - el PDF es el formato que nombran la mayoría de los formularios de subida, y la guía hermana explica cómo hacer uno que siga siendo vectorial.

• Como imagen. Una etiqueta img que apunte al archivo .svg es la ruta más simple: el navegador lo escala, y un viewBox sin atributos width ni height llena el tamaño que le dé la etiqueta. El ejemplo se renderiza a 4 píxeles CSS por módulo cuando la etiqueta mide 196 píxeles de ancho, que es un mínimo razonable para un código que la gente va a escanear desde una pantalla.
• En línea. Pegar el marcado SVG en el HTML permite que el CSS recoloree el trazado, lo que es útil en un diseño con modo oscuro donde el código tiene que pasar a módulos claros sobre oscuro - una combinación que las cámaras nativas de los teléfonos suelen leer y los escáneres antiguos a menudo no, así que pruébala. En línea también significa que el archivo se descarga con la página en vez de cachearse por separado.
• No como imagen de fondo con cover o contain. Ambos pueden recortar o distorsionar la caja en la que está el código, y una zona de silencio recortada es el fallo que solo aparece en algunos teléfonos.

Para imprimir, la cuestión es qué coloca el flujo de trabajo de la imprenta. La mayoría nombra PDF, algunas aceptan SVG, y unos pocos sistemas de producción antiguos piden EPS. Los pasos para convertir el SVG en un PDF totalmente vectorial, y cuándo el EPS es la respuesta correcta, están en SVG vs PNG vs PDF vs EPS. La lista de comprobación de impresión repasa tamaño, contraste y soporte antes de que el archivo vaya a la tirada. Una grabadora láser usa el propio SVG, exportado sin fondo; los ajustes están en grabar un código QR con láser.

Reglas para que un código QR vectorial siga escaneando después de editarlo

Un código QR vectorial sobrevive a cualquier edición que deje en paz la cuadrícula de módulos y su contraste, y falla con cualquier edición que no lo haga. Cuatro operaciones son seguras: recolorear el trazado completo, redimensionar con las proporciones bloqueadas, mover, rotar. El resto de la lista es lo que hay que evitar, con el motivo por el que cada una rompe el código.

• Nunca muevas ni borres un nodo del trazado. Cada módulo oscuro es un dato, y cada nodo pertenece a uno. Un módulo arrastrado media celda a la derecha se lee como dos celdas erróneas; un tramo borrado es un dato borrado, y la corrección de errores gasta su presupuesto en esa pérdida en lugar de en los daños del mundo real.
• Recolorea el trazado completo, no módulos seleccionados. Un código con dos colores de módulo lo lee un escáner como un color oscuro y uno claro, y cuál es cuál depende del umbral que elija el teléfono. Elige un oscuro y un claro, y comprueba el par con el comprobador de contraste de códigos QR.
• Conserva la zona de silencio. La norma ISO/IEC 18004 especifica cuatro módulos de margen libre en cada lado. Recortar la mesa de trabajo a los módulos oscuros, o dejar que un marco o una foto invadan el margen, elimina el límite que busca el escáner.
• No apliques trazo a los módulos. Un trazo se dibuja centrado en el borde del trazado, así que un trazo de una décima de módulo agranda cada módulo oscuro una décima por cada lado y reduce cada hueco claro una quinta parte. Eso es geometría, no cuestión de gustos: con un trazo de medio módulo, cada celda clara entre dos oscuras se cierra por completo, y el código deja de ser una cuadrícula.
• Sin degradados ni transparencia en los módulos. Un degradado hace que unos módulos sean más claros que otros, y un escáner necesita que cada uno caiga claramente en el lado oscuro de su umbral; la transparencia deja ver el fondo, que es el mismo problema por otro camino.
• No escales un solo eje. Un estiramiento del 4% es invisible en pantalla y hace que los patrones de posición dejen de ser cuadrados, que es lo primero que comprueba un decodificador. Bloquea las proporciones antes de tocar un tirador.

Dos comprobaciones cierran el círculo. Suelta el arte terminado en el validador de códigos QR, que informa de si el código con estilo sigue decodificándose y a qué, y luego escanea una prueba del resultado real - la pantalla al 100%, o la hoja impresa a tamaño final - con un teléfono. El estilo nunca mejora el escaneo; el sentido de estas reglas es que un código editado siga siendo tan escaneable como el simple del que partió, y solo un escaneo confirma que lo es.

Dónde fallan las descargas gratuitas de códigos QR vectoriales

Un código QR SVG gratuito de un sitio de stock o de iconos es un código que funciona y apunta al sitio equivocado, y ninguna cantidad de edición puede redirigirlo. Vale la pena conocer los tres modos de fallo antes de descargar, porque cada uno se ve bien en la vista previa y falla en el escáner o ante el cliente.

• El SVG de stock codifica la dirección de otra persona. La mayoría de los códigos QR de stock contienen https://example.com, el portafolio del artista o el propio sitio de stock. El patrón de módulos es esa dirección, así que recolorearlo, reformarlo y reetiquetarlo lo deja apuntando allí. Un código de stock impreso en una carta manda a los comensales al sitio de un desconocido.
• El PNG vectorizado no es una cuadrícula limpia. Un código QR de mapa de bits pasado por un trazado automático vuelve como formas con esquinas redondeadas, tamaños de celda ligeramente desiguales y bordes que ya no están sobre la cuadrícula de módulos. Cada uno de ellos se come parte del margen que tiene un decodificador para la iluminación y el ángulo. SVG vs PNG explica por qué regenerar gana a trazar.
• El código lleva un trazo o un grosor de línea fotografiado. Algunos códigos QR vectoriales se dibujan a partir de una foto o un escaneo de un código impreso, así que los módulos arrastran la ganancia de tinta de la impresión original. Un escáner ve módulos oscuros más gruesos y claros más finos desde el principio, antes de que la siguiente impresión añada su propia ganancia.

La regla de decisión es corta. Si necesitas un marcador de posición para una maqueta, usa el ejemplo de esta página - es limpio, escanea y dice adónde apunta. Si necesitas un código que apunte a tu página, genéralo: un código QR estático se hace en segundos, se exporta como SVG sin cuenta y codifica exactamente la dirección que escribiste. Qué tipo de código generar, estático o dinámico, es una decisión aparte que se trata en códigos QR estáticos vs dinámicos; KoloQR solo hace códigos estáticos.