Code QR en SVG et fichiers vectoriels : téléchargez un exemple, voyez ce qu'il contient, utilisez-le partout

Téléchargez un exemple de code QR en SVG

Commencez par le fichier lui-même : téléchargez l'exemple de code QR en SVG. Il pèse 6 355 octets, c'est un symbole de version 6 de 41 x 41 modules au niveau de correction d'erreurs H, encodant l'adresse de cette page. Il a été généré avec le même encodeur que KoloQR utilise dans le navigateur et vérifié avec le décodeur jsQR avant sa publication, le 22 septembre 2026, donc il scanne. Pour savoir quel format télécharger selon le travail - SVG, PNG, PDF ou EPS - voyez SVG vs PNG vs PDF vs EPS pour les codes QR ; cette page porte sur l'obtention, la lecture et l'usage du SVG lui-même.

L'exemple est volontairement le SVG le plus simple qu'un code QR puisse être. Des modules carrés noirs sur fond blanc, une zone de silence de quatre modules, pas de logo, pas de cadre, pas de coins arrondis, et aucun attribut width ni height, si bien qu'un outil de design l'ouvre à la taille par défaut qu'il utilise et que le fichier s'agrandit proprement à partir de là. Un code stylisé issu du générateur est un fichier plus long avec davantage de parties ; l'exemple est celui à ouvrir dans un éditeur de texte quand la question est de savoir ce qu'est réellement un code QR en SVG.

La seule règle de l'exemple est ce qu'il encode. Le scanner ouvre ce guide, et rien dans Illustrator, Figma ou tout autre outil ne peut lui faire ouvrir autre chose, parce que le motif des modules est l'adresse. Utilisez-le comme substitut sur une maquette, un modèle ou une mise en page d'impression tant que le vrai code n'est pas encore décidé, puis remplacez-le par un code généré depuis la vraie destination avant toute impression.

Ce que contient le fichier SVG d'exemple, élément par élément

Le SVG d'exemple contient six lignes : une déclaration XML, un commentaire, un élément svg ouvrant avec une viewBox, un rectangle de fond blanc, un tracé noir qui porte chaque module foncé, et la balise de fermeture. C'est le fichier entier, et chaque partie a un rôle dont dépend un scanneur ou un outil de design.

Les données du tracé se lisent en unités de module. M4 4h7v1H4z signifie : aller à la colonne 4, ligne 4, tracer 7 unités vers la droite, 1 unité vers le bas, revenir à la colonne 4 et fermer - ce qui correspond au bord supérieur du motif de repérage en haut à gauche, juste à l'intérieur de la zone de silence de quatre modules. Chaque sous-tracé est cette même forme avec d'autres nombres. Les modules foncés adjacents d'une ligne sont fusionnés en un seul segment plutôt que dessinés en un carré chacun, ce qui rend le fichier un peu plus petit et ne change rien à la géométrie que voit un scanneur.

Un code QR en SVG issu d'un autre générateur différera dans les détails - un rectangle par module, un groupe par ligne, une transformation à la place d'un décalage de viewBox - et aucune de ces différences n'a d'importance pour un scanneur. Ce qui compte est dans le tableau : une viewBox, un fond clair sous la zone de silence, et des modules foncés en formes remplies sans contour.

Ce qu'est un code QR vectoriel, et pourquoi le motif est la donnée

Un fichier vectoriel est une image stockée sous forme de formes et de coordonnées plutôt que de pixels, si bien qu'il peut être redessiné à n'importe quelle taille sans perdre la netteté de ses bords. Un code QR vectoriel est donc un ensemble de formes remplies sur une grille, et la grille est le message : un scanneur lit quelles cellules sont foncées et lesquelles sont claires, et retransforme cette disposition en adresse.

Un module est l'un des petits carrés clairs et foncés qui portent les données d'un code QR, et la plus petite unité qu'un scanneur doit résoudre. Dans l'exemple, il y a 1 681 positions de module et 823 d'entre elles sont foncées. Lesquelles, c'est l'encodeur qui le décide à partir du texte, du niveau de correction d'erreurs et d'un motif de masque, ce qui explique pourquoi aucun outil de design n'a de champ où saisir l'adresse - l'adresse n'est pas stockée à côté de l'image, l'adresse est l'image.

