SVG o Scalable Vector Graphics ti permettono di disegnare immagini molto più complesse e renderle renderizzate su pagine web. Ma non puoi semplicemente prendere i tag SVG e schiaffarli nel tuo HTML. Non verranno visualizzati e la tua pagina non sarà valida. Invece, devi usare uno dei tre metodi.
Usa il tag Object per incorporare SVG
Il tag HTML incorpora un'immagine SVG nella tua pagina web. Si scrive il tag dell'oggetto con un attributo dati per definire il file SVG che si desidera aprire. Dovresti includere anche gli attributi width e height per definire la larghezza e l'altezza dell'immagine SVG (in pixel).
Per la compatibilità tra browser, è necessario includere l'attributo type, che dovrebbe contenere:
type = "image / svg + xml"
e un codice base per i browser che non lo supportano (Internet Explorer 8 e versioni precedenti). Il tuo codebase punta a un plugin SVG per i browser che non supportano SVG. Il plugin più comunemente utilizzato è Adobe all'indirizzo http://www.adobe.com/svg/viewer/install/. Tuttavia, questo plugin non è più supportato da Adobe. Un'altra opzione è il plugin SVG Ssrc di Savarese Software Research su http://www.savarese.com/software/svgplugin/.
Il tuo oggetto sarebbe simile a questo:
Suggerimenti per l'utilizzo dell'oggetto per SVG
- Assicurati che la larghezza e l'altezza siano grandi almeno quanto l'immagine che stai incorporando. In caso contrario, l'immagine potrebbe essere ritagliata.
- Il tuo SVG potrebbe non essere visualizzato correttamente se non includi il tipo di contenuto corretto (
type = "image / svg + xml"), quindi non consiglio di lasciarlo fuori. - È possibile includere informazioni di fallback all'interno di
oggettotag per i browser che non visualizzeranno i file SVG. - È anche possibile impostare la sorgente del tuo SVG e il tipo di contenuto nei parametri. Questo potrebbe funzionare meglio in IE 6 e 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">
Nota che questo richiede un classid per farlo funzionare.
Visualizza un file SVG in un esempio di tag oggetto.
Incorpora SVG con il tag Embed
Un'altra opzione che hai per includere SVG è usare il tag. Usi quasi gli stessi attributi del tag dell'oggetto, inclusi width <, height, type e codebase>. L'unica differenza è che invece di dati, inserisci l'URL del tuo documento SVG nell'attributo src.
Il tuo embed sarebbe simile a questo:
src = "http://tuo-dominio.qui/z-circle.svg" width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / viewer / install "/>
Suggerimenti per l'uso Incorpora per SVG
- Il tag embed non è HTML4 valido, ma è HTML5 valido, quindi se lo si utilizza in una pagina HTML4, è necessario ricordare che la pagina non verrà convalidata.
- Utilizzare un nome di dominio completamente quoalified nell'attributo src per la massima compatibilità.
- Ci sono anche alcuni rapporti che utilizzano il tag embed con il plugin Adobe per mandare in crash le versioni di Mozilla dalla 1.0 alla 1.4.
Visualizza un SVG in un esempio di tag embed.
Usa un iframe per includere SVG
Gli iframe sono un altro modo semplice per includere un'immagine SVG sulle tue pagine web. Richiede solo tre attributi: larghezza e altezza come al solito e src che punta alla posizione del file SVG.
Il tuo iframe dovrebbe assomigliare a questo:
Suggerimenti per l'utilizzo di iframe per SVG
L'iframe verrà visualizzato con un bordo attorno all'immagine a meno che non rimuovi il bordo con uno stile, ad esempio
style = "border: none;"
L'iframe non specifica l'ubicazione di un plug-in, quindi se il browser di un cliente non ha il plug-in, potrebbe non vedere nulla o potrebbe visualizzare un messaggio di errore.
Visualizza un file SVG in un esempio di tag iframe.
