Codice QR in SVG e file vettoriali: scarica un esempio, guarda cosa c'è dentro, usalo ovunque

Scarica un SVG di esempio di codice QR

Parti dal file stesso: scarica l'SVG di esempio di codice QR. Pesa 6.355 byte, è un simbolo di versione 6 da 41 × 41 moduli con livello di correzione d'errore H, e codifica l'indirizzo di questa pagina. È stato generato con lo stesso encoder che KoloQR usa nel browser e verificato con il decoder jsQR prima di essere pubblicato, il 22 settembre 2026, quindi si scansiona. Per sapere quale formato scaricare per un dato lavoro - SVG, PNG, PDF o EPS - vedi SVG vs PNG vs PDF vs EPS per i codici QR; questa pagina riguarda come ottenere, leggere e usare l'SVG in sé.

L'esempio è volutamente l'SVG più semplice che un codice QR possa essere. Moduli quadrati neri su sfondo bianco, una zona di silenzio di quattro moduli, nessun logo, nessuna cornice, nessun angolo arrotondato, e nessun attributo width o height, così uno strumento di design lo apre alla dimensione predefinita che usa e il file si ridimensiona pulito da lì. Un codice stilizzato dal generatore è un file più lungo con più parti; l'esempio è quello da aprire in un editor di testo quando la domanda è cosa sia davvero un SVG di un codice QR.

L'unica regola per l'esempio è ciò che codifica. Scansionarlo apre questa guida, e nulla in Illustrator, Figma o qualsiasi altro strumento può fargli aprire altro, perché il pattern dei moduli è l'indirizzo. Usalo come sostituto su un mockup, un modello o un impaginato di stampa mentre il codice vero è ancora da decidere, poi sostituiscilo con un codice generato dalla destinazione reale prima che qualcosa vada in stampa.

Cosa c'è dentro il file SVG di esempio, elemento per elemento

L'SVG di esempio contiene sei righe: una dichiarazione XML, un commento, un elemento svg di apertura con un viewBox, un rettangolo di sfondo bianco, un tracciato nero che contiene ogni modulo scuro, e il tag di chiusura. Questo è l'intero file, e ogni parte ha un compito da cui dipende uno scanner o uno strumento di design.

I dati del tracciato si leggono in unità di modulo. M4 4h7v1H4z significa: spostati alla colonna 4, riga 4, disegna 7 unità verso destra, 1 unità verso il basso, torna alla colonna 4 e chiudi - che è il bordo superiore del pattern di ricerca in alto a sinistra, appena dentro la zona di silenzio di quattro moduli. Ogni sottotracciato è quella forma con numeri diversi. I moduli scuri adiacenti su una riga vengono uniti in un'unica sequenza anziché disegnati come un quadrato ciascuno, il che rende il file un po' più piccolo e non cambia nulla della geometria che uno scanner vede.

Un SVG di un codice QR prodotto da un altro generatore differirà nei dettagli - un rettangolo per modulo, un gruppo per riga, una trasformazione al posto dello scostamento nel viewBox - e nessuna di queste differenze conta per uno scanner. Ciò che conta è nella tabella: un viewBox, uno sfondo chiaro sotto la zona di silenzio, e moduli scuri come forme riempite senza contorno.

Cos'è un codice QR vettoriale, e perché il pattern è il dato

Un file vettoriale è un'immagine memorizzata come forme e coordinate anziché pixel, quindi può essere ridisegnata a qualsiasi dimensione senza perdere la definizione dei bordi. Un codice QR vettoriale è quindi un insieme di forme riempite su una griglia, e la griglia è il messaggio: uno scanner legge quali celle sono scure e quali chiare e trasforma quella disposizione di nuovo nell'indirizzo.

Un modulo è uno dei piccoli quadrati chiari e scuri che portano i dati di un codice QR, ed è l'unità più piccola che uno scanner deve risolvere. Nell'esempio ci sono 1.681 posizioni di modulo e 823 di esse sono scure. Quali 823 lo decide l'encoder a partire dal testo, dal livello di correzione d'errore e da un pattern di maschera, ed è per questo che nessuno strumento di design ha un campo in cui digitare l'indirizzo - l'indirizzo non è memorizzato accanto all'immagine, l'indirizzo è l'immagine.

