SVG eller Scalable Vector Graphics gör att du kan göra mycket mer komplexa bilder och få dem gjorda på webbsidor. Men du kan inte bara ta SVG-taggarna och släppa dem i din HTML. De kommer inte dyka upp och din sida kommer att vara ogiltig. I stället måste du använda en av tre metoder.
Använd objektetiketten för att bädda in SVG
HTML-taggen bäddar in en SVG-grafik på din webbsida. Du skriver objektetiketten med ett datattribut för att definiera SVG-filen du vill öppna. Du bör också inkludera bredd och höjdattribut för att definiera bredden och höjden på din SVG-bild (i pixlar).
För kompatibilitet med webbläsare bör du inkludera typattributet som ska läsa:
type = "image / svg + xml"
och en kodbas för webbläsare som inte stöder den (Internet Explorer 8 och lägre). Din kodbas skulle peka på ett SVG-plugin för webbläsare som inte stöder SVG. Det vanligaste pluginet är från Adobe på http://www.adobe.com/svg/viewer/install/. Denna plugin stöds dock inte längre av Adobe. Ett annat alternativ är Ssrc SVG-plugin från Savarese Software Research på http://www.savarese.com/software/svgplugin/.
Ditt objekt skulle se ut så här:
Tips för att använda objekt för SVG
- Se till att bredden och höjden är minst lika stora som bilden du lägger in. Annars kan din bild klippas.
- Din SVG kanske inte visas korrekt om du inte innehåller rätt innehållstyp (
type = "image / svg + xml"), så jag rekommenderar inte att du lämnar ut det. - Du kan inkludera återgångsinformation i
objekttagg för webbläsare som inte visar SVG-filer. - Du kan också ange källan till ditt SVG och innehållstypen i parametrar. Det kan fungera bättre i IE 6 och 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">
Observera att det krävs en klassiker för att den ska fungera.
Visa ett SVG i ett exempel på ett tagg tagg.
Bädda in SVG med Embed Tag
Ett annat alternativ du har för att inkludera SVG är att använda taggen. Du använder nästan samma attribut som objektetiketten, inklusive bredd <, höjd, typ och kodbas>. Den enda skillnaden är att istället för data, du placerar din SVG-dokumentadress i src-attributet.
Din inbäddning skulle se ut så här:
src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "bild / svg + xml" codebase = "http://www.adobe.com / svg / viewer / install "/>
Tips för att använda Bädda in för SVG
- Den inbäddade taggen är inte giltig HTML4, men den är giltig HTML5, så om du använder den på en HTML4-sida, bör du komma ihåg att din sida inte kommer att validera.
- Använd ett fullständigt quoalified domännamn i src attributet för bästa kompatibilitet.
- Det finns också några rapporter att användandet av inbäddnings taggen med Adobe-plugin kommer att krascha Mozilla-versionerna 1.0 till 1.4.
Visa ett SVG i ett inbäddat tagg exempel.
Använd en iframe att inkludera SVG
Iframes är ett annat enkelt sätt att inkludera en SVG-bild på dina webbsidor. Det kräver bara tre attribut: bredd och höjd som vanligt och src pekar på platsen för din SVG-fil.
Din iframe skulle se ut så här:
Tips för att använda iframe för SVG
Iframe kommer att visas med en kant runt din bild om du inte tar bort gränsen med en stil, t.ex.
style = "border: none;"
Iframe anger inte en plugin-plats, så om en kunds webbläsare inte har plugin kan de kanske inte se någonting alls, eller de får se ett felmeddelande.
Visa ett SVG i ett exempel om iframe-taggen.
