QR-Code als SVG und Vektordatei: Beispiel herunterladen, reinschauen, überall nutzen

Lade einen SVG-Beispiel-QR-Code herunter

Fang mit der Datei selbst an: lade den SVG-Beispiel-QR-Code herunter. Sie hat 6.355 Bytes, ist ein Symbol der Version 6 mit 41 x 41 Modulen bei Fehlerkorrekturstufe H und codiert die Adresse dieser Seite. Sie wurde mit demselben Encoder erzeugt, den KoloQR im Browser nutzt, und vor der Veröffentlichung am 22. September 2026 mit dem jsQR-Decoder geprüft, sie scannt also. Welches Format du für welchen Auftrag herunterlädst - SVG, PNG, PDF oder EPS - steht in SVG vs. PNG vs. PDF vs. EPS für QR-Codes; auf dieser Seite geht es darum, das SVG selbst zu bekommen, zu lesen und zu nutzen.

Das Beispiel ist absichtlich das schlichteste SVG, das ein QR-Code sein kann. Schwarze quadratische Module auf weißem Hintergrund, eine Ruhezone von vier Modulen, kein Logo, kein Rahmen, keine abgerundeten Ecken und keine width- oder height-Attribute, ein Designtool öffnet es also in seiner jeweiligen Standardgröße, und die Datei skaliert von dort sauber. Ein gestalteter Code aus dem Generator ist eine längere Datei mit mehr Teilen; das Beispiel ist die Datei, die du in einem Texteditor öffnest, wenn die Frage lautet, was ein SVG-QR-Code eigentlich ist.

Die eine Regel für das Beispiel ist, was es codiert. Es zu scannen öffnet diesen Leitfaden, und nichts in Illustrator, Figma oder einem anderen Tool kann es etwas anderes öffnen lassen, denn das Modulmuster ist die Adresse. Nutze es als Stellvertreter in einem Mockup, einer Vorlage oder einem Drucklayout, solange der echte Code noch nicht feststeht, und ersetze es dann durch einen Code, der aus dem echten Ziel erzeugt wurde, bevor irgendetwas gedruckt wird.

Was in der SVG-Beispieldatei steckt, Element für Element

Das Beispiel-SVG besteht aus sechs Zeilen: einer XML-Deklaration, einem Kommentar, einem öffnenden svg-Element mit einer viewBox, einem weißen Hintergrundrechteck, einem schwarzen Pfad, der jedes dunkle Modul enthält, und dem schließenden Tag. Das ist die ganze Datei, und jeder Teil hat eine Aufgabe, auf die ein Scanner oder ein Designtool angewiesen ist.

Die Pfaddaten lesen sich in Moduleinheiten. M4 4h7v1H4z bedeutet: gehe zu Spalte 4, Zeile 4, zeichne 7 Einheiten nach rechts, 1 Einheit nach unten, zurück zu Spalte 4 und schließe - das ist die Oberkante des Suchmusters oben links, direkt innerhalb der vier Module breiten Ruhezone. Jeder Teilpfad ist diese Form mit anderen Zahlen. Benachbarte dunkle Module einer Zeile werden zu einem Lauf zusammengefasst, statt je als ein Quadrat gezeichnet zu werden, was die Datei etwas kleiner macht und nichts an der Geometrie ändert, die ein Scanner sieht.

Ein SVG-QR-Code aus einem anderen Generator unterscheidet sich in den Details - ein Rechteck pro Modul, eine Gruppe pro Zeile, eine Transformation statt eines viewBox-Versatzes - und keiner dieser Unterschiede ist für einen Scanner von Bedeutung. Was zählt, steht in der Tabelle: eine viewBox, ein heller Hintergrund unter der Ruhezone und dunkle Module als gefüllte Formen ohne Kontur.

Was ein Vektor-QR-Code ist, und warum das Muster die Daten sind

Eine Vektordatei ist ein Bild, das als Formen und Koordinaten statt als Pixel gespeichert ist, und lässt sich deshalb in jeder Größe neu zeichnen, ohne an Kantenschärfe zu verlieren. Ein Vektor-QR-Code ist damit ein Satz gefüllter Formen auf einem Raster, und das Raster ist die Nachricht: Ein Scanner liest, welche Zellen dunkel und welche hell sind, und macht aus dieser Anordnung wieder die Adresse.