La zone de silence est la marge vide autour d'un code QR qui permet à un scanneur de détecter où le symbole commence et se termine, et la norme en spécifie quatre modules sur chaque côté. Dans un fichier vectoriel, la zone de silence se perd facilement, parce qu'un outil qui recadre sur le graphisme visible recadre sur les modules foncés et jette la marge. C'est pour cela que l'exemple garde la marge à l'intérieur de la viewBox et la peint en blanc. La zone de silence explique ce qui se passe quand elle disparaît.

Ce que contient un export SVG KoloQR

Un téléchargement SVG KoloQR est un fichier unique nommé qr-by-koloqr-com.svg qui contient le code en parties vectorielles nommées séparément : un fond, les modules, les trois yeux de repérage, un cadre si l'un a été choisi, un logo si l'un a été ajouté, et tout texte de libellé déjà vectorisé. KoloQR, un générateur de codes QR gratuit avec des codes QR circulaires et de forme personnalisée, écrit ce fichier dans le navigateur et n'y ajoute rien - ni filigrane, ni élément de suivi, ni compte.

Ce que fait le code d'export au moment du téléchargement, dans l'ordre où il le fait :

• Il vectorise les libellés. Si un cadre de code QR porte un texte comme SCAN ME, l'export attend le chargement de la police du libellé et redessine chaque libellé en tracé avant la sérialisation, si bien que le fichier ne contient jamais d'élément texte qui exigerait une police installée en aval.
• Il sérialise le graphisme. L'élément svg qui était à l'écran est écrit avec sa viewBox, et le fichier reçoit une déclaration XML s'il n'en avait pas déjà une.
• Il ajoute une largeur et une hauteur explicites. Les deux attributs width et height sont copiés depuis la viewBox pour qu'un outil de design qui les lit, Figma en particulier, place le code à sa vraie taille plutôt que dans une boîte par défaut.
• Il rend uniques les ids référencés. Tout id vers lequel quelque chose pointe dans le fichier - un tracé de rognage, l'arc invisible que suit un libellé courbe - reçoit un préfixe propre à cet export, si bien que deux codes déposés dans un même document ne peuvent pas se rogner l'un l'autre. Les ids qui ne font que nommer des calques, comme Background et Logo, restent lisibles.

Les parties qu'un outil de design affiche dans son panneau des calques viennent du fichier lui-même. L'élément racine est nommé by KoloQR.com ; le fond est un rectangle nommé Background, omis quand le fond est réglé sur transparent ; les modules de données sont dans un groupe rempli de la couleur de premier plan, chaque module étant sa propre forme - un carré, un cercle, ou une capsule quand un motif en pilule fusionne un segment ; chaque œil de repérage est un tracé dont le trou est découpé par un remplissage pair-impair, ce qui permet de le recolorer en un clic ; un cadre stylisé est un tracé avec un vrai trou ; un logo vit dans un groupe nommé Logo. L'échelle est fixée à dix unités par module, que le guide des formats utilise déjà pour dériver les chiffres du PNG et du PDF, elle n'est donc pas répétée ici.

Le même balisage est ce que Copy to Figma place dans le presse-papiers. Rien ne diffère entre le texte copié et le fichier téléchargé, sinon l'endroit où il atterrit, ce qui explique pourquoi copier un code QR dans Figma décrit les calques produits par un collage exactement dans les termes ci-dessus.

Comment obtenir un code QR en SVG avec KoloQR

Obtenir un SVG demande une visite au générateur et un téléchargement : saisissez le contenu, stylisez le code si le design le demande, choisissez SVG dans le menu de téléchargement, ouvrez le fichier dans l'outil de design et scannez l'épreuve. Il n'y a ni compte, ni étape par e-mail, ni limite de taille du fichier.

