color - svg html5 examples

¿Cómo renderizar svg elements con bordes nítidos mientras se mantiene el anti-aliasing?

Question

¿Hay alguna manera de procesar elementos svg con bordes nítidos mientras se mantiene el anti-aliasing?

Estoy creando una herramienta basada en navegador que funciona en navegadores modernos.

Jugar con el atributo de shape-rendering no me da los resultados que estoy buscando.

Quiero que mis elementos tengan un agradable alisado para que las rutas se vean sin problemas, como se muestra a continuación, con shape-rendering: auto :

Pero también quiero elementos que no requieran anti-aliasing, como el cuadro de inicio para que luzca nítido y nítido , como cuando se procesa con renderizado de shape-rendering: crispEdges :

es posible? ¿Estoy buscando tener mi pastel y comerlo también?

Answer 1

Si desea que sus cajas se vean nítidas sin ninguna borrosidad debido al antialiasing, y sin utilizar el modo crispEdges, asegúrese de que los bordes de las líneas estén en los límites de los píxeles. Entonces, por ejemplo, si sus líneas tienen un número impar de píxeles de ancho, déles coordenadas de 0.5 de un píxel.

<rect x="10.5" y="10.5" width="150" height="20" 
    stroke-width="1px" fill="none" stroke="black"/>

Y en el límite si el ancho del trazo es par.

<rect x="10" y="10" width="150" height="20" 
    stroke-width="2px" fill="none" stroke="black"/>

Por supuesto, esto solo funciona si tu SVG se procesa en 1: 1. Es decir, no está siendo redimensionado por el navegador. Y solo para líneas que son horizontales y verticales.

Answer 2

Tal vez establezca la propiedad de representación de forma para el elemento raíz svg.
Debe establecer la propiedad de representación de forma para cada elemento de forma, así.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges" 
        fill="none" stroke="black"/>
    <path d="M80,30l100,100" shape-rendering="optimizeQuality" 
        stroke="black" stroke-width="5"/>
</svg>

Answer 3

[Estoy publicando esto como una respuesta en lugar de un comentario, porque quiero publicar una imagen. De lo contrario, este es un comentario sobre la publicación útil de @ defghi1977 . +1 a él, por cierto.]

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges" 
          fill="none" stroke="black" />
    <rect x="10" y="50" width="150" height="20" shape-rendering="auto" 
          fill="none" stroke="black" />
    <path d="M40,30l100,100" shape-rendering="crispEdges" 
          stroke="black" stroke-width="5" />
    <path d="M80,30l100,100" shape-rendering="auto" 
          stroke="black" stroke-width="5" />
</svg>

Producido

Esto fue representado por Firefox 38.0.5.
En Internet Explorer 11, la shape-rendering produce el mismo resultado con anti-aliasing y no nítido.