Estoy trabajando en un diseño receptivo y estoy pensando en crear iconos de navegación como archivos .svg. ¿Cómo es el soporte actual del navegador y existe una solución alternativa/complemento para versiones anteriores del navegador?.SVG Browser Support
Todos los principales navegadores han tenido soporte durante años, excepto < = IE8. La solución podría ser, por ejemplo, RaphaelJS.
Fuentes:
A tener en cuenta, que si necesita ayuda = < IE8, puede implementar fácilmente GoogleChromeFrame suficiente para conseguir el apoyo SVG que buscas para ...
Aunque puede encontrar que cada navegador tiene sus propias peculiaridades con respec t a las características de la especificación. He tenido problemas con nodos creados dinámicamente que usan filtros y animateMotion ha estado molesto en Google Chrome durante demasiado tiempo ... (utilizamos FF5 + como nuestras interfaces interactivas por esta razón, Safari también está mejorando)
IMO , a menos que toda la aplicación sea SVG, solo usaría PNG para tus iconos, a menos que quieras que se escalen muy bien. :)
... pero si solo quieres jugar con SVG, Giv'er! ;)
También podría utilizar SVG en general para todas las imágenes. De esa forma cubrirías todas las cosas de retina en iDevices. Otros dispositivos seguirán tarde o temprano.
Para los navegadores que no admiten svg, podría darle al cuerpo una clase de 'no-svg'.
En el CSS sólo tiene que añadir un' .yourimageclass .no-SVG y coloque un png en su lugar. (Anularlo)
plancha de caldera de HTML5 le da esa clase de no-SVG ya por defecto con algo de JavaScript magia. (por ejemplo, para IE8)
The SVG spec es extenso y actualmente ningún navegador admite la especificación completa. Dicho esto, all the latest versions of all the major browsers have basic SVG support. Como ninguno de ellos tiene soporte completo, deberá verificar las características individuales en cada navegador al que se dirige. Si solo dibuja formas básicas y no utiliza funciones más avanzadas (como filtros, animaciones, etc.) es probable que no tenga ningún problema.
A full browser compatibility matrix can be found here.
La solución para las versiones anteriores de IE es usar VML. Si se requiere compatibilidad con IE6 y está dibujando con código, entonces Raphael.js hará esta verificación de compatibilidad y renderizará utilizando VML o SVG cuando corresponda. Pero si está cargando un archivo SVG sin formato y usándolo como fuente de imagen, eso no funcionará.
Otra opción para navegadores antiguos es utilizar el canvg JavaScript library. Es un analizador sintáctico SVG puro de JavaScript que renderizará la imagen resultante en lienzo, pero esto podría ser excesivo.
PS, es posible que desee mira también en icon-fonts (http://css-tricks.com/examples/IconFont/) – sym3tri
Para imágenes de fondo, aquí es una manera fácil de vuelve a los fondos del png para navegadores antiguos:
http://signaltower.co/2013/02/25/add-png-fallbacks-for-svg-files/
Ese enlace devuelve un 404 – SPRBRN
Editado: solía vincular a un nivel muy buena tabla de comparación SVG, pero no se ha actualizado desde 2011, por lo que ya no es relevante.
Vale la pena señalar que esta tabla se actualizó por última vez en 2011 – bashaus
Ya no es cierto @bashaus. Esta tabla se actualiza regularmente. –
Si estoy trabajando con <img> elementos (a diferencia de las imágenes de fondo de CSS), utilizo una solución práctica, una combinación de Modernizr (una biblioteca JavaScript que detecta la disponibilidad de ciertas características, tales como el apoyo .svg, en los navegadores) y unas pocas líneas de jQuery:
$(".no-svg img").each(function() {
var $this = $(this);
if ($this.attr("src").indexOf(".svg") > -1) {
var isSvg = $this.attr("src").toString();
var isPng = isSvg.replace(".svg", ".png");
$this.attr("src", isPng);
}
});
1) .png puedo crear versiones de cada archivo .svg. 2) Modernizr le da al elemento html la clase de .no-svg si detecta que no hay soporte para .svg. 3) jQuery intercambia las extensiones de archivo. .indexOf(".svg") comprueba si la cadena ".svg" está contenida dentro del valor de src, devolviendo -1 si no lo encuentra y un entero positivo si lo hace. Si encuentra ".svg", toda la cadena de src se tira en isSvg y .replace() permutas .svg para .png y guarda el resultado como isPng, que se establece a continuación, como el valor de src.
Bueno, pero ¿hay alguna razón por la que no solo busque '.svg' al final del URI 'src'? – iconoclast
no solo: ¡hornea mis fideos con esas 2 palabras ahí mismo! – landed
... o puede dejar que el servidor Apache tratar con él:
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} MSIE\s[5-8]\.
RewriteCond %{REQUEST_FILENAME} ^.+?\.svg$
RewriteRule ^(.+?)\.(?:svg)$ $1\.png [L]
es suficiente con crear .png versiones de cada archivo .svg y no importa si el archivo es para el fondo css o por una etiqueta img.
¡Con elemento de objeto!
<object data="example.svg" type="image/svg+xml">
<!-- If browser don't soport/don't find SVG -->
<img src="example.png" alt="Logotype" />
</object>
Puede utilizar caniuse.js script para detectar si su navegador soporta SVG o no:
caniuse.svg()
https://www.w3schools.com/html/html5_svg.asp –