Comprueba el viewBox y el tamaño de tu SVG

Qué lee el comprobador

La información de tamaño de un SVG está en el elemento raíz <svg>, repartida en hasta tres atributos. El comprobador muestra cada uno y lo que se deduce de ellos:

• viewBox: cuatro números (min-x, min-y, ancho y alto) que definen qué zona del sistema de coordenadas propio del dibujo se muestra (MDN: viewBox). Su ancho y su alto deben ser positivos.
• width y height: el tamaño con el que el archivo pide mostrarse, con o sin unidad.
• Unidades: px, in, cm, mm, pt o pc, o ninguna (un número solo se interpreta como píxeles). Los porcentajes no dicen nada del tamaño físico.
• Proporciones: la relación entre ancho y alto del viewBox y la de los atributos width/height, una junto a otra.
• Tamaño físico: se muestra en pulgadas y milímetros cuando el ancho y el alto usan unidades absolutas (in, cm, mm, pt o pc).

<svg xmlns="http://www.w3.org/2000/svg"
     width="4in" height="3in"
     viewBox="0 0 400 300">

Cómo leer el estado

Falta. Sin viewBox, el dibujo no tiene una relación definida con su ancho y su alto, así que al cambiar el tamaño la ilustración puede recortarse o desplazarse en lugar de escalarse. Cricut no documenta requisitos sobre el viewBox; FixMySVG avisa de su ausencia porque hace que el tamaño y el escalado sean menos predecibles.

No válido. Un viewBox como 0 0 -400 300 tiene un ancho negativo. La especificación SVG 2 considera que un ancho o un alto negativo es un error que invalida el viewBox, y que un valor de cero desactiva por completo el renderizado (W3C SVG 2: el atributo viewBox). En ambos casos, el archivo deja de indicar con claridad cómo se relaciona el dibujo con su tamaño. La reparación habitual es 0 0 seguido del ancho y el alto de la zona de dibujo en las unidades propias del archivo, y Safe Fix hace justo esa sustitución cuando el archivo tiene un ancho y un alto utilizables.

Discrepancia. Cuando las proporciones no coinciden, el estándar SVG encaja el viewBox dentro del ancho y el alto sin deformarlo, centrado por defecto, lo que deja espacio vacío en dos lados; con preserveAspectRatio="none" se estira (MDN: preserveAspectRatio). Cricut no documenta cómo trata Design Space ninguno de los dos casos, así que lo más seguro es que las proporciones coincidan.

Unidades, píxeles y pulgadas

Las unidades absolutas tienen definiciones fijas en el estándar CSS que usa SVG: 1 in = 2,54 cm = 96 px, 1 pt = 1/72 in y 1 pc = 1/6 in (W3C CSS Values: longitudes absolutas). Por eso, un archivo con tamaño en pulgadas o milímetros indica directamente su tamaño físico, y el comprobador lo convierte a ambas unidades.

Con los tamaños en píxeles empieza la confusión. Según el estándar, el ejemplo de 1200 × 900 px mide 12,5 × 9,4 pulgadas. Sin embargo, muchos usuarios de Cricut indican que Design Space lee los píxeles a 72 por pulgada, lo que haría que el mismo archivo midiera unas 16,7 × 12,5 pulgadas. Cricut no documenta su conversión, así que, si el archivo está en píxeles, revisa el tamaño en Design Space después de subirlo.

Cómo reparar problemas de viewBox y tamaño

Para entender el problema y repararlo paso a paso, lee qué le pasa a un SVG sin viewBox y por qué un SVG se importa con un tamaño incorrecto en Cricut. Si el viewBox está bien pero la subida sigue fallando, la guía principal de solución de problemas cubre las demás causas.