Bygg inn SVG i HTML - Slik gjør du det

SVG-grafikk gir flere fordeler i forhold til konvensjonelle bildeformater. Dette praktiske tipset viser deg hvordan du integrerer SVG-grafikk i HTML-filer.

Integrer SVG-bilder direkte i HTML

Det er forskjellige måter å integrere SVG-er i HTML på. De fleste har imidlertid noen ulemper.

• Det er spesielt enkelt å integrere SVG ved å bruke "". For å gjøre dette, bare åpne SVG-en i en koderedigerer (f.eks Notisblokk ++) og kopier koden til HTML-koden.
• Kildekoden til HTML-filen din kan bli veldig lang, fordi SVG tar mye plass.

Inkluder SVG som en bildekomponent i HTML

En enkel måte å legge inn en SVG-fil i HTML på er å bruke en "img" -kode.

• Med "img" -koden legger du inn SVG som alle andre bilder. Selv om dette er enkelt, forhindrer det også bruk av JavaScript og koblinger i SVG.

Sett inn SVG med fallback i HTML

Dette alternativet er egnet hvis du bruker en SVG-fil, men også ønsker å holde et konvensjonelt bilde tilgjengelig for eldre nettlesere.

• Du kan bruke en "image" -kode i "SVG" -koden, der du har både SVG og et annet bilde med et "xlink: href" og et "src" attributt. Nettlesere som ikke støtter SVG, ignorerer attributtet "xlink: href". Alle andre gir SVG-bildet.

Et annet praktisk tips forteller deg hvordan du åpner en SVG-fil på datamaskinen din.