css3 - soft - improve text rendering css
Desactive el anti-aliasing en svg cuando aplique CSS3: ¿Zoom en el elemento? (1)
Descubrí que cuando el Zoom CSS3 se aplica en pequeños iconos SVG (9px: 9px con zoom: 1.5), los iconos SVG podrían estar borrosos. ¿Alguna idea de obtener un icono nítido y limpio en este caso? Gracias por adelantado.
El SVG:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
x="0px" y="0px" width="9px" height="9px" viewBox="0 0 9 9" enable-background="new 0 0 9 9">
<g>
<g fill="none" transform="translate(0.5, 0.5)">
<g stroke="#000000" stroke-width="0.5" stroke-linecap="square" >
<line x1="2" y1="4" x2="6" y2="4"/>
<line x1="4" y1="2" x2="4" y2="6"/>
</g>
<g stroke="#909090" stroke-width="1" stroke-linecap="square" >
<rect x="0" y="0" width="8" height="8"/>
</g>
</g>
</g>
</svg>
Tengo una solución yo mismo. El truco es agregar:
shape-rendering="crispEdges"
a los elementos SVG.
Desde Mozilla MDN :
crispEdges Indica que el agente de usuario debe intentar enfatizar el contraste entre los bordes limpios de la obra de arte sobre la velocidad de representación y la precisión geométrica. Para lograr bordes nítidos, el agente de usuario puede desactivar el anti-aliasing para todas las líneas y curvas o posiblemente solo para líneas rectas que estén cerca de verticales u horizontales. Además, el agente de usuario puede ajustar las posiciones de línea y los anchos de línea para alinear los bordes con los píxeles del dispositivo.
Vea la diferencia en jsFilddle .