Ein Modul ist eines der kleinen hellen und dunklen Quadrate, die die Daten eines QR-Codes tragen, und die kleinste Einheit, die ein Scanner auflösen muss. Im Beispiel gibt es 1.681 Modulpositionen, und 823 davon sind dunkel. Welche 823 das sind, entscheidet der Encoder aus dem Text, der Fehlerkorrekturstufe und einem Maskenmuster, weshalb kein Designtool ein Feld hat, in das sich die Adresse tippen ließe - die Adresse liegt nicht neben dem Bild, die Adresse ist das Bild.

Die Ruhezone ist der leere Rand um einen QR-Code, an dem ein Scanner erkennt, wo das Symbol beginnt und endet, und der Standard schreibt vier Module auf jeder Seite vor. In einer Vektordatei geht die Ruhezone leicht verloren, weil ein Tool, das auf das sichtbare Artwork zuschneidet, auf die dunklen Module zuschneidet und den Rand wegwirft. Genau deshalb behält das Beispiel den Rand innerhalb der viewBox und färbt ihn weiß. Die Ruhezone beschreibt, was passiert, wenn sie fehlt.

Was ein KoloQR-SVG-Export enthält

Ein KoloQR-SVG-Download ist eine einzelne Datei namens qr-by-koloqr-com.svg, die den Code als einzeln benannte Vektorteile enthält: einen Hintergrund, die Module, die drei Suchmuster-Augen, einen Rahmen, falls einer gewählt wurde, ein Logo, falls eines ergänzt wurde, und jeden Beschriftungstext bereits in Pfade umgewandelt. KoloQR, ein kostenloser QR-Code-Generator mit runden und individuell geformten QR-Codes, schreibt diese Datei im Browser und fügt ihr nichts hinzu - kein Wasserzeichen, kein Tracking-Element, kein Konto.

Was der Exportcode im Moment des Downloads tut, in der Reihenfolge, in der er es tut:

• Wandelt die Beschriftungen in Pfade um. Trägt ein QR-Code-Rahmen Text wie SCAN ME, wartet der Export, bis die Beschriftungsschrift geladen ist, und zeichnet jede Beschriftung vor dem Serialisieren als Pfad neu, die Datei enthält also nie ein Textelement, das später eine installierte Schrift braucht.
• Serialisiert das Artwork. Das svg-Element, das auf dem Bildschirm war, wird mit seiner viewBox herausgeschrieben, und die Datei bekommt eine XML-Deklaration, falls sie noch keine hatte.
• Ergänzt eine explizite width und height. Die beiden Attribute werden aus der viewBox übernommen, damit ein Designtool, das sie liest, allen voran Figma, den Code in seiner echten Größe platziert statt in einer Standardbox.
• Macht referenzierte ids eindeutig. Jede id, auf die etwas in der Datei zeigt - ein Clip-Pfad, der unsichtbare Bogen, dem eine gebogene Beschriftung folgt - bekommt ein Präfix, das nur für diesen Export gilt, zwei in ein Dokument gelegte Codes können sich also nicht gegenseitig beschneiden. Ids, die nur Ebenen benennen, etwa Background und Logo, bleiben lesbar.

Die Teile, die ein Designtool in seinem Ebenenbedienfeld zeigt, stammen aus der Datei selbst. Das Wurzelelement heißt by KoloQR.com; der Hintergrund ist ein Rechteck namens Background, das wegfällt, wenn der Hintergrund auf transparent gestellt ist; die Datenmodule liegen in einer Gruppe, die mit der Vordergrundfarbe gefüllt ist, jedes Modul als eigene Form - ein Quadrat, ein Kreis oder eine Kapsel, wenn ein Pillenmuster einen Lauf zusammenfasst; jedes Suchmuster-Auge ist ein Pfad, dessen Loch durch eine Even-Odd-Füllung ausgeschnitten ist, sodass es sich mit einem Klick umfärben lässt; ein gestalteter Rahmen ist ein Pfad mit einem echten Loch darin; ein Logo liegt in einer Gruppe namens Logo. Der Maßstab ist auf zehn Einheiten pro Modul festgelegt, aus dem der Format-Leitfaden bereits die PNG- und PDF-Werte ableitet, hier wird er also nicht wiederholt.