1. Ouvrez le générateur et saisissez le contenu. Ouvrez le générateur et tapez l'URL, les identifiants Wi-Fi, le texte ou tout autre contenu. Les boutons de téléchargement restent inactifs tant que le champ de contenu est vide, si bien que l'exemple stylisé affiché avant la saisie ne peut pas être exporté par erreur.
2. Stylisez le code avant d'exporter. Réglez la forme, le motif des modules, le style des yeux, les couleurs, le cadre et le logo ici plutôt que dans l'outil de design. Le SVG est un instantané de l'aperçu, et l'indicateur de contraste du générateur vérifie la paire de couleurs avant qu'elle ne soit figée dans un fichier.
3. Choisissez SVG dans le menu de téléchargement. Cliquez sur la flèche à côté de Download et choisissez SVG. Le fichier qr-by-koloqr-com.svg atterrit dans le dossier des téléchargements ; Copy to Figma se trouve dans le même menu et place à la place le balisage identique dans le presse-papiers.
4. Ouvrez ou placez le fichier dans l'outil de design. Placez le SVG dans Illustrator, InDesign ou Affinity, glissez-le sur le canevas de Figma ou d'Inkscape, ou envoyez-le dans Canva. Redimensionnez avec les proportions verrouillées, et laissez la zone de silence à l'intérieur du graphisme.
5. Scannez l'épreuve. Scannez le code placé depuis l'écran à 100 % et, pour l'impression, depuis une épreuve imprimée à la taille finale, avec un iPhone et un téléphone Android. Confirmez que l'adresse qui s'ouvre est celle saisie à l'étape 1.

Comment utiliser un code QR en SVG dans Illustrator, Figma, Inkscape et Affinity

Les quatre éditeurs vectoriels ouvrent un code QR en SVG en formes modifiables, et la méthode de travail est la même dans chacun : faites entrer le fichier, laissez la géométrie des modules tranquille, changez la couleur par le remplissage, et redimensionnez avec le verrou de proportions activé. Les noms de menus ci-dessous sont les noms habituels ; ils changent d'une version à l'autre, prenez-les donc comme ce qu'il faut chercher.

• Adobe Illustrator. Utilisez Fichier, puis Importer, ou ouvrez le SVG directement. Un SVG importé arrive typiquement en groupe lié ou incorporé ; dissociez une fois si le remplissage doit être changé partie par partie, puis sélectionnez les formes des modules et réglez le remplissage. Aucune étape Décomposer n'est nécessaire - les modules sont déjà des tracés, pas des effets dynamiques. Redimensionnez en maintenant Maj, ou via le panneau Transformation avec le verrou de proportions activé.
• Figma. Glissez le fichier .svg sur le canevas, ou collez le balisage SVG brut depuis le presse-papiers. Le centre d'aide de Figma indique qu'un fichier SVG importé n'est plus traité comme une image et est converti en calque vectoriel modifiable. Le trajet complet, les noms de calques qui arrivent et les retouches sûres sont dans comment copier un code QR dans Figma.
• Inkscape. Fichier, puis Ouvrir, ouvre le SVG comme document ; Fichier, puis Importer, demande typiquement s'il faut inclure le SVG en objets modifiables ou en image liée - choisissez modifiables. Le SVG propre à Inkscape est un sur-ensemble du fichier, si bien qu'un enregistrement ultérieur en SVG simple le garde portable.
• Affinity Designer. Fichier, puis Importer, ou Fichier, puis Ouvrir. Un SVG importé arrive typiquement en document incorporé qui peut être modifié sur place ou dissocié ; le remplissage se change depuis le panneau de couleur, et le panneau Transformation a un verrou pour le redimensionnement proportionnel.

Dans chacun des quatre, la retouche tentante consiste à tout sélectionner et à appliquer un contour, un effet ou un dégradé. Le contour est celui qui échoue en silence, et la section après la suivante explique la géométrie. Recolorez le remplissage, et seulement le remplissage.

Comment mettre un code QR en SVG dans Canva, InDesign, Word et PowerPoint

Les outils de mise en page et de bureautique prennent un SVG comme une image plutôt que comme des formes modifiables, ce qui convient très bien à un code QR : le code a besoin d'être placé et dimensionné, pas redessiné. Canva l'importe, InDesign le place, et Word et PowerPoint pour Microsoft 365 l'insèrent depuis le menu Images.

