1

Estoy desarrollando una app usando HTML+JavaScript+CSS con Cordova. Esta app usa imágenes SVG para que se ajusten mejor a las diferentes resoluciones, pero me encuentro con un problema: aunque las imágenes se muestran bien en mi ordenador y en el emulador de android, cuando instalo la app en un dispositivo, los SVG no se ven.

Supongo que tiene que ver con la versión del dispositivo que estoy usando que no soportara SVG (android 4.1 Jelly Bean); pero obviamente no me interesa que mi app se vea sin gráficos.

Probé a ver si el problema era que SVG no estaba soportado por mi versión de Android pero el siguiente código (obtenido de CSS tricks):

document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1");

devolvía true que significa que SVG sí está soportado. Además, poniendo las imágenes en un img hacía que si funcionaran (he probado varias rutas diferentes, la del CSS de abajo es correcta y funciona en el emulador y en el navegador)

Probé la sugerencia de Blonfu y eso también me ayudó a darme cuenta de que el problema no es el formato de imagen (falla con SVG y PNG), sino algo diferente. Puede que alguna propiedad CSS que cause algún tipo de conflicto y falle en Android.

Éste es el CSS (el anterior era una versión mínima):

#answers .option1::before {
    content:"";
    position:absolute;
    height:15vh;
    width:15vh;
    top:-2.5vh;
    left:0;
    background:url("../img/icon1.svg");
    background-size:contain;
    background-repeat:no-repeat;
}

Pero sigue sin mostrarse ninguna imagen de fondo en el dispositivo (mientras que sí se muestra en el emulador y en el navegador).

¿Qué es lo que puede estar fallando?¿Por qué no se ve la imagen y cómo puedo solucionarlo?

6
  • En que plataforma y versión estás probando? Android 2.X es conocido por no mostrar ni el SVG ni el fallback. La solución mas rapida a los problemas de compatibilidad es usar crosswalk, desafortunadamente esto limita mucho la cantidad de dispositivos en los que puedes desplegar tu aplicación.
    – devconcept
    Commented el 2 ago. 2016 a las 14:49
  • El dispositivo en el que no funciona es un HP Slate 7 con Android 4.1 (Jelly Bean).
    – Alvaro Montoro
    Commented el 2 ago. 2016 a las 14:55
  • Yo no he tenido problemas con imágenes svg de fondo en versiones android de la 4 en adelante. ¿Es posible que el problema sea el background-size:contain y no la imagen? Prueba con pixeles o borrando el background-size para descartar eso.
    – user7176
    Commented el 3 ago. 2016 a las 8:47
  • 1
    Hasta android 4.4 no funcionan las unidades vh y vw. No se si sera ese el problema. Y otra cosa, en el content puedes meter una imagen, no se si svg dará problemas pero es otra opción
    – user7176
    Commented el 3 ago. 2016 a las 13:37
  • 1
    @AlvaroMontoro he editado la respuesta
    – user7176
    Commented el 3 ago. 2016 a las 14:40

1 respuesta 1

1

Además de lo que he puesto en el comentario sí que puedes hacer algo para mostrar una imagen u otra: "fondos multiples", se pone todo dentro del mismo fondo pero separado con comas en lugar de repetir la propiedad como has hecho:

 background-image: url('../img/miImagen.svg'), url('../img/miImagen.png')

En realidad lo que haces es usar las dos imágenes a la vez pero funciona si falla una, el problema podría ser si tienes dos imágenes distintas y transparencias porque se vería la imagen de debajo pero en tu caso que serán iguales no debería dar problemas.

ACTUALIZACIÓN:

Con el código completo veo que se están usando unidades vh para determinar las dimensiones del elemento, antes de Android 4.4 no estaban soportadas estas unidades por lo que el pseudo-elemento ::before no tiene tamaño y no se muestra, hay que cambiar las unidades, a porcentajes por ejemplo.

1
  • Esta respuesta, aunque no me ha funcionado (no se ve el png tampoco), me ha servido de mucha utilidad. Ha hecho que me dé cuenta de que, como sugieres, alguna de las propiedades (como background-size u otra) crean algo de conflicto y hacen que no se muestre bien la imagen de fondo. Voy a actualizar la pregunta con el código que realmente tengo por si ves algo mientras algo pruebas. Gracias!
    – Alvaro Montoro
    Commented el 3 ago. 2016 a las 13:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.