Sé que si quieres escalar una imagen, entonces un SVG es una buena elección.
Sin embargo, mi situación es que tengo iconos que quiero que los usuarios puedan cargar a través de un CMS. Los SVG son un poco más difíciles de crear, por lo que jpg, gif o png parece el formato ideal para los administradores.
Si se carga igual o más grande que el tamaño de la pantalla, y se mantiene en la proporción correcta, ¿pueden los jpgs, gifs o pngs ser tan de alta calidad como un SVG cuando se reduce su tamaño?
Mi suposición sería que los navegadores también necesitan antialiasar un svg por debajo de cierto tamaño, por lo que es probable que se desenfoquen tanto como cualquier otro formato, aunque los gifs aparentemente se desenfocan más.
website-design
file-format
Richard B
fuente
fuente
Respuestas:
(Nota: lea la respuesta del OP antes de esta, ya que mi respuesta es un comentario sobre la investigación del OP)
Este es un problema conocido de Android Chrome. En algunas de sus compilaciones, deshabilitaron el suavizado, lo que hizo que las formas vectoriales se representaran con bordes nítidos. La razón de esto fue reducir la sobrecarga creada por los cálculos anti aliasing. Debido a las quejas, lanzaron una actualización que debería haber habilitado el anti aliasing.
Hay varios hilos en Stack Overflow que discuten este problema. Aquí está uno de ellos:
/programming/19875908/vectors-poorly-displayed-on-chrome-for-android-canvas
No pude encontrar una referencia al mismo problema en IPod Touch Safari, pero probablemente sea seguro extrapolar y asumir que el problema es el mismo.
Hay formas de intentar forzar el suavizado incluso cuando está desactivado, como este truco que básicamente agrega un poco de relleno alrededor del elemento que hace que el navegador, por algún motivo, aplique el suavizado. También puede intentar establecer el atributo de representación de formas del elemento en algo diferente a los bordes nítidos y ver si el navegador lo cumple.
fuente
Acabo de ejecutar una prueba y la única diferencia parece estar en los navegadores móviles.
Creé una imagen de 990 x 900px del icono de Twitter (ese icono parece un diseño demasiado detallado para una buena escala, tan bueno para esta prueba). Lo guardé como SVG, JPG, GIF, GIF transparente (solo la forma del pájaro, sin color de fondo, en cambio agregué esto con CSS), PNG, PNG transparente.
Luego los reduje a 15 px, 25 px, 50 px, 100 px y 150 px.
Aquí están los resultados en Firefox:
Aquí están los resultados en Chrome:
Si hacemos zoom en una captura de pantalla de los resultados más pequeños para que podamos ver qué píxeles se están generando, entonces Firefox (arriba) oscurece ligeramente los bordes en las versiones no transparentes, pero todos los demás resultados son muy similares.
Sin embargo, en un navegador IPod Touch Safari, la versión SVG parece bastante borrosa, y las otras bastante pixeladas:
Un resultado similar también se ve en Android Chrome. No he tomado una captura de pantalla de esto.
Me pregunto si la razón de esto podría tener algo que ver con la densidad de píxeles, que es la principal diferencia en la visualización, aunque eso tendría más sentido para mí si todas las imágenes se manejan de manera diferente en el móvil, en lugar de solo la SVG.
Si alguien puede explicar por qué este es el caso, entonces transferiré la marca de respuesta aceptada. De lo contrario, supongo que la respuesta TL; DR es que depende si prefiere iconos borrosos o pixelados (o hacer muchos iconos en tamaños de píxeles perfectos para sus puntos de corte receptivos).
editar: desde entonces he observado que los svgs suelen ser mucho más claros en los dispositivos de Apple: el pájaro de Twitter puede haber sido demasiado detallado para que esto aparezca en mis pruebas anteriores, por lo que siento que son el formato correcto para usar para los iconos.
fuente
Hay una distinción muy importante entre las imágenes vectoriales y las imágenes de mapa de bits. Las imágenes vectoriales, si simplificamos un poco, son renderizadas por el cliente mientras usted renderiza las imágenes de mapa de bits.
Esto significa que la aplicación a la que está enviando la imagen tiene más voz sobre cómo se comporta. El resultado final es que tiene los siguientes inconvenientes :
Por otro lado, hay algunos beneficios de esto:
No hay mucho que pueda hacer si un sistema tiene un procesador defectuoso. Su aplicación final le da una opción y pueden usar esa opción para tomar malas decisiones.
Cual es mejor
Depende de qué tan bien puede renderizar su imagen y cuánto ancho de banda tiene a su disposición. Ciertamente es posible hacer un render mejor que el que hacen los navegadores. No es realmente sorprendente que uno pueda hacer un mejor trabajo que Illustrator también. Pero luego pierde todos los beneficios de tener una representación diferida.
Hay una tercera opción.
Si no está satisfecho con los resultados, siempre puede intentar crear su propio motor de renderizado. Con plataformas que admiten webgl puedes. Ver aquí para un ejemplo . Pero esto es bastante duro y no le guarda los detalles de la implementación del formulario.
fuente
(No hay suficientes puntos para comentar sobre la respuesta de Richard B directamente todavía).
Para responder a su pregunta Richard B, a menudo vemos este efecto en elementos que necesitan suavizado en hardware de baja potencia. Esto incluso ocurre en elementos DOM con esquinas redondeadas, cuando el suavizado se reduce o elimina de esos entornos.
En nuestra empresa, tenemos algunos casos en los que usamos hardware de menor potencia y comenzamos a encontrar este problema de "formas de bordes extremadamente irregulares". Deshabilitamos / redujimos la cantidad de suavizado para mejorar el rendimiento. Esta es probablemente la misma razón por la que sus pruebas en dispositivos móviles arrojaron los resultados que obtuvieron.
fuente