Dasselbe Markup legt Copy to Figma in die Zwischenablage. Zwischen dem kopierten Text und der heruntergeladenen Datei unterscheidet sich nichts außer dem Ort, an dem es landet, weshalb einen QR-Code nach Figma kopieren die Ebenen, die ein Einfügen erzeugt, genau in den Begriffen von oben beschreibt.

So bekommst du mit KoloQR einen QR-Code als SVG

Ein SVG zu bekommen braucht einen Besuch im Generator und einen Download: Inhalt eingeben, den Code gestalten, wenn das Design es verlangt, im Download-Menü SVG wählen, die Datei im Designtool öffnen und den Andruck scannen. Es gibt kein Konto, keinen E-Mail-Schritt und keine Größengrenze für die Datei.

1. Öffne den Generator und gib den Inhalt ein. Öffne den Generator und tippe die URL, die WLAN-Daten, den Text oder anderen Inhalt ein. Die Download-Schaltflächen bleiben inaktiv, bis das Inhaltsfeld etwas enthält, der gestaltete Platzhalter, der vor der Eingabe gezeigt wird, kann also nicht versehentlich exportiert werden.
2. Gestalte den Code vor dem Export. Lege Form, Modulmuster, Augenstil, Farben, Rahmen und Logo hier fest und nicht im Designtool. Das SVG ist ein Schnappschuss der Vorschau, und die Kontrastanzeige des Generators prüft das Farbpaar, bevor es in eine Datei geschrieben wird.
3. Wähle SVG im Download-Menü. Klicke auf den Pfeil neben Download und wähle SVG. Die Datei qr-by-koloqr-com.svg landet im Download-Ordner; Copy to Figma sitzt im selben Menü und legt stattdessen das identische Markup in die Zwischenablage.
4. Öffne oder platziere die Datei im Designtool. Platziere das SVG in Illustrator, InDesign oder Affinity, zieh es auf die Zeichenfläche von Figma oder Inkscape, oder lade es in Canva hoch. Skaliere mit gesperrten Proportionen und lass die Ruhezone innerhalb des Artworks.
5. Scanne den Andruck. Scanne den platzierten Code vom Bildschirm bei 100 % und, für den Druck, von einem gedruckten Andruck in Endgröße, mit einem iPhone und einem Android-Handy. Bestätige, dass sich die Adresse öffnet, die du in Schritt 1 eingegeben hast.

So nutzt du einen SVG-QR-Code in Illustrator, Figma, Inkscape und Affinity

Alle vier Vektoreditoren öffnen einen SVG-QR-Code als bearbeitbare Formen, und die Arbeitsweise ist in jedem dieselbe: Datei hereinholen, die Modulgeometrie in Ruhe lassen, die Farbe über die Füllung ändern und mit eingeschalteter Proportionssperre skalieren. Die Menünamen unten sind die üblichen; sie verschieben sich zwischen Versionen, nimm sie also als das, wonach du suchen musst.