• Canva. Envoyez le SVG via le panneau Importations et glissez-le sur le design. Canva accepte l'envoi de SVG, avec une limite de taille de fichier que son centre d'aide précise selon l'offre - un code QR en SVG pèse quelques kilo-octets, la limite n'est donc pas le sujet ; ce qui l'est, c'est de savoir si l'envoi est autorisé sur une offre donnée, et la page des exigences d'envoi de Canva est l'endroit où le confirmer. Si un envoi de SVG est refusé, envoyez à la place un PNG exporté à la taille finale d'impression. Créer un code QR dans Canva couvre tout le trajet, et la comparaison KoloQR vs Canva explique pourquoi l'export SVG propre à Canva est la voie la plus difficile.
• Adobe InDesign. Fichier, puis Importer, et cliquez ou glissez pour définir le bloc. InDesign traite un SVG importé comme un graphique : il ne recolore typiquement pas les remplissages, réglez donc les couleurs avant l'export. Gardez l'échelle à 100 % sur les deux axes ou, quand elle doit changer, changez la largeur et la hauteur du même pourcentage.
• Word et PowerPoint. La page de support de Microsoft sur la modification des images SVG indique que Word, PowerPoint, Outlook et Excel pour Microsoft 365 sur Windows, Mac, Android et Windows Mobile insèrent les fichiers SVG via Insertion, puis Images, puis Cet appareil. Les anciennes versions perpétuelles varient, ce qui explique pourquoi un PNG est la pièce jointe la plus sûre quand la version du destinataire est inconnue. L'option Convertir en forme de l'onglet Format graphique décompose le code en morceaux modifiables ; il n'y a aucune raison de l'utiliser sur un code QR.
• Google Docs et Slides. Ni l'un ni l'autre n'importe le SVG au moment où nous écrivons, insérez donc un PNG. Exportez-le à deux fois la taille affichée pour qu'il reste net sur un écran haute densité.

Quel que soit l'outil, la vérification de taille est la même. Un code QR imprimé veut à peu près un centimètre de largeur pour dix centimètres de distance de lecture, et le calculateur de taille d'impression transforme une distance de lecture en largeur. Redimensionnez le SVG placé à cette largeur avec les proportions verrouillées, et vérifiez que la zone de silence reste à l'intérieur du bloc placé plutôt que d'être rognée par lui.

Comment utiliser un code QR en SVG sur une page web et chez un imprimeur

Sur une page web, référencez le SVG depuis un élément img avec une largeur et une hauteur, et il s'affiche net sur tous les écrans. Chez un imprimeur, envoyez un PDF sauf si l'imprimeur dit accepter le SVG - le PDF est le format que la plupart des formulaires de dépôt nomment, et le guide jumeau explique comment en faire un qui reste vectoriel.

• En image. Une balise img pointant vers le fichier .svg est la voie la plus simple : le navigateur le redimensionne, et une viewBox sans attributs width ni height remplit la taille que la balise lui donne. L'exemple s'affiche à 4 pixels CSS par module quand la balise fait 196 pixels de large, ce qui est un plancher raisonnable pour un code que les gens scanneront depuis un écran.
• En ligne. Coller le balisage SVG dans le HTML permet au CSS de recolorer le tracé, ce qui est utile pour un design en mode sombre où le code doit passer en modules clairs sur fond foncé - une combinaison que les appareils photo natifs des téléphones lisent en général et que les scanneurs plus anciens ne lisent souvent pas, donc testez-la. En ligne signifie aussi que le fichier est téléchargé avec la page au lieu d'être mis en cache séparément.
• Pas en image de fond avec cover ou contain. Les deux peuvent rogner ou déformer la boîte dans laquelle se trouve le code, et une zone de silence rognée est l'échec qui n'apparaît que sur certains téléphones.

Pour l'impression, la question est ce que le flux de travail de l'imprimeur place. La plupart nomment le PDF, certains acceptent le SVG, et quelques anciens systèmes de production demandent l'EPS. Les étapes pour transformer le SVG en PDF entièrement vectoriel, et les cas où l'EPS est la bonne réponse, sont dans SVG vs PNG vs PDF vs EPS. La checklist d'impression passe en revue la taille, le contraste et le support avant que le fichier ne parte en tirage. Une graveuse laser prend le SVG lui-même, exporté sans arrière-plan ; les réglages sont dans graver un code QR au laser.

Les règles qui gardent un code QR vectoriel scannable après retouche

Un code QR vectoriel survit à toute retouche qui laisse tranquilles la grille de modules et son contraste, et échoue à toute retouche qui ne le fait pas. Quatre opérations sont sûres : recolorer le tracé entier, redimensionner avec les proportions verrouillées, déplacer, faire pivoter. Le reste de la liste est ce qu'il faut éviter, avec la raison pour laquelle chacune casse le code.

