Pourquoi le GARAN-Label est un PNG, pas un SVG
Une version vectorielle du GARAN-Label peut sembler être une amélioration : plus légère en théorie, redimensionnable à l'infini, « plus moderne ». En pratique, une étiquette de garantie en SVG crée plus de problèmes qu'elle n'en résout. Voici pourquoi nous générons délibérément chaque GARAN-Label au format PNG.
En résumé : un GARAN-Label en SVG est plus lourd sur le disque une fois la police requise comptée, casse son propre code QR dès qu'un deuxième label apparaît sur la même page, et échoue souvent à s'afficher dans les emails de confirmation de commande. Un PNG n'a aucun de ces problèmes.
Problème 1 : la taille de fichier s'accumule
Un seul GARAN-Label en SVG pèse environ 300 Ko. Pour s'afficher correctement, il dépend aussi de la police Inter, ce qui ajoute environ 350 Ko supplémentaires si cette police n'est pas déjà chargée sur la page. Cela représente environ 650 Ko pour une seule étiquette de conformité, avant même que vos photos produits, votre thème et tout le reste de la page ne commencent à charger.
Sur une page de liste de produits avec des dizaines d'articles, ou une boutique qui n'a pas déjà chargé Inter pour son propre design, cela ajoute un poids réel au temps de chargement de la page et aux Core Web Vitals, pour un petit label censé être une note de bas de page, pas un titre.
Problème 2 : plusieurs labels sur une page cassent le code QR
Le code QR du GARAN-Label à l'intérieur du SVG est construit à l'aide de références internes à des éléments (des ID). C'est une pratique normale pour les graphiques SVG, mais cela ne fonctionne de manière fiable que lorsque le SVG apparaît une seule fois par page. Dès qu'un second GARAN-Label avec le même balisage est intégré en ligne sur la même page, les navigateurs ne peuvent résoudre que le premier élément portant un ID donné, si bien que chaque label suivant perd silencieusement son code QR (ou d'autres parties référencées par ID).
Ce n'est pas un cas rare : cela se produit sur toute page de catégorie, tableau comparatif ou panier affichant plusieurs produits avec un GARAN-Label en même temps.
Problème 3 : il doit aussi fonctionner dans les emails de confirmation de commande
Le GARAN-Label ne doit pas seulement apparaître sur la page produit, il doit aussi figurer dans l'email de confirmation de commande. C'est là que le SVG rencontre sa plus grande limite :
- De nombreux clients email ne rendent pas le SVG du tout. Le moteur de rendu d'Outlook n'a aucun support SVG, et Gmail supprime les images SVG pour des raisons de sécurité (un SVG peut contenir du JavaScript intégré). Selon le client, le label ne s'affiche tout simplement pas.
- La même collision d'ID du problème 2 s'applique à l'intérieur d'un email dès qu'une commande contient plusieurs produits avec un label.
- Joindre un fichier à la place n'est pas une véritable solution de contournement. Des plateformes comme Shopify n'offrent pas de moyen de générer et de joindre un PDF ou un fichier personnalisé par commande à l'email de confirmation, vous ne pouvez donc pas simplement contourner le problème d'affichage avec une pièce jointe.
Notre recommandation : PNG
Un GARAN-Label est une petite étiquette de conformité à taille fixe, pas une œuvre graphique devant s'adapter à n'importe quelle taille, donc le principal argument en faveur du SVG (la mise à l'échelle infinie) ne s'applique pas vraiment ici. Un PNG :
- ne nécessite aucune police web séparée, puisque le texte est déjà intégré à l'image,
- n'a aucun ID interne, si bien que n'importe quel nombre de labels sur une page ou dans un email s'affiche correctement et indépendamment,
- est pris en charge de manière identique par tous les navigateurs, tous les principaux clients email, et tous les flux PDF ou d'impression,
- et est exporté à une résolution qui reste nette à l'écran comme à l'impression.
C'est pourquoi GARAN-Label.com génère chaque label en PNG par défaut.
Vous ajoutez le label à votre boutique ? Voir le guide Shopify →
Questions fréquentes
Puis-je obtenir mon GARAN-Label en SVG plutôt qu'en PNG ?
Nous générons chaque GARAN-Label au format PNG par conception. En phase de test, la version SVG a causé plus de problèmes qu'elle n'en résolvait (taille de fichier, dépendance à une police, codes QR défaillants, compatibilité email) sans réel avantage pour un label affiché à une taille fixe.
Un PNG ne perd-il pas en qualité par rapport à un format vectoriel ?
Pas en pratique. Un GARAN-Label est placé à une taille fixe et plutôt petite sur une fiche produit, un emballage ou une facture ; il n'a jamais besoin d'être agrandi à la taille d'une affiche. Nos PNG sont exportés à une résolution qui reste nette à l'écran comme à l'impression.
Pourquoi le code QR casse-t-il avec plusieurs labels SVG sur une même page ?
Le balisage SVG du code QR repose sur des références internes à des éléments (des ID). C'est une pratique normale pour les graphiques SVG, mais cela ne fonctionne de manière fiable que lorsque le SVG apparaît une seule fois par page. Dès qu'un deuxième GARAN-Label avec le même balisage est intégré en ligne sur la même page, les navigateurs ne résolvent que le premier élément portant un ID donné, si bien que chaque label suivant perd silencieusement son code QR (ou d'autres parties référencées par ID).
Cela affecte-t-il aussi les factures PDF ou les emails de confirmation de commande ?
Oui, de la même manière. Plusieurs SVG en ligne dans un même document partagent les mêmes collisions d'ID, et plusieurs clients email ne rendent pas du tout les images SVG. Un PNG s'affiche à l'identique partout : navigateurs, factures PDF et tous les principaux clients email.