La zona di silenzio è il margine vuoto attorno a un codice QR che permette a uno scanner di rilevare dove il simbolo inizia e finisce, e lo standard prevede quattro moduli su ogni lato. In un file vettoriale la zona di silenzio è facile da perdere, perché uno strumento che ritaglia sulla grafica visibile ritaglia sui moduli scuri e butta via il margine. Per questo l'esempio tiene il margine dentro il viewBox e lo dipinge di bianco. Zona di silenzio del codice QR spiega cosa succede quando manca.

Cosa contiene un'esportazione SVG di KoloQR

Un download SVG di KoloQR è un unico file chiamato qr-by-koloqr-com.svg che contiene il codice come parti vettoriali nominate separatamente: uno sfondo, i moduli, i tre occhi di ricerca, una cornice se ne è stata scelta una, un logo se ne è stato aggiunto uno, e qualsiasi testo di etichetta già convertito in contorni. KoloQR, un generatore di codici QR gratuito con codici QR circolari e di forma personalizzata, scrive quel file nel browser e non vi aggiunge nulla - nessuna filigrana, nessun elemento di tracciamento, nessun account.

Cosa fa il codice di esportazione al momento del download, nell'ordine in cui lo fa:

• Converte le etichette in contorni. Se una cornice per codice QR porta un testo come SCAN ME, l'esportazione attende che il font dell'etichetta sia caricato e ridisegna ogni etichetta come tracciato prima della serializzazione, così il file non contiene mai un elemento text che richieda un font installato a valle.
• Serializza la grafica. L'elemento svg che era a schermo viene scritto con il suo viewBox, e il file riceve una dichiarazione XML se non ne aveva già una.
• Aggiunge width e height espliciti. I due attributi vengono copiati dal viewBox così che uno strumento di design che li legge, Figma in particolare, collochi il codice alla sua dimensione reale anziché in un riquadro predefinito.
• Rende univoci gli id referenziati. Qualsiasi id a cui qualcosa nel file punta - una maschera di ritaglio, l'arco invisibile che segue un'etichetta curva - riceve un prefisso univoco per quell'esportazione, così due codici inseriti in uno stesso documento non possono ritagliarsi a vicenda. Gli id che danno solo il nome ai livelli, come Background e Logo, restano leggibili.

Le parti che uno strumento di design mostra nel suo pannello dei livelli vengono dal file stesso. L'elemento radice si chiama by KoloQR.com; lo sfondo è un rettangolo chiamato Background, omesso quando lo sfondo è impostato su trasparente; i moduli dati stanno in un gruppo riempito con il colore di primo piano, ogni modulo una forma a sé - un quadrato, un cerchio, o una capsula quando un pattern a pillola unisce una sequenza; ogni occhio di ricerca è un tracciato con il foro ritagliato da un riempimento even-odd, così si ricolora con un clic; una cornice disegnata è un tracciato con un foro vero; un logo vive in un gruppo chiamato Logo. La scala è fissa a dieci unità per modulo, che la guida ai formati usa già per ricavare i valori di PNG e PDF, quindi non la ripetiamo qui.

Lo stesso markup è ciò che Copy to Figma mette negli appunti. Nulla differisce tra il testo copiato e il file scaricato tranne dove finisce, ed è per questo che copiare un codice QR in Figma descrive i livelli prodotti da un incolla esattamente nei termini qui sopra.

Come ottenere un codice QR in SVG con KoloQR

Ottenere un SVG richiede una visita al generatore e un download: inserisci il contenuto, stilizza il codice se il design lo richiede, scegli SVG nel menu di download, apri il file nello strumento di design e scansiona la prova. Non c'è account, nessun passaggio via email e nessun limite di dimensione del file.

