Dlaczego GARAN-Label to PNG, a nie SVG
Wektorowa wersja GARAN-Label brzmi jak ulepszenie: teoretycznie mniejsza, nieskończenie skalowalna, „nowocześniejsza". W praktyce etykieta gwarancyjna SVG powoduje więcej problemów, niż rozwiązuje. Oto dlaczego celowo generujemy każdy GARAN-Label jako PNG.
Krótka wersja: GARAN-Label w formacie SVG jest większy na dysku, gdy uwzględni się wymaganą czcionkę, psuje własny kod QR, gdy na tej samej stronie pojawia się drugi label, i często w ogóle nie wyświetla się w emailach z potwierdzeniem zamówienia. PNG nie ma żadnego z tych problemów.
Problem 1: rozmiar pliku się sumuje
Pojedynczy GARAN-Label jako SVG waży ok. 300 KB. Aby poprawnie się wyświetlić, zależy też od czcionki Inter, co dodaje kolejne ok. 350 KB, jeśli ta czcionka nie jest już załadowana na stronie. To ok. 650 KB dla pojedynczego labela zgodności, zanim jeszcze zaczną się ładować zdjęcia produktów, motyw i cała reszta strony.
Na liście produktów z kilkudziesięcioma pozycjami lub w sklepie, który nie załadował jeszcze Inter dla własnego designu, dodaje to realny ciężar do czasu ładowania strony i Core Web Vitals — dla małego labela, który ma być przypisem, a nie nagłówkiem.
Problem 2: wiele labeli na jednej stronie psuje kod QR
Kod QR w GARAN-Label wewnątrz SVG jest zbudowany za pomocą wewnętrznych odwołań do elementów (ID). To normalna praktyka dla grafik SVG, ale działa niezawodnie tylko wtedy, gdy SVG pojawia się raz na stronie. Gdy tylko drugi GARAN-Label z tym samym kodem zostanie osadzony w treści tej samej strony, przeglądarki rozpoznają tylko pierwszy element z danym ID, więc każdy kolejny label po cichu traci swój kod QR (lub inne części odwołujące się do ID).
To nie jest rzadki przypadek brzegowy: zdarza się na każdej stronie kategorii, w tabeli porównawczej lub w koszyku, gdzie wyświetlanych jest jednocześnie więcej niż jeden produkt z GARAN-Label.
Problem 3: musi działać też w emailach z potwierdzeniem zamówienia
GARAN-Label musi pojawiać się nie tylko na stronie produktu, ale też w emailu z potwierdzeniem zamówienia. Właśnie tutaj SVG napotyka swoje największe ograniczenie:
- Wiele klientów poczty w ogóle nie renderuje SVG. Silnik renderujący Outlooka nie obsługuje SVG, a Gmail usuwa obrazy SVG ze względów bezpieczeństwa (SVG może zawierać osadzony JavaScript). W zależności od klienta label po prostu się nie wyświetla.
- Ten sam konflikt ID z problemu 2 dotyczy również emaila, gdy tylko zamówienie zawiera więcej niż jeden produkt z labelem.
- Dołączenie pliku zamiast tego nie jest realnym obejściem. Platformy takie jak Shopify nie oferują sposobu generowania i dołączania niestandardowego pliku PDF lub innego pliku do każdego zamówienia w emailu z potwierdzeniem, więc nie da się po prostu ominąć problemu z wyświetlaniem za pomocą załącznika.
Nasza rekomendacja: PNG
GARAN-Label to mała etykieta zgodności o stałym rozmiarze, a nie grafika, która musi skalować się do dowolnego rozmiaru, więc główny argument za SVG (nieskończona skalowalność) tak naprawdę tu nie ma zastosowania. PNG:
- nie wymaga osobnej czcionki webowej, ponieważ tekst jest już wyrenderowany w obrazie,
- nie ma wewnętrznych ID, więc dowolna liczba labeli na stronie lub w emailu wyświetla się niezależnie i poprawnie,
- jest obsługiwany identycznie przez każdą przeglądarkę, każdego popularnego klienta poczty i każdy proces PDF lub druku,
- oraz jest eksportowany w rozdzielczości, która pozostaje ostra zarówno na ekranie, jak i w druku.
Dlatego GARAN-Label.com domyślnie generuje każdy label jako PNG.
Dodajesz label do swojego sklepu? Zobacz przewodnik dla Shopify →
Najczęściej zadawane pytania
Czy mogę otrzymać swój GARAN-Label jako SVG zamiast PNG?
Celowo generujemy każdy GARAN-Label jako obraz PNG. W testach wersja SVG powodowała więcej problemów niż rozwiązywała (rozmiar pliku, zależności czcionek, uszkodzone kody QR, kompatybilność z pocztą email) bez żadnej realnej korzyści dla labela wyświetlanego w stałym rozmiarze.
Czy PNG nie traci na jakości w porównaniu z formatem wektorowym?
W praktyce nie. GARAN-Label jest umieszczany w stałym, dość małym rozmiarze na stronie produktu, opakowaniu lub fakturze; nigdy nie musi być skalowany do rozmiaru plakatu. Nasze pliki PNG są eksportowane w rozdzielczości, która pozostaje ostra zarówno na ekranie, jak i w druku.
Dlaczego kod QR się psuje przy wielu labelach SVG na jednej stronie?
Kod SVG kodu QR opiera się na wewnętrznych identyfikatorach elementów (ID). Przeglądarki rozpoznają tylko pierwszy element z danym ID na stronie, więc gdy drugi, trzeci lub kolejny label SVG z tymi samymi wewnętrznymi ID zostanie osadzony w treści, jego kod QR (i inne części odwołujące się do ID) po cichu przestaje się wyświetlać. PNG nie ma wewnętrznych ID, więc ten problem nie występuje.
Czy dotyczy to również faktur PDF lub emaili z potwierdzeniem zamówienia?
Tak, w ten sam sposób. Wiele osadzonych plików SVG w jednym dokumencie ma te same konflikty ID, a wiele klientów poczty w ogóle nie renderuje obrazów SVG. PNG wyświetla się identycznie wszędzie: w przeglądarkach, fakturach PDF i każdym popularnym kliencie poczty.