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?
svg
de fondo en versiones android de la 4 en adelante. ¿Es posible que el problema sea elbackground-size:contain
y no la imagen? Prueba con pixeles o borrando elbackground-size
para descartar eso.vh
yvw
. No se si sera ese el problema. Y otra cosa, en elcontent
puedes meter una imagen, no se si svg dará problemas pero es otra opción