1. Apri il generatore e inserisci il contenuto. Apri il generatore e digita l'URL, i dati Wi-Fi, il testo o un altro contenuto. I pulsanti di download restano inattivi finché il campo del contenuto non contiene qualcosa, quindi il segnaposto stilizzato mostrato prima di scrivere non può essere esportato per errore.
2. Stilizza il codice prima di esportare. Imposta forma, pattern dei moduli, stile degli occhi, colori, cornice e logo qui anziché nello strumento di design. L'SVG è un'istantanea dell'anteprima, e il badge di contrasto del generatore controlla la coppia di colori prima che venga fissata in un file.
3. Scegli SVG nel menu di download. Fai clic sulla freccia accanto a Download e scegli SVG. Il file qr-by-koloqr-com.svg finisce nella cartella dei download; Copy to Figma si trova nello stesso menu e mette invece lo stesso identico markup negli appunti.
4. Apri o colloca il file nello strumento di design. Colloca l'SVG in Illustrator, InDesign o Affinity, trascinalo sulla tela di Figma o Inkscape, oppure caricalo in Canva. Ridimensiona con le proporzioni bloccate, e lascia la zona di silenzio dentro la grafica.
5. Scansiona la prova. Scansiona il codice collocato dallo schermo al 100% e, per la stampa, da una prova stampata a dimensione finale, con un iPhone e un telefono Android. Conferma che l'indirizzo che si apre sia quello inserito al passo 1.

Come usare un SVG di un codice QR in Illustrator, Figma, Inkscape e Affinity

Tutti e quattro gli editor vettoriali aprono un SVG di un codice QR come forme modificabili, e il metodo di lavoro è lo stesso in ciascuno: porta dentro il file, lascia stare la geometria dei moduli, cambia il colore tramite il riempimento, e ridimensiona con il blocco delle proporzioni attivo. I nomi dei menu qui sotto sono quelli consueti; cambiano tra le versioni, quindi prendili come indicazione di cosa cercare.

• Adobe Illustrator. Usa File, poi Inserisci, oppure apri l'SVG direttamente. Un SVG inserito arriva tipicamente come gruppo collegato o incorporato; separalo una volta se il riempimento va cambiato per parte, poi seleziona le forme dei moduli e imposta il riempimento. Non serve alcun passaggio di Espandi - i moduli sono già tracciati, non effetti dinamici. Scala tenendo premuto Maiusc, oppure dal pannello Trasforma con il blocco delle proporzioni attivo.
• Figma. Trascina il file .svg sulla tela, oppure incolla il markup SVG grezzo dagli appunti. Il centro assistenza di Figma dice che quando un file SVG viene importato non è più trattato come immagine e viene convertito in un livello vettoriale modificabile. Il percorso completo, i nomi dei livelli che arrivano e le modifiche sicure sono in come copiare un codice QR in Figma.
• Inkscape. File, poi Apri, apre l'SVG come documento; File, poi Importa, chiede tipicamente se includere l'SVG come oggetti modificabili o come immagine collegata - scegli modificabili. L'SVG proprio di Inkscape è un soprainsieme del file, quindi salvare poi come SVG semplice lo mantiene portabile.
• Affinity Designer. File, poi Inserisci, oppure File, poi Apri. Un SVG inserito arriva tipicamente come documento incorporato che può essere modificato sul posto o separato; il riempimento si cambia dal pannello dei colori, e il pannello Trasforma ha un blocco per il ridimensionamento proporzionale.

In ciascuno dei quattro, la modifica tentatrice è selezionare tutto e applicare un contorno, un effetto o una sfumatura. Il contorno è quello che fallisce in silenzio, e la sezione dopo la prossima ne spiega la geometria. Ricolora il riempimento, e solo il riempimento.

Come inserire un SVG di un codice QR in Canva, InDesign, Word e PowerPoint

Gli strumenti di impaginazione e da ufficio prendono un SVG come immagine anziché come forme modificabili, il che va benissimo per un codice QR: il codice va collocato e dimensionato, non ridisegnato. Canva lo carica, InDesign lo colloca, e Word e PowerPoint per Microsoft 365 lo inseriscono dal menu Immagini.

