SVG eller Scalable Vector Graphics lar deg tegne mye mer komplekse bilder og få dem gjengitt på nettsider. Men du kan ikke bare ta SVG-kodene og slå dem inn i HTML-en din. De vises ikke, og siden din blir ugyldig. I stedet må du bruke en av tre metoder.
Bruk Object Tag til å legge inn SVG
HTML-taggen vil legge inn et SVG-grafikk i websiden din. Du skriver objektetiketten med et datatributt for å definere SVG-filen du vil åpne. Du bør også inkludere bredde- og høydeattributter for å definere bredden og høyden på SVG-bildet ditt (i piksler).
For kompatibilitet med nettleseren, bør du inkludere typen attributtet, som skal lese:
type = "image / svg + xml"
og en kodebase for nettlesere som ikke støtter den (Internet Explorer 8 og lavere). Din kodebase vil peke på et SVG-plugin for nettlesere som ikke støtter SVG. Det vanligste pluginet er fra Adobe på http://www.adobe.com/svg/viewer/install/. Denne plugin støttes imidlertid ikke lenger av Adobe. Et annet alternativ er Ssrc SVG plugin fra Savarese Software Research på http://www.savarese.com/software/svgplugin/.
Ditt objekt ville se slik ut:
Tips for bruk av objekt for SVG
- Pass på at bredden og høyden er minst like store som bildet du legger inn. Ellers kan bildet ditt klippes.
- SVG-en din kan ikke vises riktig hvis du ikke inneholder riktig innholdstype (
type = "image / svg + xml"), så jeg anbefaler ikke å forlate det. - Du kan inkludere tilbakebetalingsinformasjon inne i
gjenstandtag for nettlesere som ikke vil vise SVG-filer. - Du kan også angi kilden til SVG og innholdstypen i parametere. Dette kan fungere bedre i IE 6 og 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">
Legg merke til at dette krever en klassekamerat for å få det til å fungere.
Se et SVG i et eksempel på et objekttag.
Legge sammen SVG med Embed Tag
Et annet alternativ du har for å inkludere SVG, er å bruke taggen. Du bruker nesten samme attributter som objektetiketten, inkludert bredde <, høyde, type og kodebase>. Den eneste forskjellen er at i stedet for data, du plasserer SVG-dokumentadressen i src-attributtet.
Din embed vil se slik ut:
src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / viewer / install "/>
Tips for bruk av embed for SVG
- Den innebygde taggen er ikke gyldig HTML4, men den er gyldig HTML5, så hvis du bruker den på en HTML4-side, bør du huske at siden din ikke vil validere.
- Bruk et fullstendig quoalified domenenavn i src attributtet for best kompatibilitet.
- Det er også noen rapporter at bruk av embed-taggen med Adobe-pluginet vil krasje Mozilla-versjoner 1.0 til 1.4.
Se et SVG i et embed-tag-eksempel.
Bruk en iframe til å inkludere SVG
Iframes er en annen enkel måte å inkludere et SVG-bilde på websidene dine. Det krever kun tre attributter: bredde og høyde som vanlig, og src peker til plasseringen av SVG-filen.
Din iframe ville se slik ut:
Tips for bruk av iframe for SVG
Iframe vil vise med en ramme rundt bildet ditt, med mindre du fjerner grensen med en stil, for eksempel
style = "border: none;"
Iframe spesifiserer ikke en pluginplassering, så hvis en kundes nettleser ikke har pluginet, kan de kanskje ikke se noe i det hele tatt, eller de kan se en feilmelding.
Se et SVG i et eksempel om iframe-taggen.
