Warum das GARAN-Label als PNG statt als SVG erzeugt wird
Eine Vektor-Variante des GARAN-Labels klingt zunächst nach einem Upgrade: theoretisch kleiner, unendlich skalierbar, „moderner". In der Praxis verursacht ein SVG-Garantielabel jedoch mehr Probleme, als es löst. Deshalb erzeugen wir jedes GARAN-Label bewusst als PNG.
Kurzfassung: Ein GARAN-Label als SVG ist inklusive der benötigten Schriftart größer als gedacht, zerstört seinen eigenen QR-Code, sobald ein zweites Label auf derselben Seite erscheint, und wird in Bestellbestätigungs-E-Mails oft gar nicht erst angezeigt. Ein PNG hat keines dieser Probleme.
Problem 1: Die Dateigröße summiert sich
Ein einzelnes GARAN-Label als SVG wiegt rund 300 KB. Damit es korrekt dargestellt wird, benötigt es außerdem die Schriftart Inter, was noch einmal rund 350 KB hinzufügt, sofern diese Schrift nicht ohnehin schon auf der Seite geladen ist. Das sind etwa 650 KB für ein einziges Compliance-Label, bevor Produktfotos, Theme und alles andere auf der Seite überhaupt zu laden beginnen.
Auf einer Kategorieseite mit Dutzenden Produkten, oder in einem Shop, der Inter nicht ohnehin schon für sein eigenes Design lädt, sorgt das für spürbar mehr Ladezeit und schlechtere Core Web Vitals, für ein kleines Label, das eigentlich Fußnote und keine Schlagzeile sein soll.
Problem 2: Mehrere Labels auf einer Seite zerstören den QR-Code
Der QR-Code im GARAN-Label wird innerhalb des SVGs über interne Element-Referenzen (IDs) aufgebaut. Das ist bei SVG-Grafiken grundsätzlich üblich, funktioniert aber nur zuverlässig, wenn das SVG einmal pro Seite vorkommt. Sobald ein zweites GARAN-Label mit demselben Markup auf derselben Seite eingebunden wird, lösen Browser nur das erste Element mit einer bestimmten ID auf, wodurch jedes weitere Label seinen QR-Code (und andere ID-referenzierte Teile) stillschweigend verliert.
Das ist kein seltener Sonderfall: Es passiert auf jeder Kategorieseite, in jeder Vergleichstabelle oder im Warenkorb, sobald mehr als ein Produkt mit GARAN-Label gleichzeitig angezeigt wird.
Problem 3: Es muss auch in Bestellbestätigungs-E-Mails funktionieren
Das GARAN-Label muss nicht nur auf der Produktseite erscheinen, sondern gehört auch in die Bestellbestätigungs-E-Mail. Genau hier stößt SVG an seine größte Grenze:
- Viele E-Mail-Programme stellen SVG gar nicht dar. Die Rendering-Engine von Outlook unterstützt kein SVG, und Gmail entfernt SVG-Bilder aus Sicherheitsgründen (ein SVG kann eingebetteten JavaScript-Code enthalten). Je nach Client wird das Label schlicht nicht angezeigt.
- Dieselbe ID-Kollision aus Problem 2 tritt auch innerhalb einer E-Mail auf, sobald eine Bestellung mehr als ein Produkt mit Label enthält.
- Ein Anhang statt Einbettung ist kein echter Workaround. Plattformen wie Shopify bieten keine Möglichkeit, pro Bestellung eine individuelle PDF-Datei zu erzeugen und der Bestellbestätigung anzuhängen. Das Anzeigeproblem lässt sich also nicht einfach über einen Anhang umgehen.
Unsere Empfehlung: PNG
Ein GARAN-Label ist ein kleines Compliance-Label in fester Größe, keine Grafik, die auf beliebige Größen skalieren muss. Das Hauptargument für SVG (unendliche Skalierbarkeit) greift hier also gar nicht wirklich. Ein PNG:
- benötigt keine separate Web-Schriftart, da der Text bereits fest im Bild eingebettet ist,
- hat keine internen IDs, wodurch beliebig viele Labels auf einer Seite oder in einer E-Mail unabhängig und korrekt dargestellt werden,
- wird von jedem Browser, jedem gängigen E-Mail-Programm und jedem PDF- oder Druck-Workflow identisch unterstützt,
- und wird in einer Auflösung exportiert, die sowohl am Bildschirm als auch im Druck scharf bleibt.
Deshalb erzeugt GARAN-Label.com jedes Label standardmäßig als PNG.
Label in Ihren Shop einbinden? Zur Shopify-Anleitung →
Häufige Fragen
Kann ich mein GARAN-Label statt als PNG auch als SVG bekommen?
Wir erzeugen jedes GARAN-Label bewusst als PNG-Bild. In der Praxis hat die SVG-Variante mehr Probleme verursacht als gelöst (Dateigröße, Schriftart-Abhängigkeit, defekte QR-Codes, E-Mail-Kompatibilität), ohne echten Vorteil für ein Label, das ohnehin in fester Größe angezeigt wird.
Verliert ein PNG nicht an Qualität gegenüber einem Vektorformat?
In der Praxis nicht. Ein GARAN-Label wird in fester, eher kleiner Größe auf der Produktseite, der Verpackung oder der Rechnung platziert und muss nie auf Plakatgröße skaliert werden. Unsere PNGs werden in einer Auflösung exportiert, die sowohl am Bildschirm als auch im Druck scharf bleibt.
Warum bricht der QR-Code bei mehreren SVG-Labels auf einer Seite?
Der QR-Code im SVG basiert auf internen Element-IDs. Browser lösen bei gleicher ID auf einer Seite immer nur das erste Element auf. Sobald ein zweites, drittes oder weiteres SVG-Label mit denselben internen IDs eingebunden wird, geht dessen QR-Code (und andere ID-referenzierte Teile) stillschweigend verloren. Ein PNG hat keine internen IDs, dieses Problem entfällt komplett.
Betrifft das auch PDF-Rechnungen oder Bestellbestätigungs-E-Mails?
Ja, genauso. Mehrere eingebettete SVGs in einem Dokument teilen sich dieselben ID-Kollisionen, und etliche E-Mail-Programme stellen SVG-Bilder gar nicht erst dar. Ein PNG wird überall identisch dargestellt: im Browser, in PDF-Rechnungen und in jedem gängigen E-Mail-Programm.