• Canva. Carica l'SVG dal pannello Caricamenti e trascinalo sul design. Canva accetta il caricamento di SVG, con un limite di dimensione del file che il suo centro assistenza indica per piano - un SVG di un codice QR pesa pochi kilobyte, quindi il limite non è il problema; lo è se il caricamento è consentito su un dato piano, e la pagina dei requisiti di caricamento di Canva è il posto dove confermarlo. Se un caricamento SVG viene rifiutato, carica invece un PNG esportato alla dimensione finale di stampa. Creare un codice QR in Canva copre l'intero percorso, e il confronto KoloQR vs Canva spiega perché l'esportazione SVG propria di Canva è la strada più difficile.
• Adobe InDesign. File, poi Inserisci, e fai clic o trascina per definire la cornice. InDesign tratta un SVG inserito come grafica: tipicamente non ricolora i riempimenti, quindi imposta i colori prima di esportare. Mantieni la scala al 100% su entrambi gli assi oppure, quando deve cambiare, cambia larghezza e altezza della stessa percentuale.
• Word e PowerPoint. La pagina di supporto di Microsoft sulla modifica delle immagini SVG dice che Word, PowerPoint, Outlook ed Excel per Microsoft 365 su Windows, Mac, Android e Windows Mobile inseriscono file SVG tramite Inserisci, poi Immagini, poi Questo dispositivo. Le versioni perpetue più vecchie variano, ed è per questo che un PNG è l'allegato più sicuro quando la versione del destinatario è sconosciuta. L'opzione Converti in forma nella scheda Formato grafica spezza il codice in pezzi modificabili; non c'è motivo di usarla su un codice QR.
• Google Documenti e Presentazioni. Nessuno dei due importa SVG al momento in cui scriviamo, quindi inserisci un PNG. Esportalo al doppio della dimensione visualizzata così resta nitido su uno schermo ad alta densità.

Qualunque sia lo strumento, il controllo della dimensione è lo stesso. Un codice QR stampato richiede all'incirca un centimetro di larghezza ogni dieci centimetri di distanza di lettura, e il calcolatore della dimensione di stampa trasforma una distanza di lettura in una larghezza. Ridimensiona l'SVG collocato a quella larghezza con le proporzioni bloccate, e controlla che la zona di silenzio stia ancora dentro la cornice collocata anziché essere ritagliata da essa.

Come usare un SVG di un codice QR su una pagina web e in tipografia

Su una pagina web, richiama l'SVG da un elemento img con width e height, e verrà renderizzato nitido su ogni display. In tipografia, invia un PDF a meno che la tipografia non dica di accettare SVG - il PDF è il formato che la maggior parte dei moduli di caricamento indica, e la guida gemella spiega come crearne uno che resti vettoriale.

• Come immagine. Un tag img che punta al file .svg è la strada più semplice: il browser lo ridimensiona, e un viewBox senza attributi width o height riempie qualsiasi dimensione gli dia il tag. L'esempio viene renderizzato a 4 pixel CSS per modulo quando il tag è largo 196 pixel, che è una soglia minima ragionevole per un codice che le persone scansioneranno da uno schermo.
• Inline. Incollare il markup SVG nell'HTML permette ai CSS di ricolorare il tracciato, utile per un design in modalità scura in cui il codice deve invertirsi in moduli chiari su fondo scuro - una combinazione che le fotocamere native dei telefoni di solito leggono e gli scanner più vecchi spesso no, quindi provala. Inline significa anche che il file viene scaricato con la pagina anziché messo in cache separatamente.
• Non come immagine di sfondo con cover o contain. Entrambi possono ritagliare o distorcere il riquadro in cui sta il codice, e una zona di silenzio ritagliata è il fallimento che si manifesta solo su alcuni telefoni.

Per la stampa, la domanda è cosa colloca il flusso di lavoro della tipografia. La maggior parte indica il PDF, alcune accettano l'SVG, e pochi sistemi di produzione più datati chiedono l'EPS. I passaggi per trasformare l'SVG in un PDF completamente vettoriale, e quando l'EPS è la risposta giusta, sono in SVG vs PNG vs PDF vs EPS. La checklist di stampa passa in rassegna dimensione, contrasto e supporto prima che il file vada in tiratura. Un incisore laser usa l'SVG stesso, esportato senza sfondo; le impostazioni sono in incidere un codice QR al laser.

Regole che mantengono scansionabile un codice QR vettoriale dopo la modifica

Un codice QR vettoriale sopravvive a qualsiasi modifica che lasci stare la griglia dei moduli e il suo contrasto, e fallisce con qualsiasi modifica che non lo faccia. Quattro operazioni sono sicure: ricolorare l'intero tracciato, ridimensionare con le proporzioni bloccate, spostare, ruotare. Il resto dell'elenco è ciò da evitare, con il motivo per cui ciascuna rompe il codice.

