Por qué el GARAN-Label es un PNG, no un SVG
Una versión vectorial del GARAN-Label puede sonar como una mejora: en teoría más ligera, escalable al infinito, "más moderna". En la práctica, una etiqueta de garantía en SVG crea más problemas de los que resuelve. Aquí explicamos por qué generamos deliberadamente cada GARAN-Label como PNG.
Resumen: un GARAN-Label en SVG ocupa más espacio en disco una vez contada la fuente requerida, rompe su propio código QR en cuanto aparece un segundo label en la misma página, y a menudo no llega a mostrarse en absoluto en los emails de confirmación de pedido. Un PNG no tiene ninguno de estos problemas.
Problema 1: el tamaño de archivo se acumula
Un solo GARAN-Label en SVG pesa alrededor de 300 KB. Para representarse correctamente, depende además de la fuente Inter, lo que añade aproximadamente otros 350 KB si esa fuente aún no está cargada en la página. Son unos 650 KB para una sola etiqueta de conformidad, antes de que empiecen siquiera a cargarse las fotos de tus productos, el tema y todo lo demás en la página.
En un listado de productos con docenas de artículos, o en una tienda que aún no ha cargado Inter para su propio diseño, esto añade un peso real al tiempo de carga de la página y a los Core Web Vitals, para un pequeño label pensado para ser una nota al pie, no un titular.
Problema 2: varios labels en una página rompen el código QR
El código QR del GARAN-Label dentro del SVG se construye mediante referencias internas a elementos (IDs). Es una práctica normal en los gráficos SVG, pero solo funciona de forma fiable cuando el SVG aparece una sola vez por página. En cuanto se incorpora en línea un segundo GARAN-Label con el mismo marcado en la misma página, los navegadores solo pueden resolver el primer elemento con un ID determinado, por lo que cada label posterior pierde silenciosamente su código QR (u otras partes referenciadas por ID).
No es un caso excepcional raro: sucede en cualquier página de categoría, tabla comparativa o vista de carrito que muestre más de un producto con un GARAN-Label al mismo tiempo.
Problema 3: también tiene que funcionar en los emails de confirmación de pedido
El GARAN-Label no solo debe aparecer en la ficha del producto, también debe figurar en el email de confirmación de pedido. Es aquí donde el SVG encuentra su mayor limitación:
- Muchos clientes de email no renderizan SVG en absoluto. El motor de renderizado de Outlook no tiene soporte SVG, y Gmail elimina las imágenes SVG por razones de seguridad (un SVG puede contener JavaScript incrustado). Según el cliente, el label simplemente no aparece.
- La misma colisión de ID del Problema 2 se aplica dentro de un email en cuanto un pedido contiene más de un producto con un label.
- Adjuntar un archivo en su lugar no es una solución real. Plataformas como Shopify no ofrecen una forma de generar y adjuntar un PDF o archivo personalizado por pedido al email de confirmación, por lo que no puedes evitar simplemente el problema de visualización con un adjunto.
Nuestra recomendación: PNG
Un GARAN-Label es una etiqueta de conformidad pequeña y de tamaño fijo, no una obra de arte que deba escalarse a cualquier tamaño, por lo que el principal argumento a favor del SVG (la escalabilidad infinita) realmente no se aplica aquí. Un PNG:
- no necesita ninguna fuente web separada, ya que el texto ya está renderizado en la imagen,
- no tiene IDs internos, por lo que cualquier número de labels en una página o en un email se muestra de forma correcta e independiente,
- es compatible de forma idéntica con todos los navegadores, todos los principales clientes de email y todos los flujos de trabajo de PDF o impresión,
- y se exporta a una resolución que se mantiene nítida tanto en pantalla como en impresión.
Por eso GARAN-Label.com genera cada label como PNG de forma predeterminada.
¿Vas a añadir el label a tu tienda? Consulta la guía de Shopify →
Preguntas frecuentes
¿Puedo obtener mi GARAN-Label como SVG en lugar de PNG?
Generamos cada GARAN-Label como imagen PNG por diseño. En las pruebas, la versión SVG causó más problemas de los que resolvía (tamaño de archivo, dependencias de fuentes, códigos QR defectuosos, compatibilidad con el email) sin ningún beneficio real para un label que se muestra a un tamaño fijo.
¿No pierde calidad un PNG en comparación con un formato vectorial?
No en la práctica. Un GARAN-Label se coloca a un tamaño fijo y bastante pequeño en una ficha de producto, un embalaje o una factura; nunca necesita escalarse al tamaño de un póster. Nuestros PNG se exportan a una resolución que se mantiene nítida tanto en pantalla como en impresión.
¿Por qué se rompe el código QR con varios labels SVG en una página?
El marcado SVG del código QR se basa en IDs internos de elementos. Es una práctica normal en los gráficos SVG, pero solo funciona de forma fiable cuando el SVG aparece una sola vez por página. En cuanto se incorpora en línea un segundo GARAN-Label con el mismo marcado en la misma página, los navegadores solo resuelven el primer elemento con un ID determinado, por lo que cada label posterior pierde silenciosamente su código QR (u otras partes referenciadas por ID).
¿Esto también afecta a las facturas en PDF o a los emails de confirmación de pedido?
Sí, de la misma manera. Varios SVG en línea en un mismo documento comparten las mismas colisiones de ID, y varios clientes de email no renderizan en absoluto las imágenes SVG. Un PNG se muestra de forma idéntica en todas partes: navegadores, facturas PDF y todos los principales clientes de email.