• Adobe Illustrator. Nutze Datei, dann Platzieren, oder öffne das SVG direkt. Ein platziertes SVG kommt typischerweise als verknüpfte oder eingebettete Gruppe an; hebe die Gruppierung einmal auf, wenn die Füllung je Teil geändert werden soll, wähle dann die Modulformen aus und setze die Füllung. Ein Schritt Umwandeln ist nicht nötig - die Module sind bereits Pfade, keine Live-Effekte. Skaliere mit gehaltener Umschalttaste oder über das Transformieren-Bedienfeld mit eingeschalteter Proportionssperre.
• Figma. Zieh die .svg-Datei auf die Zeichenfläche, oder füge das rohe SVG-Markup aus der Zwischenablage ein. Das Hilfecenter von Figma sagt, dass eine importierte SVG-Datei nicht mehr als Bild behandelt, sondern in eine bearbeitbare Vektorebene umgewandelt wird. Der komplette Weg, die ankommenden Ebenennamen und die sicheren Änderungen stehen in wie du einen QR-Code nach Figma kopierst.
• Inkscape. Datei, dann Öffnen, öffnet das SVG als Dokument; Datei, dann Importieren, fragt typischerweise, ob das SVG als bearbeitbare Objekte oder als verknüpftes Bild eingebunden werden soll - wähle bearbeitbar. Inkscapes eigenes SVG ist eine Obermenge der Datei, ein anschließendes Speichern als einfaches SVG hält sie also portabel.
• Affinity Designer. Datei, dann Platzieren, oder Datei, dann Öffnen. Ein platziertes SVG kommt typischerweise als eingebettetes Dokument an, das sich direkt bearbeiten oder aufgruppieren lässt; die Füllung änderst du über das Farbbedienfeld, und das Transformieren-Bedienfeld hat eine Sperre für proportionales Skalieren.

In jedem der vier ist die verlockende Änderung, alles auszuwählen und eine Kontur, einen Effekt oder einen Verlauf anzuwenden. Die Kontur ist die, die still versagt, und der übernächste Abschnitt erklärt die Geometrie. Färbe die Füllung um, und nur die Füllung.

So bringst du einen SVG-QR-Code in Canva, InDesign, Word und PowerPoint

Die Layout- und Office-Programme nehmen ein SVG als Bild und nicht als bearbeitbare Formen, was für einen QR-Code in Ordnung ist: Der Code muss platziert und dimensioniert werden, nicht neu gezeichnet. Canva lädt ihn hoch, InDesign platziert ihn, und Word und PowerPoint für Microsoft 365 fügen ihn über das Menü Bilder ein.

• Canva. Lade das SVG über das Uploads-Bedienfeld hoch und zieh es auf das Design. Canva akzeptiert SVG-Uploads, mit einer Dateigrößengrenze, die das Hilfecenter je Tarif nennt - ein SVG-QR-Code hat wenige Kilobyte, die Grenze ist also nicht das Problem; ob der Upload im jeweiligen Tarif erlaubt ist, schon, und Canvas eigene Seite zu den Upload-Anforderungen ist der Ort, das zu bestätigen. Wird ein SVG-Upload abgelehnt, lade stattdessen ein PNG hoch, exportiert in der endgültigen Druckgröße. Einen QR-Code in Canva erstellen beschreibt den ganzen Weg, und der Vergleich KoloQR vs. Canva erklärt, warum Canvas eigener SVG-Export der schwierigere Pfad ist.
• Adobe InDesign. Datei, dann Platzieren, und klicke oder ziehe, um den Rahmen zu setzen. InDesign behandelt ein platziertes SVG als Grafik: Es färbt die Füllungen typischerweise nicht um, lege die Farben also vor dem Export fest. Halte die Skalierung auf beiden Achsen bei 100 % oder ändere, wenn sie sich ändern muss, Breite und Höhe um denselben Prozentsatz.
• Word und PowerPoint. Microsofts Support-Seite zum Bearbeiten von SVG-Bildern sagt, dass Word, PowerPoint, Outlook und Excel für Microsoft 365 unter Windows, Mac, Android und Windows Mobile SVG-Dateien über Einfügen, dann Bilder, dann Dieses Gerät einfügen. Ältere Kaufversionen unterscheiden sich, weshalb ein PNG der sicherere Anhang ist, wenn die Version des Empfängers unbekannt ist. Die Option In Form konvertieren auf der Registerkarte Grafikformat zerlegt den Code in bearbeitbare Teile; es gibt keinen Grund, sie bei einem QR-Code zu nutzen.
• Google Docs und Slides. Keines von beiden importiert zum Zeitpunkt des Schreibens SVG, füge also ein PNG ein. Exportiere es in der doppelten Anzeigegröße, damit es auf einem hochauflösenden Display scharf bleibt.