• Non spostare né eliminare mai un nodo del tracciato. Ogni modulo scuro è un dato, e ogni nodo appartiene a uno di essi. Un modulo trascinato di mezza cella verso destra si legge come due celle sbagliate; una sequenza eliminata è un dato eliminato, e la correzione d'errore spende il suo margine su quella perdita anziché sui danni del mondo reale.
• Ricolora l'intero tracciato, non i moduli selezionati. Un codice con due colori di modulo viene letto da uno scanner come un colore scuro e un colore chiaro, e quale sia quale dipende dalla soglia che il telefono sceglie. Scegli un colore scuro e uno chiaro, e verifica la coppia con il verificatore di contrasto per codici QR.
• Mantieni la zona di silenzio. ISO/IEC 18004 prevede quattro moduli di margine libero su ogni lato. Ritagliare il tavolo da disegno sui moduli scuri, o lasciare che una cornice o una foto invadano il margine, elimina il confine che lo scanner cerca.
• Non applicare un contorno ai moduli. Un contorno viene disegnato centrato sul bordo del tracciato, quindi un contorno di un decimo di modulo ingrossa ogni modulo scuro di un decimo per lato e restringe ogni spazio chiaro di un quinto. È geometria, non una questione di gusto: con un contorno di mezzo modulo ogni cella chiara tra due scure si chiude completamente, e il codice smette di essere una griglia.
• Niente sfumature o trasparenza sui moduli. Una sfumatura rende alcuni moduli più chiari di altri, e uno scanner ha bisogno che ciascuno cada nettamente sul lato scuro della sua soglia; la trasparenza lascia trasparire lo sfondo, che è lo stesso problema per un'altra via.
• Non scalare un solo asse. Uno stiramento del 4% è invisibile a schermo e rende i pattern di ricerca non quadrati, che è la prima cosa che un decoder verifica. Blocca le proporzioni prima di toccare una maniglia.

Due controlli chiudono il cerchio. Trascina la grafica finita nel validatore di codici QR, che riporta se il codice stilizzato si decodifica ancora e in cosa, e poi scansiona una prova dell'output reale - lo schermo al 100%, o il foglio stampato a dimensione finale - con un telefono. Lo stile non migliora mai la scansione; lo scopo di queste regole è mantenere un codice modificato scansionabile quanto quello semplice da cui è partito, e solo una scansione conferma che lo sia.

Dove vanno storti i download gratuiti di codici QR vettoriali

Un SVG gratuito di un codice QR preso da un sito di stock o di icone è un codice funzionante che punta nel posto sbagliato, e nessuna quantità di modifiche può reindirizzarlo. Le tre modalità di fallimento vale la pena conoscerle prima del download, perché ciascuna sembra a posto nell'anteprima e fallisce allo scanner o dal cliente.

• L'SVG di stock codifica l'indirizzo di qualcun altro. La maggior parte dei codici QR di stock contiene https://example.com, il portfolio dell'artista, o il sito di stock stesso. Il pattern dei moduli è quell'indirizzo, quindi ricolorarlo, rimodellarlo e rietichettarlo lo lascia puntare lì. Un codice di stock stampato su un menù manda i clienti al sito di uno sconosciuto.
• Il PNG vettorializzato non è una griglia pulita. Un codice QR raster passato in una vettorializzazione automatica torna come forme con angoli arrotondati, celle di dimensione leggermente irregolare e bordi che non stanno più sulla griglia dei moduli. Ciascuna di queste cose erode il margine che un decoder ha per illuminazione e angolo. SVG vs PNG spiega perché rigenerare batte vettorializzare.
• Il codice porta un contorno o uno spessore di linea fotografato. Alcuni codici QR vettoriali sono disegnati da una foto o da una scansione di un codice stampato, quindi i moduli portano l'allargamento dell'inchiostro della stampa originale. Uno scanner vede moduli scuri più grassi e moduli chiari più sottili fin dall'inizio, prima che la stampa successiva aggiunga il proprio allargamento.

La regola decisionale è breve. Se ti serve un segnaposto per un mockup, usa l'esempio di questa pagina - è pulito, si scansiona, e dichiara dove punta. Se ti serve un codice che punti alla tua pagina, generalo: un codice QR statico si crea in pochi secondi, si esporta in SVG senza account, e codifica esattamente l'indirizzo che hai digitato. Quale tipo di codice generare, statico o dinamico, è una scelta a parte trattata in codici QR statici vs dinamici; KoloQR crea solo codici statici.