Cuadros delimitadores SVG: mide las coordenadas correctas

Usa getBBox() cuando necesites los límites de un elemento SVG en sus propias coordenadas de usuario. Usa getBoundingClientRect() cuando necesites un rectángulo en píxeles CSS relativo al área visible del navegador. Antes de copiar cualquiera de los resultados a una superposición o un viewBox, comprueba qué sistema de coordenadas usa el destino.

Un emblema girado puede tener un cuadro local pequeño y un cuadro alineado con la pantalla mucho mayor. Ambas mediciones pueden ser válidas. Ninguna debe tratarse como un rectángulo universal alrededor de cada píxel pintado, especialmente cuando intervienen trazos, marcadores, recortes o filtros.

Elige la medición según el destino

La documentación de getBBox() de MDN describe los límites de geometría locales y los controles opcionales de trazo, marcadores y recorte. La transformación del propio elemento medido y las de sus antecesores no se incluyen en ese resultado local. Los descendientes de un grupo siguen contribuyendo a su geometría, incluida su posición dentro de él.

La referencia de getBoundingClientRect() de MDN describe coordenadas relativas al área visible. Desplazarse por la página cambia esa relación de coordenadas. Estos valores en píxeles CSS no son automáticamente unidades de usuario SVG ni dimensiones físicas de impresión.

Mide un emblema original transformado

Este ejemplo contiene un anillo verde azulado con una abertura rectangular y un triángulo dorado independiente. Ambos tienen un trazo grueso con uniones redondeadas. El grupo está trasladado, girado y escalado.

<svg id="scene" width="600" height="300" viewBox="0 0 300 150"
     xmlns="http://www.w3.org/2000/svg" style="overflow:visible">
  <g id="art" transform="translate(100 35) rotate(25) scale(1.2)"
     stroke="#17364c" stroke-width="10" stroke-linejoin="round">
    <path fill="#147d78" fill-rule="evenodd"
          d="M0 0H80V60H0Z M20 20H60V40H20Z" />
    <path fill="#e5a340" d="M100 50L120 10L140 50Z" />
  </g>
</svg>
<script>
  const art = document.querySelector("#art");
  const local = art.getBBox();
  const screen = art.getBoundingClientRect();
</script>

Las coordenadas locales van de 0 a 140 horizontalmente y de 0 a 60 verticalmente. El hueco afecta al interior de la forma, pero no reduce esos límites exteriores.

Abrimos esta geometría en Chrome y la medimos con un pequeño entorno de pruebas. Con un tamaño de visualización de 600 × 300 píxeles CSS, getBBox() devolvió x=0, y=0, width=140, height=60. El rectángulo del cliente medía aproximadamente 365.376 × 272.508 píxeles CSS. Su posición en pantalla dependía de dónde estuviera el SVG en la página.

Después de cambiar el tamaño de visualización a 300 × 150, el cuadro local siguió midiendo 140 × 60. El rectángulo del cliente pasó a medir aproximadamente 182.688 × 136.254, la mitad de las dimensiones anteriores. La geometría original no había cambiado; sí lo había hecho su correspondencia con la página.

Estos números describen este ejemplo en el navegador probado. No son una comparación de motores de navegador ni una especificación para el cuadro de selección de todos los editores.

Dibuja cada contorno en su propio sistema de coordenadas

Para un contorno local, usa las coordenadas devueltas y la misma transformación que el grupo medido. Colócalo como hermano para que no forme parte de la siguiente medición:

const scene = document.querySelector("#scene");
const box = art.getBBox();
const outline = document.createElementNS("http://www.w3.org/2000/svg", "rect");
for (const key of ["x", "y", "width", "height"]) {
  outline.setAttribute(key, box[key]);
}
outline.setAttribute("transform", art.getAttribute("transform"));
outline.setAttribute("fill", "none");
outline.setAttribute("stroke", "olive");
scene.append(outline);

Esa copia directa de la transformación es adecuada para este ejemplo porque la ilustración y el contorno comparten el mismo padre. Un rectángulo insertado en otro lugar necesita una matriz que relacione los dos sistemas de coordenadas.

Para un contorno HTML, coloca un div directamente bajo body con posicionamiento fijo y sin un antecesor contenedor transformado:

const box = art.getBoundingClientRect();
Object.assign(overlay.style, {
  position: "fixed",
  boxSizing: "border-box",
  pointerEvents: "none",
  border: "2px dashed coral",
  left: `${box.x}px`,
  top: `${box.y}px`,
  width: `${box.width}px`,
  height: `${box.height}px`,
});

Aquí overlay es tu elemento de contorno existente. Vuelve a medir al desplazarte por la página, cambiar su tamaño o modificar la distribución o transformación de la ilustración. Si usas posicionamiento de documento, ten en cuenta el desplazamiento de la página; si usas un contenedor posicionado, ten en cuenta su sistema de coordenadas. Mezclar estas reglas de colocación es una causa habitual de que un rectángulo correcto aparezca desplazado.

Nuestro entorno de pruebas mostró ambos contornos. El rectángulo local se inclinó con el anillo y el triángulo, mientras que el rectángulo HTML discontinuo mantuvo sus lados horizontales y verticales. El trazo grueso sobresalía de algunas partes de los contornos de geometría.

Prueba las opciones de trazo en lugar de suponer que son compatibles

El cuadro local predeterminado excluye la anchura del trazo. MDN documenta getBBox({ stroke: true }), pero el parámetro de opciones tiene consideraciones de compatibilidad distintas del método sin argumentos, disponible desde hace mucho tiempo.

