SVG sin viewBox: qué hace y cuándo es seguro añadirlo

Qué es el viewBox

MDN describe el atributo viewBox como el que define «la posición y la dimensión, en el espacio de usuario, de una ventana gráfica SVG» (viewport) (MDN: viewBox, en inglés). Dicho de forma sencilla, le indica al programa qué rectángulo de las coordenadas del dibujo debe mostrar. Siempre son cuatro números, separados por espacios o comas:

• min-x y min-y: las coordenadas de la esquina superior izquierda del rectángulo, normalmente 0 0.
• width y height: el ancho y el alto del rectángulo, en las unidades propias del dibujo.

Las formas de un SVG se escriben en esas unidades, llamadas unidades de usuario. Un círculo con cx="200" está a 200 unidades del borde izquierdo, se acabe mostrando al tamaño que sea. El viewBox indica cuántas de esas unidades abarca la zona visible, y el programa ajusta ese rectángulo al espacio del que dispone (W3C SVG 2: el atributo viewBox).

Cómo se relacionan el ancho, el alto y el viewBox

Los atributos width y height del elemento <svg> indican a qué tamaño debe mostrarse o imprimirse la imagen. El viewBox indica qué sistema de coordenadas se dibuja dentro de ese espacio. Juntos fijan la escala:

<svg width="4in" height="3in" viewBox="0 0 400 300">

Cambia el tamaño a 8in × 6in y el mismo dibujo se duplica, sin tocar las formas. Eso es lo que hace que un archivo con viewBox escale de forma predecible. Mantén las dos proporciones iguales —400:300 y 4:3 en este caso— o el dibujo ganará márgenes vacíos; en por qué un SVG entra en Cricut con un tamaño incorrecto se explican con detalle las unidades, los píxeles por pulgada y la relación de aspecto.

Qué pasa cuando falta el viewBox

Sin viewBox, la especificación SVG establece que una unidad de usuario equivale a un píxel CSS (W3C SVG 2). El dibujo queda atado a su ancho y su alto en píxeles: a ese tamaño exacto se ve bien, pero no lleva ninguna instrucción para escalarlo. En un navegador, si le das a ese archivo otro ancho y otro alto, cambia la zona visible y no el dibujo, así que el diseño queda recortado o flotando en un espacio vacío.

Los programas de diseño y de corte rellenan ese hueco cada uno a su manera, así que un archivo sin viewBox puede importarse con un tamaño que no esperabas, un problema que los usuarios de Cricut mencionan a menudo con archivos medidos en píxeles. Las páginas de ayuda de Cricut no incluyen ningún requisito sobre el viewBox, así que tómalo como una buena práctica general de SVG, y como algo sobre lo que avisa FixMySVG, no como una regla documentada de Cricut.

Valores de viewBox no válidos

Un viewBox que existe pero está mal puede ser peor que no tenerlo. Necesita exactamente cuatro números, y el ancho y el alto deben ser positivos. MDN señala que un ancho o un alto menor o igual que 0 desactiva el dibujado del elemento; la especificación del W3C considera un error el ancho o el alto negativo, lo que invalida el atributo, y establece que el cero desactiva el dibujado. Cada programa lo gestiona de forma distinta, así que el resultado puede ir desde una imagen en blanco hasta un dibujo a una escala equivocada. Errores típicos:

• un ancho o un alto negativo, como 0 0 -400 300;
• un ancho o un alto de cero, como 0 0 0 300;
• un número de valores incorrecto, como 0 0 400;
• unidades o porcentajes dentro de la lista, como 0 0 400px 300px: el viewBox solo admite números sin unidades.

Si un viewBox dañado te deja una carga vacía, en por qué un SVG aparece en blanco en Cricut tienes las demás causas que conviene descartar.

Cuándo es seguro añadir un viewBox

