¿Tu SVG sale con un tamaño incorrecto en Cricut? Por qué pasa y cómo arreglarlo

Qué decide el tamaño de un SVG

Un SVG no guarda en ninguna parte «córtame a 5 pulgadas». Su tamaño físico sale de unos pocos atributos del elemento <svg> y de cómo los interpreta el programa que lo lee:

• width y height (ancho y alto), con o sin unidad (px, mm, cm, in, pt). Un número sin unidad significa píxeles.
• El viewBox, que fija el sistema de coordenadas que se dibuja dentro de ese ancho y ese alto. Si el tuyo no lo tiene, lee primero qué ocurre cuando falta el viewBox.
• Transformaciones que escalan el diseño dentro del archivo.
• La mesa de trabajo: el ancho y el alto describen la página, no las formas que hay en ella.

Empieza por leer lo que dice realmente tu archivo. El comprobador de abajo muestra el ancho, el alto, las unidades, el viewBox, las dos relaciones de aspecto y el tamaño físico que resulta de todo ello. El mismo comprobador de viewBox y tamaño también está disponible en su propia página.

Unidades: px, mm, cm, in y pt

CSS y SVG definen las unidades absolutas unas en relación con otras, con la pulgada como referencia (W3C CSS Values: longitudes absolutas, en inglés):

Así, un archivo que dice width="10in" o width="254mm" indica su tamaño físico sin ambigüedad. Un archivo que dice width="960" o width="960px" solo indica una cantidad de píxeles, y las pulgadas dependen de cuántos píxeles por pulgada suponga el programa que lo lee.

El problema de los píxeles: 96 o 72 por pulgada

El estándar de CSS y SVG es de 96 píxeles por pulgada. Sin embargo, muchos usuarios de Cricut indican que Design Space lee los tamaños en píxeles a 72 píxeles por pulgada. Cricut no documenta cómo convierte las unidades, así que tómalo como un comportamiento del que informan los usuarios, no como una regla; aun así, los cálculos explican muchas cargas del tipo «¿por qué sale tan grande?»:

• Un diseño de 960 px de ancho mide 960 ÷ 96 = 10 pulgadas según el estándar.
• Si se lee a 72 px por pulgada, el mismo archivo mide 960 ÷ 72 ≈ 13,3 pulgadas, un tercio más.
• Para volver al tamaño previsto, multiplica por 72 ÷ 96 = 0,75.

Uses las unidades que uses, comprueba el ancho y el alto en Design Space justo después de subir el archivo y antes de cortar nada.

Relación de aspecto: cuando las proporciones no coinciden

El ancho y el alto tienen una proporción, y el viewBox también. Cuando no coinciden, el valor predeterminado de preserveAspectRatio escala el dibujo de forma uniforme hasta que cabe y lo centra, dejando márgenes vacíos en dos lados. Con preserveAspectRatio="none", en cambio, el dibujo se estira para llenar el espacio (MDN: preserveAspectRatio, en inglés).

<svg width="400" height="300" viewBox="0 0 100 100">

En ambos casos, el tamaño que indica el archivo no es el de tu diseño: con márgenes, el ancho indicado incluye espacio vacío, así que el diseño es más estrecho de lo que sugiere la cifra; estirado, queda deformado. La solución es que las proporciones coincidan —ajusta la mesa de trabajo a la ilustración y vuelve a exportar— en lugar de corregirlo a ojo después.

Transformaciones y mesas de trabajo demasiado grandes

Una transformación de escala que envuelve todo el diseño

Algunas exportaciones envuelven todo en un grupo como <g transform="scale(0.75)">, o anidan varios grupos escalados. El dibujo aparece entonces con un tamaño distinto del que sugieren sus coordenadas, y el resultado depende de que todos los programas apliquen las transformaciones igual. Desagrupar el diseño en tu programa de diseño y volver a exportarlo suele trasladar la escala a las coordenadas. La optimización avanzada de FixMySVG aplica las transformaciones de cada trazado, pero deja en su sitio las de los grupos, como esta.

Una mesa de trabajo más grande que el diseño

El ancho y el alto describen la mesa de trabajo, no las formas que contiene. Un motivo pequeño exportado desde una página tamaño carta arrastra el tamaño de la página, así que cualquier medida que leas en el archivo, o que calcules a partir de sus píxeles, es la de la página y no la del diseño. Ajusta la mesa de trabajo a la ilustración antes de exportar: en Illustrator, Objeto › Mesas de trabajo › Ajustar a los límites de la ilustración (Object › Artboards › Fit to Artwork Bounds); en Inkscape, Edición › Ajustar página a la selección (Edit › Resize Page to Selection).

Los objetos sueltos fuera del lienzo pueden dar una sorpresa parecida, porque pueden importarse como piezas extra que hacen que el diseño sea más grande de lo esperado. FixMySVG los señala, y Safe Fix puede eliminar los objetos que están completamente fuera del lienzo.

Cómo conseguir el tamaño correcto en Cricut

Antes de exportar, en tu programa de diseño

1. Define las unidades del documento en pulgadas o milímetros. En Inkscape, Propiedades del documento reúne las unidades, la escala y el viewBox; usa una escala de 1. Illustrator y Affinity Designer tienen ajustes equivalentes para las unidades del documento.
2. Da a la mesa de trabajo el tamaño al que quieres cortar y ajústala a la ilustración.
3. Exporta con el ancho y el alto en unidades absolutas (in o mm) en lugar de píxeles, para que el archivo indique su tamaño físico sin ambigüedad.
4. Mantén un viewBox con las mismas proporciones que el ancho y el alto.
5. Pasa el archivo exportado por el comprobador para confirmar el tamaño físico antes de subirlo.

La lista para preparar un SVG para Cricut recoge los demás ajustes de exportación que conviene revisar a la vez.

Después de subirlo, en Design Space

• Selecciona la imagen en el lienzo y consulta su ancho y su alto en los campos de tamaño.
• Deja el candado cerrado para que se mantengan las proporciones y escribe el ancho o el alto que quieres; el otro valor se ajusta solo.
• Si el tamaño se desvía más o menos un tercio, lo más probable es que se deba a la diferencia entre 72 y 96 píxeles por pulgada. Escribir el tamaño previsto lo arregla en esta carga; exportar en pulgadas o milímetros lo evita la próxima vez.

Si el diseño entra tan pequeño que parece vacío, o no aparece nada, consulta los SVG que aparecen en blanco en Design Space. Para el resto de cosas que pueden fallar al subir un archivo, la guía principal sobre SVG que no se suben a Cricut repasa las causas una a una.

Qué puede y qué no puede hacer FixMySVG con el tamaño

Safe Fix está incluido en el plan gratuito con un cupo diario, dentro de la herramienta en línea que repara SVG para Cricut.