SVG shape-rendering crispEdges: ¿cuándo ayuda?

Utiliza shape-rendering="crispEdges" cuando un SVG tenga bordes deliberadamente duros y principalmente rectos y una prueba al tamaño final de visualización mejore con ese ajuste. Mantén el valor predeterminado auto cuando la diferencia sea insignificante. En diseños curvos, la indicación puede hacer que un borde parezca más irregular. Cambia cómo un renderizador dibuja las formas existentes, no las formas en sí. La especificación SVG 2 lo define como una indicación y permite al renderizador reducir el suavizado de bordes o alinear algunos bordes con los píxeles del dispositivo.

Esa distinción importa si un icono diminuto parece borroso o un logotipo tiene bordes dentados después de exportarlo. crispEdges no puede convertir un PNG incrustado en trazados, reparar un contorno roto ni garantizar los mismos píxeles en todos los navegadores. Antes de cambiar todo el archivo, compara una forma representativa con auto, crispEdges y geometricPrecision en los tamaños en que realmente se verá.

Qué pide crispEdges al renderizador

SVG tiene cuatro valores de shape-rendering. Son prioridades, no cuatro formatos de exportación. El valor predeterminado auto deja que el renderizador equilibre la velocidad, el contraste de los bordes y la precisión geométrica. crispEdges favorece un contraste fuerte en los bordes y puede suprimir el suavizado; geometricPrecision favorece la fidelidad geométrica. La referencia de atributos SVG de MDN explica que un renderizador podría tratar de forma diferente todos los bordes o solo los casi horizontales y casi verticales. No se exige ningún filtro de enfoque.

Las formas hijas pueden heredar un atributo del SVG padre, por lo que aplicarlo en la raíz puede afectar a un círculo que debería mantenerse suave. Puedes dirigirte a un único rectángulo o trazado. Si se aplican tanto el atributo de presentación SVG como una declaración CSS de shape-rendering, la propiedad CSS tiene prioridad.

Comparamos las mismas formas a dos tamaños

Creamos una marca de cuadrícula rectangular y un contorno curvo como formas SVG originales. El marcado, los rellenos y el viewBox eran idénticos en las tres columnas; solo cambiaba el valor de shape-rendering. Cada forma se renderizó a 63 y 111 píxeles CSS en Chromium con el zoom del navegador al 100%. La figura es una captura del navegador de esa prueba local, no una ilustración de un resultado imaginado.

La misma geometría SVG, tres indicaciones y dos tamaños

Ningún modo cambia los trazados. En esta captura, las diferencias son demasiado pequeñas para declarar un ajuste ganador en general. El nombre parece el de una herramienta de reparación, pero el efecto puede ser leve para una forma, un tamaño y un renderizador concretos. Inspecciona el destino real antes de conservar el atributo adicional.

Esto fue un renderizado de Chromium, no un estudio de compatibilidad entre navegadores. Un visor PDF, un editor de diseño o un navegador con otra escala de dispositivo puede rasterizar los mismos trazados de forma diferente. La definición de SVG 2 deja deliberadamente abiertas las decisiones de implementación.

Pruébalo en una forma antes de aplicarlo a todo

Guarda una copia del SVG y después coloca la indicación en una forma representativa. Por ejemplo, aplícala a la parte rectangular de un icono mientras mantienes el detalle curvo en auto:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <rect x="4" y="4" width="16" height="8" fill="#154b67"
        shape-rendering="crispEdges" />
  <path d="M5 18 Q12 11 19 18" fill="none" stroke="#23a6a1"
        stroke-width="2" shape-rendering="auto" />
</svg>

Abre el archivo en el visor previsto a un tamaño pequeño de icono y a otro mayor. Compáralo con el original guardado, incluidas las diagonales y las curvas. Si estás dando estilo a un SVG en línea mediante CSS, comprueba si una regla sustituye tu atributo. Quita la indicación cuando no produzca una mejora significativa; una propiedad innecesaria dificulta diagnosticar diferencias de visualización posteriores.

Ajusta la solución al síntoma real

Para un sprite PNG cuya cuadrícula exacta de píxeles sea el diseño, conservar la imagen rasterizada puede ser la opción más limpia. CSS image-rendering: pixelated controla cómo se muestrea una imagen escalada; es una propiedad diferente de shape-rendering de SVG. La guía de conversión de pixel art explica cuándo conservar la cuadrícula, crear mosaicos vectoriales o suavizar deliberadamente el contorno.

Cuándo encaja PerfectVector

Si tu único original es un PNG pequeño y aplanado y necesitas trazados editables, una indicación de renderizado no puede proporcionarlos. PerfectVector resulta útil en ese paso anterior: convierte el PNG en una alternativa SVG y después inspecciona las formas al tamaño necesario. Comprueba el contorno, los huecos interiores y los detalles pequeños antes de probar una indicación de visualización en determinados trazados. Un calco puede reinterpretar píxeles como geometría; no puede decidir si un escalón de pixel art debe convertirse en una curva suave.

Conserva el PNG cuando la cuadrícula original sea el diseño final. Si ya tienes un SVG limpio y solo su visualización en el navegador parece extraña, corrige directamente la visualización o la geometría. Cuando un PNG aplanado necesite realmente contornos editables, crea una alternativa SVG con PerfectVector, inspecciona sus trazados y compara el renderizado del navegador al tamaño final antes de añadir crispEdges.

Preguntas frecuentes

¿Elimina crispEdges el suavizado de todas las formas SVG? No. Pide al renderizador que favorezca el contraste de los bordes. La especificación permite distintas implementaciones, incluidas las que solo cambian algunos bordes casi verticales o casi horizontales. Prueba el resultado en el visor que utilizarás.

¿Debo poner shape-rendering="crispEdges" en todo el SVG? Solo si beneficia a todas las formas hijas. Una indicación en la raíz también puede afectar a los elementos curvos. Aplicar el atributo a una forma rectangular es más fácil de evaluar y tiene menos probabilidades de hacer irregular una curva.

¿Arreglará crispEdges las juntas blancas o un PNG borroso dentro de un SVG? No puede cerrar un hueco real ni sustituir los píxeles rasterizados por trazados vectoriales. Diagnostica primero la geometría de la junta. Para un PNG escalado, utiliza un método adecuado de escalado rasterizado o crea trazados vectoriales editables si esa es la necesidad real.

Fuentes

1. W3C — Propiedad shape-rendering de SVG 2 — define los cuatro valores como indicaciones para el renderizador y explica los compromisos permitidos.
2. MDN — Atributo shape-rendering de SVG — documenta las formas SVG aplicables, la herencia y la prioridad de CSS.
3. MDN — Propiedad shape-rendering de CSS — describe el comportamiento de la propiedad y por qué puede variar el renderizado de curvas.
4. MDN — Propiedad image-rendering de CSS — distingue el escalado de píxeles rasterizados del renderizado de bordes de formas vectoriales.