SVG (vector grafik)

Lær at indsætte SVG grafik (Scalable Vector Graphics) på en hjemmeside som har den fordel at det ikke mister kvalitet når størrelsen ændres

Introduktion

SVG er en forkortelse for Scalable Vector Graphics.

SVG er et billedformat som består af almindelig tekst i XML format.

SVG er vector grafik som i modsætning til bitmap/raster grafik som JPEG, GIF og PNG ikke mister kvalitet når størrelsen ændres.

SVG billeder kan både være i sin egen fil eller indsættes inline i en HTML fil.

Se også Scalable Vector Graphics (SVG) 1.1 (Second Edition).

Eksempler med embed element

Jeg kan endnu ikke finde ud af at skaler et SVG billede med <embed>.
Jeg havde forventet at man kunne ændre billedets størrelse med width og height attributterne men det klipper bare noget at billedet væk.
billed0006.svg.
Resultatet ovenfor er skabt af følgende kode

Eksempler med img element

Hvis man bruger <img> til et vise en SVG fil så bliver billedet dog fint skaleret (bortset fra Internet Explorer som klippet billedet ligesom ved <embed>).
SVG kat SVG kat SVG kat SVG kat
SVG SVG SVG SVG
Resultatet ovenfor er skabt af følgende kode


Her tegnes nogle cirkler inline i HTML koden. Altså uden brug af en ekstra fil til SVG koden.
Resultatet ovenfor er skabt af følgende kode


Klik på figurene for at ændre deres farve
Resultatet ovenfor er skabt af følgende kode

SVG editor

Du kan bruge Inkscape programmet til at lave og redigere SVG filer.

Mere

Resultatet ovenfor er skabt af følgende kode

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.