• Ne déplacez ni ne supprimez jamais un point du tracé. Chaque module foncé est une donnée, et chaque point appartient à l'un d'eux. Un module tiré d'une demi-cellule vers la droite se lit comme deux cellules erronées ; un segment supprimé est une donnée supprimée, et la correction d'erreurs dépense son budget sur cette perte au lieu des dégâts du monde réel.
• Recolorez le tracé entier, pas des modules sélectionnés. Un code à deux couleurs de modules est lu par un scanneur comme une couleur foncée et une couleur claire, et laquelle est laquelle dépend du seuil que choisit le téléphone. Choisissez une couleur foncée et une claire, et vérifiez la paire avec le vérificateur de contraste QR.
• Gardez la zone de silence. La norme ISO/IEC 18004 spécifie quatre modules de marge dégagée de chaque côté. Recadrer le plan de travail sur les modules foncés, ou laisser un cadre ou une photo empiéter sur la marge, supprime la frontière que cherche le scanneur.
• N'ajoutez pas de contour aux modules. Un contour est dessiné centré sur le bord du tracé, si bien qu'un contour d'un dixième de module agrandit chaque module foncé d'un dixième de chaque côté et rétrécit chaque espace clair d'un cinquième. C'est de la géométrie, pas une affaire de goût : avec un contour d'un demi-module, chaque cellule claire entre deux foncées se referme complètement, et le code cesse d'être une grille.
• Ni dégradé ni transparence sur les modules. Un dégradé rend certains modules plus clairs que d'autres, et un scanneur a besoin que chacun tombe nettement du côté foncé de son seuil ; la transparence laisse transparaître le fond, ce qui est le même problème par un autre chemin.
• Ne redimensionnez pas un seul axe. Un étirement de 4 % est invisible à l'écran et rend les motifs de repérage non carrés, ce qui est la première chose que vérifie un décodeur. Verrouillez les proportions avant de toucher une poignée.

Deux vérifications bouclent la boucle. Déposez le graphisme fini dans le validateur de code QR, qui indique si le code stylisé se décode encore et vers quoi, puis scannez une épreuve du résultat réel - l'écran à 100 %, ou la feuille imprimée à la taille finale - avec un téléphone. Le style n'améliore jamais le scan ; l'objet de ces règles est de garder un code retouché aussi scannable que le code simple dont il est parti, et seul un scan confirme que c'est le cas.

Là où les téléchargements gratuits de codes QR vectoriels tournent mal

Un code QR en SVG gratuit venant d'une banque d'images ou d'icônes est un code fonctionnel qui pointe au mauvais endroit, et aucune retouche ne peut le réorienter. Les trois modes d'échec méritent d'être connus avant le téléchargement, parce que chacun a l'air correct dans l'aperçu et échoue au scanneur ou chez le client.

• Le SVG de banque d'images encode l'adresse de quelqu'un d'autre. La plupart des codes QR de banque d'images contiennent https://example.com, le portfolio de l'artiste ou la banque d'images elle-même. Le motif des modules est cette adresse, si bien que le recolorer, le remodeler et le relibeller le laisse pointer là-bas. Un code de banque d'images imprimé sur un menu envoie les convives sur le site d'un inconnu.
• Le PNG vectorisé n'est pas une grille propre. Un code QR matriciel passé par une vectorisation automatique ressort en formes aux coins arrondis, aux cellules de tailles légèrement inégales et aux bords qui ne reposent plus sur la grille des modules. Chacun de ces défauts entame la marge dont dispose un décodeur pour l'éclairage et l'angle. SVG vs PNG explique pourquoi régénérer vaut mieux que vectoriser.
• Le code porte un contour ou une épaisseur de trait photographiée. Certains codes QR vectoriels sont dessinés d'après une photo ou un scan d'un code imprimé, si bien que les modules portent l'engraissement d'encre de l'impression d'origine. Un scanneur voit d'emblée des modules foncés plus gras et des modules clairs plus fins, avant que l'impression suivante n'ajoute son propre engraissement.

La règle de décision est courte. Si vous avez besoin d'un repère pour une maquette, utilisez l'exemple de cette page - il est propre, il scanne, et il dit où il pointe. Si vous avez besoin d'un code qui pointe vers votre page, générez-le : un code QR statique se fait en quelques secondes, s'exporte en SVG sans compte, et encode exactement l'adresse que vous avez tapée. Quel type de code générer, statique ou dynamique, est un choix distinct couvert dans codes QR statiques ou dynamiques ; KoloQR ne fait que des codes statiques.