Egal welches Tool, die Größenprüfung ist dieselbe. Ein gedruckter QR-Code will grob einen Zentimeter Breite je zehn Zentimeter Leseabstand, und der Druckgrößen-Rechner macht aus einem Leseabstand eine Breite. Skaliere das platzierte SVG mit gesperrten Proportionen auf diese Breite und prüf, dass die Ruhezone noch innerhalb des platzierten Rahmens liegt, statt von ihm beschnitten zu werden.

So nutzt du einen SVG-QR-Code auf einer Webseite und in der Druckerei

Auf einer Webseite referenzierst du das SVG aus einem img-Element mit width und height, und es wird auf jedem Display scharf gerendert. Bei einer Druckerei schickst du ein PDF, außer die Druckerei sagt, dass sie SVG annimmt - PDF ist das Format, das die meisten Upload-Formulare nennen, und der Schwester-Leitfaden erklärt, wie du eines machst, das Vektor bleibt.

• Als Bild. Ein img-Tag, das auf die .svg-Datei zeigt, ist der einfachste Weg: Der Browser skaliert es, und eine viewBox ohne width- und height-Attribute füllt jede Größe, die das Tag ihr gibt. Das Beispiel wird mit 4 CSS-Pixeln pro Modul gerendert, wenn das Tag 196 Pixel breit ist, was eine vernünftige Untergrenze für einen Code ist, den Leute vom Bildschirm scannen.
• Inline. Das SVG-Markup in das HTML einzufügen erlaubt CSS, den Pfad umzufärben, was für ein Dark-Mode-Design nützlich ist, in dem der Code auf helle Module vor dunklem Grund wechseln muss - eine Kombination, die native Handykameras meist lesen und ältere Scanner oft nicht, also teste sie. Inline heißt auch, dass die Datei mit der Seite geladen wird, statt separat gecacht zu werden.
• Nicht als Hintergrundbild mit cover oder contain. Beide können die Box, in der der Code sitzt, beschneiden oder verzerren, und eine beschnittene Ruhezone ist der Fehler, der nur auf manchen Handys auftaucht.

Für den Druck lautet die Frage, was der Ablauf der Druckerei platziert. Die meisten nennen PDF, manche akzeptieren SVG, und ein paar ältere Produktionssysteme verlangen EPS. Die Schritte, um aus dem SVG ein vollständig vektorielles PDF zu machen, und wann EPS die richtige Antwort ist, stehen in SVG vs. PNG vs. PDF vs. EPS. Die Druck-Checkliste geht Größe, Kontrast und Material durch, bevor die Datei in die Auflage geht. Ein Lasergravierer nimmt das SVG selbst, ohne Hintergrund exportiert; die Einstellungen stehen unter QR-Code mit dem Laser gravieren.

Regeln, die einen Vektor-QR-Code nach dem Bearbeiten scannbar halten

Ein Vektor-QR-Code übersteht jede Änderung, die das Modulraster und seinen Kontrast in Ruhe lässt, und versagt bei jeder Änderung, die das nicht tut. Vier Operationen sind sicher: den ganzen Pfad umfärben, mit gesperrten Proportionen skalieren, verschieben, drehen. Der Rest der Liste ist das, was du vermeiden solltest, mit dem Grund, warum jede davon den Code zerstört.

