Sto lavorando a un design reattivo e sto pensando di creare icone di navigazione come file .svg. Come è il supporto attuale del browser e c'è un workaround/plugin per versioni di browser precedenti?. Supporto browser SVG
Tutti i principali browser hanno supportato per anni tranne < = IE8. Soluzione alternativa potrebbe essere ad esempio RaphaelJS.
Fonti:
Da segnalare, se avete bisogno di < = supporto IE8, è possibile implementare GoogleChromeFrame abbastanza facilmente per ottenere il supporto per SVG che stai cercando per ...
Anche se si potrebbe scoprire che ogni browser ha i propri piccoli capricci con respec t alle caratteristiche della specifica. Ho avuto problemi con nodi creati dinamicamente che utilizzano filtri e animateMotion è stato un bug in Google Chrome per troppo tempo ... (usiamo FF5 + come interfacce interattive per questo motivo, Safari sta migliorando)
IMO , a meno che l'intera applicazione non sia SVG, utilizzerei semplicemente i PNG per le tue icone, a meno che tu non vogliale scalare bene! :)
... ma se vuoi solo giocare con SVG, Giv'er! ;)
Si potrebbe anche usare SVG in generale per tutte le immagini. In questo modo copriresti tutte le cose della retina su iDevices. Altri dispositivi seguiranno prima o poi.
Per i browser che non supportano svg, è possibile assegnare al corpo una classe di 'no-svg'.
nel CSS è sufficiente aggiungere un' .no-svg .yourimageclass' e posizionare un png, invece. (Ignorarlo)
Boilerplate HTML5 ti dà quella già classe non-svg di default con alcuni javascript magia. (ad esempio per IE8)
The SVG spec è esteso e nessun browser supporta attualmente l'intera specifica. Detto questo all the latest versions of all the major browsers have basic SVG support. Dal momento che nessuno di loro ha il supporto completo, è necessario verificare le singole funzionalità in ciascun browser che si sta targeting. Se stai disegnando solo forme base e non utilizzi funzioni più avanzate (come filtri, animazioni, ecc.) Probabilmente non avrai problemi.
A full browser compatibility matrix can be found here.
La soluzione alternativa per le versioni precedenti di IE è di utilizzare VML. Se è necessario supportare IE6 e si sta disegnando con il codice, Raphael.js eseguirà questo controllo di compatibilità per te e renderizza utilizzando VML o SVG quando appropriato. Ma se stai caricando un file SVG non elaborato e lo utilizzi come sorgente di immagini che non funzionerà.
Un'altra opzione per i vecchi browser consiste nell'utilizzare lo canvg JavaScript library. È un parser SVG JavaScript puro che renderà l'immagine risultante su tela, ma potrebbe essere eccessivo.
PS, si potrebbe desiderare di guarda anche i font di icone (http://css-tricks.com/examples/IconFont/) – sym3tri
Per le immagini di sfondo, ecco un modo semplice per ripiego per sfondi PNG per browser meno recenti:
http://signaltower.co/2013/02/25/add-png-fallbacks-for-svg-files/
Questo link restituisce un 404 – SPRBRN
Modificato: ho usato per collegare ad un livello molto bella tabella di confronto SVG, ma non è stata aggiornata dal 2011, quindi non è più rilevante.
Vale la pena notare che questo tavolo è stato aggiornato l'ultima volta nel 2011 – bashaus
Non è più vero @bashaus. Questa tabella viene regolarmente aggiornata. –
Se sto lavorando con <img> elementi (in contrasto con le immagini di sfondo CSS), io uso una soluzione a portata di mano, una combinazione di Modernizr (una libreria JavaScript che rileva la disponibilità di alcune funzioni, come il supporto SVG, sui browser) e alcune righe di 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) creo .PNG versioni di ogni file SVG. 2) Modernizr fornisce all'elemento html la classe di .no-svg se rileva che non c'è alcun supporto .svg. 3) jQuery scambia le estensioni di file. .indexOf(".svg") controlla se la stringa ".svg" è contenuta nel valore di src, restituendo -1 se non lo trova e un numero intero positivo se lo fa. Se trova ".svg", l'intera stringa src è tirato in isSvg e .replace() swap .svg per .png e salva il risultato come isPng, che viene quindi impostato come valore di src.
Bello, ma c'è un motivo per cui non cerca solo ".svg" alla fine dell'URI 'src'? – iconoclast
non solo: la tua cottura il mio noodle con quelle 2 parole proprio lì! – landed
... oppure lasciare server Apache trattare con esso:
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} MSIE\s[5-8]\.
RewriteCond %{REQUEST_FILENAME} ^.+?\.svg$
RewriteRule ^(.+?)\.(?:svg)$ $1\.png [L]
devi solo creare .png versioni di ogni file SVG e non importa se il file è per lo sfondo css o per un tag img.
¡Con elemento oggetto!
<object data="example.svg" type="image/svg+xml">
<!-- If browser don't soport/don't find SVG -->
<img src="example.png" alt="Logotype" />
</object>
È possibile utilizzare caniuse.js script per rilevare se il vostro browser supporta SVG o no:
caniuse.svg()
https://www.w3schools.com/html/html5_svg.asp –