En nuestro ejemplo de Chrome, pasar { stroke: true } devolvió el mismo cuadro de 140 × 60 que la llamada sin argumentos. Eliminar el trazo de 10 unidades tampoco cambió el rectángulo del cliente. El borde oscuro visible cambió claramente, por lo que ninguno de los resultados de esa prueba representó toda la superficie pintada.

Una llamada que acepta un objeto de opciones sin lanzar un error no basta para demostrar que ha aplicado la opción. Prueba una forma conocida con trazo y comprueba las dimensiones devueltas en el navegador de destino. Usa las definiciones de cuadros delimitadores SVG para distinguir los límites del objeto, del trazo y de la geometría decorada.

No generalices una regla de margen de medio trazo a todas las formas. Las uniones en inglete, los marcadores, los trazos que no escalan, las sombras y los filtros pueden extenderse de maneras distintas. Para un ejemplo sencillo con uniones redondeadas que controles, puede bastar un margen explícito y una inspección visual. En una herramienta automática de recorte para exportación, estos casos necesitan un tratamiento deliberado.

Convierte un cuadro local antes de ajustar el viewBox raíz

Nunca pegues directamente los valores x, y, width y height del rectángulo del cliente en el viewBox SVG. Esos valores incluyen la posición en la página y usan otro sistema de unidades.

Para el ejemplo, transforma las cuatro esquinas de su cuadro local a las coordenadas de usuario del SVG raíz. La referencia de getScreenCTM() de MDN describe la matriz que relaciona las coordenadas SVG con el área visible del documento. Combinar la matriz de la ilustración con la inversa de la raíz elimina esa correspondencia de pantalla compartida:

const box = art.getBBox();
const rootMatrix = scene.getScreenCTM();
const artMatrix = art.getScreenCTM();
if (!rootMatrix || !artMatrix) throw new Error("SVG is not measurable");
 
const toRoot = rootMatrix.inverse().multiply(artMatrix);
const corners = [
  [box.x, box.y],
  [box.x + box.width, box.y],
  [box.x + box.width, box.y + box.height],
  [box.x, box.y + box.height],
].map(([x, y]) => new DOMPoint(x, y).matrixTransform(toRoot));
 
const xs = corners.map(p => p.x);
const ys = corners.map(p => p.y);
const x = Math.min(...xs);
const y = Math.min(...ys);
const width = Math.max(...xs) - x;
const height = Math.max(...ys) - y;
const padding = 12; // Chosen for this simple fixture, in root user units.
scene.setAttribute("viewBox", [
  x - padding, y - padding,
  width + 2 * padding, height + 2 * padding,
].join(" "));

Esto supone un SVG renderizado con transformaciones bidimensionales invertibles. Transformar las esquinas de un rectángulo local produce una envolvente conservadora alineada con los ejes, no necesariamente el cuadro más ajustado posible alrededor de cada curva transformada.

El entorno de pruebas produjo un viewBox de aproximadamente 57.571 23 206.688 160.254 con ese margen. Inspeccionamos el resultado y el trazo redondeado del ejemplo permaneció dentro del área de visualización. La visualización ancha seguía teniendo espacio lateral porque el viewBox ajustado tenía otra relación de aspecto; ajustar no implica estirar.

Si necesitas un pivote en lugar de un recorte, la guía de transform-origin explica cómo los cuadros de referencia afectan a la rotación. Para dimensiones físicas de importación, usa el flujo de resolución de problemas de tamaño SVG.

Mide la geometría que pretendes editar

Si el original solo existe como PNG o JPG y necesitas formas editables, PerfectVector puede recuperar un SVG antes de medirlo. Inspecciona sus trazados, aberturas, trazos y cualquier contenido rasterizado conservado. Un cuadro delimitador indica hasta dónde se extiende la geometría; no demuestra que la vectorización sea precisa ni que todos los detalles visibles sean editables.

Un SVG existente puede medirse directamente. La guía de edición SVG ayuda a identificar qué tienes realmente, mientras que la introducción a la vectorización de imágenes explica el paso previo de conversión.

Para ilustraciones que solo existen rasterizadas, prueba el original en PerfectVector, inspecciona los contornos recuperados y mide el grupo que vas a colocar o exportar. Conserva un margen y comprueba los bordes visibles finales antes de tratar el resultado como un recorte de entrega.

Preguntas frecuentes

¿Por qué los dos métodos devuelven anchuras diferentes? Usan sistemas de coordenadas diferentes. El cuadro SVG local describe la geometría en unidades de usuario, mientras que el rectángulo del cliente describe sus límites relativos al área visible en píxeles CSS después de aplicar la correspondencia con la página. La escala y la rotación pueden cambiar esas dimensiones.

¿Un cuadro delimitador indica si la ilustración tiene un hueco? No. Un rectángulo registra los límites exteriores, no la topología interior. Un rectángulo sólido y un anillo con los mismos bordes exteriores pueden tener el mismo cuadro delimitador. Inspecciona los trazados y las reglas de relleno para comprobar las aberturas.

¿Puedo usar el rectángulo del cliente como viewBox? No directamente. Convierte primero la geometría relevante a las coordenadas de usuario del SVG raíz. La posición de pantalla y las dimensiones en píxeles CSS no deben copiarse a un rectángulo de coordenadas de origen.

Fuentes

1. MDN getBBox — Define los límites SVG locales y los controles opcionales de medición.
2. MDN getBoundingClientRect — Explica los rectángulos relativos al área visible y el desplazamiento por la página.
3. Definiciones de cuadros delimitadores SVG — Distingue los límites de geometría del objeto, del trazo y de la geometría decorada.
4. MDN getScreenCTM — Documenta la matriz que conecta las coordenadas SVG con las del área visible.