• Verschiebe oder lösche nie einen Pfadpunkt. Jedes dunkle Modul ist Daten, und jeder Punkt gehört zu einem. Ein Modul, das eine halbe Zelle nach rechts gezogen wurde, wird als zwei falsche Zellen gelesen; ein gelöschter Lauf ist gelöschte Daten, und die Fehlerkorrektur verbraucht ihr Budget für diesen Verlust statt für echte Beschädigungen.
• Färbe den ganzen Pfad um, nicht ausgewählte Module. Einen Code mit zwei Modulfarben liest ein Scanner als eine dunkle und eine helle Farbe, und welche welche ist, hängt vom Schwellwert ab, den das Handy wählt. Wähle eine dunkle und eine helle Farbe und prüf das Paar mit dem QR-Code-Kontrastprüfer.
• Behalte die Ruhezone. ISO/IEC 18004 schreibt vier Module freien Rand auf jeder Seite vor. Die Zeichenfläche auf die dunklen Module zuzuschneiden oder einen Rahmen oder ein Foto in den Rand laufen zu lassen, entfernt die Grenze, nach der der Scanner sucht.
• Gib den Modulen keine Kontur. Eine Kontur wird mittig auf der Pfadkante gezeichnet, eine Kontur von einem Zehntel Modul vergrößert also jedes dunkle Modul um ein Zehntel auf jeder Seite und verkleinert jede helle Lücke um ein Fünftel. Das ist Geometrie, keine Geschmacksfrage: Bei einer Kontur von einem halben Modul schließt sich jede helle Zelle zwischen zwei dunklen vollständig, und der Code ist kein Raster mehr.
• Keine Verläufe oder Transparenz auf den Modulen. Ein Verlauf macht manche Module heller als andere, und ein Scanner braucht jedes einzelne klar auf der dunklen Seite seines Schwellwerts; Transparenz lässt den Hintergrund durchscheinen, was dasselbe Problem auf anderem Weg ist.
• Skaliere nicht nur eine Achse. Eine Streckung um 4 % ist auf dem Bildschirm unsichtbar und macht die Suchmuster unquadratisch, und das ist das Erste, was ein Decoder prüft. Sperre die Proportionen, bevor du einen Griff anfasst.

Zwei Prüfungen schließen den Kreis. Leg das fertige Artwork in den QR-Code-Validator, der meldet, ob der gestaltete Code noch decodiert und wozu, und scanne dann einen Andruck der echten Ausgabe - den Bildschirm bei 100 % oder das gedruckte Blatt in Endgröße - mit einem Handy. Gestaltung verbessert das Scannen nie; der Sinn dieser Regeln ist, einen bearbeiteten Code so scannbar zu halten wie den schlichten, mit dem er begann, und nur ein Scan bestätigt, dass das gelungen ist.

Wo kostenlose Vektor-QR-Code-Downloads schiefgehen

Ein kostenloser SVG-QR-Code von einer Stock- oder Icon-Seite ist ein funktionierender Code, der auf den falschen Ort zeigt, und keine Bearbeitung kann ihn umlenken. Die drei Fehlerarten lohnt es sich vor dem Download zu kennen, denn jede sieht in der Vorschau gut aus und versagt am Scanner oder beim Kunden.

• Das Stock-SVG codiert die Adresse von jemand anderem. Die meisten Stock-QR-Codes enthalten https://example.com, das Portfolio des Künstlers oder die Stock-Seite selbst. Das Modulmuster ist diese Adresse, umfärben, umformen und neu beschriften lässt es also dorthin zeigen. Ein Stock-Code auf einer Speisekarte schickt Gäste auf die Seite eines Fremden.
• Das vektorisierte PNG ist kein sauberes Raster. Ein Raster-QR-Code, der durch ein automatisches Nachzeichnen gelaufen ist, kommt als Formen mit abgerundeten Ecken, leicht ungleichen Zellgrößen und Kanten zurück, die nicht mehr auf dem Modulraster liegen. Jedes davon frisst an dem Spielraum, den ein Decoder für Licht und Winkel hat. SVG vs. PNG erklärt, warum Neuerzeugen das Nachzeichnen schlägt.
• Der Code trägt eine Kontur oder eine abfotografierte Strichstärke. Manche Vektor-QR-Codes sind von einem Foto oder Scan eines gedruckten Codes gezeichnet, die Module tragen also den Farbzuwachs des ursprünglichen Drucks. Ein Scanner sieht von Anfang an dickere dunkle und dünnere helle Module, bevor der nächste Druck seinen eigenen Zuwachs dazugibt.

Die Entscheidungsregel ist kurz. Brauchst du einen Platzhalter für ein Mockup, nimm das Beispiel auf dieser Seite - es ist sauber, es scannt, und es sagt, wohin es zeigt. Brauchst du einen Code, der auf deine Seite zeigt, erzeug ihn: Ein statischer QR-Code ist in Sekunden gemacht, exportiert als SVG ohne Konto und codiert genau die Adresse, die du getippt hast. Welche Art Code du erzeugst, statisch oder dynamisch, ist eine eigene Entscheidung, die statische vs. dynamische QR-Codes behandelt; KoloQR macht ausschließlich statische Codes.