Cuando el ancho y el alto son números sin unidad o están en píxeles y el diseño se dibujó en ese sistema de coordenadas —lo normal en un archivo sin viewBox—, añadir viewBox="0 0 W H" con los mismos números reproduce exactamente lo que ves ahora. No se mueve nada; el archivo solo gana una regla de escalado.

<!-- antes -->
<svg xmlns="http://www.w3.org/2000/svg" width="1200px" height="900px">

<!-- después -->
<svg xmlns="http://www.w3.org/2000/svg" width="1200px" height="900px"
     viewBox="0 0 1200 900">

Es lo que hace Safe Fix cuando se conocen el ancho y el alto: añade el viewBox correspondiente, dibuja el archivo antes y después y compara los píxeles. Si algo fuera a verse distinto, el cambio se deshace. Funciona en el comprobador en línea que repara SVG para Cricut, incluido en el plan gratuito con un cupo diario.

Cuándo no es seguro, o no basta

• Tamaños en porcentaje, como width="100%". No hay un tamaño fijo que copiar, así que cualquier viewBox sería una suposición basada en dónde están las formas.
• Sin ancho ni alto. El mismo problema: no hay de dónde construir el viewBox. FixMySVG lo indica y deja la decisión en tus manos.
• Diseño muy fuera del lienzo. Un viewBox acorde al tamaño mantiene el mismo recorte, así que las formas que quedan fuera del área de ancho × alto siguen fuera. Si forman parte del diseño, ajusta el lienzo al diseño —en Inkscape, Edición › Ajustar página a la selección (Edit › Resize Page to Selection)— y vuelve a exportar.
• Un viewBox que no coincide con el contenido. Si el archivo tiene un viewBox válido pero la mayor parte del dibujo queda fuera, no hay una solución automática: ajusta la mesa de trabajo a la ilustración en tu programa de diseño y exporta un archivo nuevo.

Unas palabras sobre preserveAspectRatio

Cuando el viewBox y el ancho y el alto tienen proporciones distintas, el atributo preserveAspectRatio decide qué ocurre. El valor predeterminado, xMidYMid meet, escala el dibujo de forma uniforme hasta que cabe todo el viewBox y lo centra, dejando franjas vacías en dos lados; none estira el dibujo para llenar el espacio y lo deforma (MDN: preserveAspectRatio, en inglés). En los archivos de corte, lo más sencillo es mantener las proporciones iguales para que el atributo no llegue a intervenir.

Cómo comprobar y arreglar tu viewBox

El comprobador muestra el viewBox, el ancho y el alto, las unidades, las dos relaciones de aspecto y el tamaño físico, y clasifica el viewBox como válido, ausente o no válido. Además avisa cuando las proporciones no coinciden y cuando el dibujo queda fuera del viewBox. También está disponible como comprobador de viewBox independiente. Según el resultado:

1. Ausente, con ancho y alto: deja que Safe Fix lo añada, o añade tú viewBox="0 0 W H" con los valores en píxeles.
2. Ausente, sin un tamaño utilizable: define el tamaño del documento en tu programa de diseño y vuelve a exportar.
3. No válido: deja que Safe Fix lo sustituya si se conocen el ancho y el alto, corrige tú los cuatro números (normalmente 0 0 seguido del ancho y el alto en píxeles) o vuelve a exportar desde tu programa de diseño.
4. Proporciones distintas: decide si lo correcto es el viewBox o el ancho y el alto, y ajusta el otro para que coincida.
5. Dibujo fuera del viewBox: el lienzo no coincide con el diseño. Ajusta la mesa de trabajo a la ilustración y vuelve a exportar.

En Inkscape, Propiedades del documento muestra en un mismo sitio el tamaño de página, las unidades, la escala y el viewBox. La lista para preparar un SVG para Cricut cubre los demás ajustes de exportación, y si el viewBox está bien pero la carga sigue fallando, la guía completa sobre SVG que no se suben a Cricut repasa el resto de causas.

Qué puede y qué no puede hacer FixMySVG