Imágenes borrosas de SVG en cromo para Android
css google-chrome (4)
Para escapar del infierno de las diferentes densidades de píxeles en los teléfonos móviles, uso archivos SVG como imágenes de fondo en mi css.
Chrome para Android parece mostrar inline-svg bien, pero falla si el svg
- Se utiliza en css con
background-imagey una URL normal. - se utiliza en css con
background-imagey un uri de datos - se utiliza con un elemento de
image
El navegador de stock de Android 4 funciona bien. (y todos los otros teléfonos móviles que probé, también)
Puedes visitar este violín y comprobarlo. Acércate para ver la diferencia.
¿Alguien sabe por qué Chrome utiliza algunos mapas de bits pre-renderizados aquí?
Como han señalado otras respuestas en este problema y otros problemas similares, la representación de SVG es problemática en Chrome y en el navegador web nativo de Android. Es un problema conocido del navegador Chrome / Native.
Después de ver muchas soluciones durante varios días, me topé con esta solución por casualidad. El truco es incrustar texto dentro del archivo SVG, esto puede ser un solo carácter transparente.
Por ejemplo, agregue esto (o similar) a sus archivos SVG.
<text transform="matrix(1 0 0 1 7.1079 13.5215)" opacity="0" font-family="''MyriadPro-Regular''" font-size="12">a</text>
Sin investigar la fuente o los procesos reales de Chrome, solo puedo suponer que al incrustar texto se está forzando a que el SVG se vuelva a representar en la escala para los dispositivos de ppp alto.
Esta solución (en los navegadores que he podido probar en Android / Chrome) funciona sin importar cómo se use el elemento de la imagen de fondo, las rotaciones, la posición fija, etc. Incluso parece estar claro en el zoom.
¡Disfrutar!
Este es un problema conocido code.google.com/p/chromium/issues/detail?id=161982
Cuando se representó el SVG como una imagen (o imagen de fondo), se representó originalmente a la densidad de píxeles CSS, lo que lo hace borroso en los dispositivos en los que 1 px de px!
Ese problema se solucionó en Chrome 25 (versión actual en el momento de la escritura), sin embargo, las imágenes se vuelven borrosas de nuevo a medida que se acerca la ventana.
Este problema se solucionó en Chrome 26 (actualmente Chrome Beta, disponible en Play Store), las imágenes SVG y los fondos siguen siendo nítidos.
Para mí, la solución, aunque me llevó mucho tiempo descubrirla, fue mis elementos css:
border-radius: 4px;
Esto solucionó mis problemas, sin embargo, no he podido recrearlo más que en el sitio en el que he estado trabajando, pero aquí está el violín en el que estaba tratando de recrear el problema en el móvil:
Buena suerte, aconsejo verificar si hay una clase que pueda estar afectando el dibujo del elemento.
Si está insertando un archivo SVG, el archivo será (según el host, por ejemplo, Wikipedia) pre-renderizado. Por lo tanto, en carga, la imagen se renderizará para el tamaño dado. El SVG en línea (codificado directamente en la página) se redimensionará cuando la página cambie de tamaño. Pero, no estoy seguro de los navegadores móviles, ya que no cambian el tamaño de los elementos de la página, simplemente "acercan"
Básicamente, lo que estás haciendo es pintar un SVG en un Canvas (¡un juego de palabras!) Y luego hacer zoom en un canvas. Inline tiene el SVG directo ... así que mejor ...