Bädda in SVG i HTML - Så här
SVG-grafik erbjuder flera fördelar jämfört med konventionella bildformat. Detta praktiska tips visar hur du integrerar SVG-grafik i HTML-filer.
Integrera SVG-bilder direkt i HTML
Det finns olika sätt att integrera SVG: er i HTML. De flesta har dock vissa nackdelar.
- Det är särskilt lätt att integrera SVG med "". För att göra detta, helt enkelt öppna din SVG i en kodredigerare (t.ex. Notepad ++) och kopiera koden till din HTML-kod.
- Källkoden för din HTML-fil kan bli mycket lång eftersom SVG tar mycket utrymme.
Inkludera SVG som en bildkomponent i HTML
Ett enkelt sätt att bädda in en SVG-fil i HTML är att använda en "img" -tagg.
- Med taggen "img" bäddar du in SVG som alla andra bilder. Även om detta är enkelt förhindrar det också användning av JavaScript och länkar inom SVG.
Sätt in SVG med fallback i HTML
Det här alternativet är lämpligt om du använder en SVG-fil men också vill hålla en konventionell bild tillgänglig för äldre webbläsare.
- Du kan använda en "bild" -tagg i "SVG" -taggen, där du har både själva SVG och en annan bild med ett "xlink: href" och ett "src" -attribut. Webbläsare som inte stöder SVG ignorerar attributet "xlink: href". Alla andra matar ut SVG-bilden.
Ett annat praktiskt tips berättar hur du öppnar en SVG-fil på din dator.