SVG eller Scalable Vector Graphics giver dig mulighed for at tegne meget mere komplekse billeder og få dem til at gengives på websider. Men du kan ikke bare tage SVG-tags og slå dem i din HTML. De vises ikke, og din side bliver ugyldig. I stedet skal du bruge en af tre metoder.
Brug objektetiketten til at integrere SVG
HTML-taggen vil indlejre et SVG-grafik på din webside. Du skriver objektet mærket med en dataattribut til at definere den SVG-fil, du vil åbne. Du skal også indeholde bredde- og højdeattributter til at definere bredden og højden på dit SVG-billede (i pixels).
For kompatibilitet på tværs af browseren skal du inkludere typen attributten, som skal læses:
type = "image / svg + xml"
og en kodebase til browsere, der ikke understøtter det (Internet Explorer 8 og lavere). Din kodebase vil pege på et SVG-plugin til browsere, der ikke understøtter SVG. Det mest almindeligt anvendte plugin er fra Adobe på http://www.adobe.com/svg/viewer/install/. Dette plugin understøttes imidlertid ikke længere af Adobe. En anden mulighed er Ssrc SVG plugin fra Savarese Software Research på http://www.savarese.com/software/svgplugin/.
Dit objekt ville se sådan ud:
Tips til brug af objekt til SVG
- Sørg for, at bredden og højden er mindst lige så store som det billede, du er indlejret i. Ellers kan dit billede blive klippet.
- Din SVG vises muligvis ikke korrekt, hvis du ikke indeholder den korrekte indholdstype (
type = "image / svg + xml"), så jeg anbefaler ikke at lade det ud. - Du kan inkludere tilbagesendelse oplysninger inde i
objekttag til browsere, der ikke vil vise SVG-filer. - Du kan også indstille kilden til din SVG og indholdstypen i parametre. Dette kan virke bedre i IE 6 og 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">
Bemærk, at dette kræver en klassiker for at få det til at fungere.
Se et SVG i et eksempel på et tagtag.
Embed SVG med Embed Tag
En anden mulighed du har til at inkludere SVG er at bruge tagget. Du bruger næsten samme attributter som objektetiketten, herunder bredde <, højde, type og kodebase>. Den eneste forskel er, at i stedet for data, placerer du din SVG-dokumentwebadresse i src-attributten.
Din indlejring vil se sådan ud:
src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "billede / svg + xml" codebase = "http://www.adobe.com / svg / viewer / install "/>
Tips til brug af embed for SVG
- Embed-tagget er ikke gyldigt HTML4, men det er gyldigt HTML5, så hvis du bruger det på en HTML4-side, skal du huske, at din side ikke vil validere.
- Brug et fuldt quoalified domænenavn i src attributten for at opnå den bedste kompatibilitet.
- Der er også nogle rapporter, at brugen af embed-tag med Adobe-plugin'et vil nedbryde Mozilla-versioner 1.0 til 1.4.
Se et SVG i et embed tag-eksempel.
Brug en iframe til at inkludere SVG
Iframes er en anden nem måde at inkludere et SVG-billede på dine websider på. Det kræver kun tre attributter: Bredde og højde som sædvanlig, og src peger på placeringen af din SVG-fil.
Din iframe ville se sådan ud:
Tips til brug af iframe til SVG
Iframe vises med en kant omkring dit billede, medmindre du fjerner grænsen med en stil, f.eks
style = "border: none;"
Iframe angiver ikke et plugin-sted, så hvis en kundes browser ikke har pluginet, kan de muligvis ikke se noget, eller de kan muligvis se en fejlmeddelelse.
Se et SVG i et eksempel om iframe tag.
