Llevo como 2 semanas googleando intentando buscar solución a este problema. He visto muchos post sobre ello con fechas de 2012-14 y siguen sin resolver. A ver si a alguien le sucede lo mismo.
Estoy trabajando banners html5 en Google Web Designer (a petición de mi cliente). Para lidiar con temas de peso utilizo svg para prácticamente todo (ilustraciones y textos pasados a contorno). Uso un iMac pantalla retina, donde en todos los navegadores se ve de lujo.
El problema viene cuando lo ve el cliente en su pantalla no retina (o en mi segunda pantalla). Me gustaría incluir una captura de pantalla para explicarme, pero trabajo con material con derechos de autor por parte del cliente. Sucede que los gráficos se pixelan mucho, aportando una pésima calidad. Algo que no logro entender, ya que son gráficos vectoriales. Una vez cargada la página en el navegador, paso de una pantalla a otra y la diferencia es bestial (sí, retina siempre se ve más definido.. pero el pixelado es como si se hubiese hecho un zoom muy exagerado).
De lo que he leído por ahí parece ser un problema en la detección de la resolución detectada del dispositivo y el renderizado del svg que realiza el navegador.
He conseguido solucionarlo duplicando o triplicando las dimensiones originales del archivo, pero no es muy preciso y no me compensa que un elemento me pase de 2kb a 8kb (el peso es crucial en las piezas).
Alguna idea? Alguien le ha ocurrido lo mismo?
Os agradezco de antemano cualquier ayuda. Muchas gracias!
<svg viewBox="lo-que-fuera" shape-rendering="geometricPrecision" . . .