El atributo shape-rendering

facebook-svg gplus-svg twitter-svg

Cuando creamos un nuevo elemento SVG tenemos la opción de decidir acerca de la cualidad de la imagen, y lo podemos hacer utilizando el atributo shape-rendering.

El atributo shape-rendering puede tomar uno de estos valores:

auto: Este es el valor por defecto. En este caso el navegador decide las características, encontrando un equilibrio entre velocidad de renderizado (o sea: la velocidad con la cual dibuja los gráficos digitales), bordes nítidos y precisión geométrica.

optimizeSpeed: Indica al navegador que es más importante la velocidad de renderizado que la precisión geométrica o los bordes nítidos de las imágenes. Escoger esta opción puede desactivar el anti-aliasing.

El siguiente ejemplo utiliza una imagen SVG de Wikimedia Commons, the free media repository

See the Pen SVG shape-rendering by Gabi (@enxaneta) on CodePen.

crispEdges: Indica al navegador que es más importante el contraste y los bordes nítidos que la velocidad de renderización o la precisión geométrica. Para conseguir imágenes con bordes limpios, los navegadores tienen que desactivar el anti-aliasing para todas las líneas y las curvas, pero es muy visible en líneas verticales y horizontales. También es posible que el navegador cambie ligeramente la posición de los trazados y la anchura de estos para alinearlas con los píxeles de la pantalla.

En el siguiente ejemplo hay dos trazados iguales uno encima de otro: primero un trazado rojo y después un trazado un trazado gris claro.  El trazado gris claro tendría que cubrir totalmente el trazado rojo, pero en el primer caso podemos ver al trazado rojo como un borde muy fino alrededor del trazado gris. Para que esto no pase podemos utilizar shape-rendering: crispEdges;

See the Pen SVG shape-rendering:crispEdges; by Gabi (@enxaneta) on CodePen.

geometricPrecision: Indica al navegador que es más importante la precisión geométrica que los bordes nítidos o la velocidad de renderización.

El atributo shape-rendering puede ser utilizado como atributo de presentación

<svg viewBox="450 800 2500 1500" shape-rendering="optimizeSpeed">

o puede ser utilizado en CSS:


svg {
      shape-rendering: crispEdges;
    }