SVG Fallback en navegadores antiguos: alternativas a JavaScript

SVG ve un amplio apoyo por parte de los navegadores recientes en estos días. Todavía mucha gente no navega por la web usando uno de estos navegadores modernos. Especialmente las versiones anteriores de Internet Explorer se utilizan en cantidades relevantes en todo el mundo. Y estas versiones anteriores causan problemas, no solo, sino también cuando se trata de SVG. IE simplemente no conoce SVG, por lo que debemos ofrecer PNG o JPEG como respaldo. Por supuesto, tenemos JavaScript con sus numerosas posibilidades para buscar soluciones de respaldo adecuadas, pero ¿y si JavaScript no es una opción? Mantén la calma y sigue leyendo. Tenemos una fila de alternativas para ti. Algunos de los cuales significan incluso menos esfuerzo que presentar un JavaScript completo…

Archivos HTML y SVG

Los navegadores modernos no hacen ninguna diferencia si una imagen está en SVG, PNG o JPEG. Simplemente inserte todo esto usando el elemento „“. Una alternativa es el elemento „“ de nombre similar. Tan pronto como usemos el atributo «src» para incrustar un archivo JPEG, IE lo mostrará. Todos los navegadores compatibles con SVG y el elemento „“ mostrarán correctamente el archivo SVG.

<svg width="100" height="100">
  <image xlink:href="https://www.noupe.com/development/logo.svg" src="https://www.noupe.com/development/logo.jpg" width="100" height="100" />
</svg>

En el ejemplo anterior, vinculamos un SVG externo por „“ y el atributo correcto „xlink:href“. Todos los navegadores modernos ignorarán el atributo «src» configurado incorrectamente. Solo Internet Explorer desde la versión 8 hacia abajo lo reconocerá y mostrará la alternativa JPEG, incorrectamente, pero configurada intencionalmente por el diseñador. El truco también funciona para SVG en línea. Utilice el elemento „“, pero omita el atributo „xlink:href“.

<svg width="100" height="100">
  <path d="M5 1v14l9-7" fill="red" />
  <image src="https://www.noupe.com/development/logo.jpg" width="100" height="100" />
</svg>

En el ejemplo anterior, dibujamos una flecha roja como un SVG. Las versiones anteriores de Internet Explorer ignorarán eso y mostrarán el JPEG desde dentro del elemento „“. Otra opción de trabajo para proporcionar un respaldo adecuado es mediante el uso del elemento ««, que también puede incrustar un SVG en un documento. Dentro de este objeto, usaremos el elemento „“ para proporcionar el archivo de reserva. Tenga en cuenta que es importante no adjuntar el tipo MIME correcto «imagen/svg-xml», sino algo incorrecto como «texto/svg+xml». Esto es obligatorio para obligar a Internet Explorer a mostrar el contenido del elemento „“. Los navegadores modernos son lo suficientemente tolerantes para mostrar el SVG independientemente del tipo MIME incorrecto.

<object data="test.svg" type="text/svg+xml">
  <img src="https://www.noupe.com/development/test.jpg">
</object>

Archivos CSS y SVG

Alternativas para el trabajo de CSS siguiendo los principios mencionados anteriormente. Solo que vamos a usar propiedades CSS que el IE anterior no puede entender. Digamos que queremos mostrar un SVG como fondo, usaríamos el método CSS3 para incrustar múltiples fondos. En múltiples fondos, necesitaremos usar la propiedad común «imagen de fondo» y, sí, tiene razón, el IE más antiguo también lo admite. Sin embargo, el truco es que agregamos más de un archivo, delimitado por comas. IE 8 y versiones anteriores lo tomarán como razón suficiente para ignorar la propiedad en su conjunto.

background-image: url("background.svg"), none;

En nuestro ejemplo, definimos un fondo usando varios archivos. El segundo archivo se establece en «ninguno». Esto es suficiente para que los navegadores más antiguos ignoren la propiedad por completo. Luego vamos y definimos una propiedad adicional de «imagen de fondo» con solo una imagen en JPEG y la colocamos justo antes de nuestra definición de fondo múltiple. Los navegadores más antiguos mostrarán el JPEG e ignorarán la segunda declaración.

background-image: url("background.jpg");
background-image: url("background.svg"), none;

Así es como va. Normalmente, la primera propiedad sería interpretada por todos los navegadores, pero la primera se sobrescribe con la segunda tan pronto como un navegador puede reconocer SVG correctamente. Desafortunadamente, este método alternativo no funcionará para todas las propiedades que incrustan archivos a través de «url()». Aparte de «imagen de fondo», «imagen de estilo de lista» no ofrece ninguna posibilidad de este tipo. Simplemente no existe una variante de CSS3 que no sea compatible con los navegadores más antiguos.

Conclusión

En muchos casos podemos establecer fallbacks simples sin JavaScript. En el lado negativo, tenemos que deshacernos del cumplimiento de los estándares en algunos casos, como dar el tipo MIME incorrecto. La ventaja es que estas soluciones se implementan rápidamente y funcionarán sin la necesidad de JavaScript como Modernizr y otros. Todo depende del proyecto….

(dpe)