¿SVG se ve mal en pequeña resolución?

Creé una imagen SVG tratando de resolver el problema de calidad al cambiar el tamaño del elemento o escalarlo a través de CSS.

Para mi sorpresa, mi imagen SVG se ve incluso peor que el tamaño reducido de la imagen GIF o JPG.

Aquí hay una imagen que muestra lo que quiero decir:

ingrese la descripción de la imagen aquí

Pensé que SVG mostraría una mejor calidad porque cambia de tamaño sin perder calidad. ¿Por qué está pasando esto entonces?

Respuestas (2)

Este es un error común. Escalable no significa infinitamente escalable. No todos los renderizadores y archivos svg se crean de la misma manera

Lo que los gráficos vectoriales aportan es la rasterización bajo demanda. Esto significa que la aplicación que los muestra puede rehacer el arte. Esto es maravilloso en tamaños grandes pero requiere una atención especial cuando las imágenes son pequeñas. Esta es la razón por la cual las fuentes son "insinuadas", en esencia, la fuente tiene versiones de mapa de bits para tamaños pequeños. La verdad es que, a escalas pequeñas, su imagen debe diseñarse para alcanzar los píxeles.

En segundo lugar, no existe ninguna garantía particular de que el renderizador, que toma los datos vectoriales y crea mapas de bits, haga un buen trabajo. Cada aplicación tiene un resultado diferente, pero aquí es bastante claro que el motor aa está suavizando el negro, lo cual es incorrecto. Esto es bastante típico con los motores que no supermuestrean el gráfico.

Pero entonces, ¿por qué existe esta tendencia de usar SVG para íconos pequeños?
Porque puede cambiar fácilmente los componentes de los diseños de logotipos para diferentes tamaños. Por ejemplo, para el tamaño más pequeño, ¿realmente necesita todas las líneas o el camión y la subestructura del área de carga? ¿No estaría bien un modelo de camión simplificado y carga del mismo color, pero con menos subdivisiones? No se trata de "un diseño para todos los tamaños", sino de "un diseño que se adapta fácilmente a todos los tamaños". Consulte tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css para ver un ejemplo de cómo se puede usar CSS para hacer un logotipo simple si hay menos espacio disponible. (Tal vez esto debería ser una respuesta...)
Me encanta el concepto de "rasterización bajo demanda". (+1)

Idea totalmente equivocada, no estoy de acuerdo contigo. Imagen SVG mejor que lote PNG. Nunca pierde calidad mientras reduce el tamaño. Y una forma más fácil de cambiar el control de diseño, comprimir bien y admitir bien todos los dispositivos.

"una forma más fácil de cambiar el control de diseño" es el punto crucial, el resto de su respuesta no es tan útil. Por ejemplo, un ícono PNG cuidadosamente diseñado se verá mucho mejor en un ícono pequeño que en un ícono SVG arbitrario que simplemente se ha reducido. La ventaja de SVG es que también puede diseñarse cuidadosamente, tiene el encanto adicional de que, por ejemplo, puede controlarse a través de SVG y puede ser la fuente de esos íconos PNG cuidadosamente diseñados, que aún podría necesitar solo porque SVG no es compatible con el dispositivo que está utilizando.
El Sr. Michael está usando una imagen SVG para mi cliente. Puedo hacer todo tipo de trabajo (cambio de tamaño, control de diseño y todos los dispositivos). Si tiene más dudas, puede consultar el enlace que figura a continuación css-tricks.com/using-svg
Lo he mirado. Todavía mantengo que obtuvo la parte más importante de SVG en su respuesta, pero el resto es menos útil (tenga en cuenta que no escribí "malo" o "incorrecto"). La pregunta aquí es efectivamente "¿Por qué el archivo SVG reducido se ve (subjetivamente) peor que un archivo PNG reducido; alguien me dijo que los archivos SVG se escalan perfectamente?".
¿Lo intentó antes de que la imagen SVG no esté a escala perfecta?
Ya le dije que "estoy usando una imagen SVG para mi cliente. Puedo hacer todo tipo de trabajo (cambiar el tamaño, controlar el diseño y todos los dispositivos)".
Sí, me dijiste eso. Pero echa un vistazo a la imagen de ejemplo de la pregunta inicial. Compare la subestructura del área de carga del camión, por ejemplo: la versión PNG a escala reducida se parece mucho más al archivo PNG a mayor escala que la versión SVG a escala reducida. Para empezar, las imágenes SVG y PNG no son idénticas, pero uno realmente no esperaría ese resultado para SVG.
@Senthilkumar: No creo que declaraciones generales como "imagen SVG mejor que PNG" puedan ser ciertas. Estoy de acuerdo en que SVG es "más flexible" que PNG porque se pueden cambiar de tamaño y manipular fácilmente desde el código. Pero el formato SVG no se puede usar en algunas aplicaciones, como mencionó Michael. Por ejemplo, los correos electrónicos HTML de Gmail no son compatibles con SVG. Período. No los rinden. Cada formato tiene su propio uso. No seamos "formatistas" (mi intento fallido de ser gracioso y mezclar "racistas" con "formato").
¿SVG se ve mal en pequeña resolución?
RespuestasAquíPolítica de privacidad1y, 8v