SVG教程

SVG betyder skalerbare vektorgrafik (Scalable Vector Graphics).

SVG er XML format definerer vektorbaserede grafikker.

eksempler i hvert kapitel

Ved at bruge vores 'prøv det selv' editor kan du redigere SVG og derefter klikke på knappen for at se resultaterne.

SVG Eksempler

<html>
<body>
<h1>Min første SVG</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

prøv det selv

grundlæggende viden

før du fortsætter med at lære, bør du have nogle grundlæggende kendskaber til følgende indhold:

  • HTML
  • grundlæggende XML

Hvis du vil lære disse indhold først, besøg venligst de relevante kurser på vores hovedside.

Hvad er SVG？

  • SVG betyder skalerbare vektorgrafik
  • SVG bruges til at definere vektorbaserede web-grafik
  • SVG definerer grafik i XML-format
  • SVG hver element og hver egenskab i filen kan indstilles til animation
  • SVG er W3C-anbefalet standard
  • SVG integres med andre W3C-standarder, for eksempel DOM og XSL

SVG er W3C-anbefalet standard

SVG 1.0 blev W3C-anbefalet standard den 4. september 2001.

SVG 1.1 blev W3C-anbefalet standard den 14. januar 2003.

SVG 1.1 (andet udgave) blev W3C-anbefalet standard den 16. august 2011.

SVG fordelene

i forhold til andre billedformater (som JPEG og GIF), brug af SVG fordelene er:

  • SVG billeder kan oprettes og redigeres med enhver teksteditor
  • SVG billeder kan søges, indekseres, scripts og komprimeres
  • SVG billeder er udvidelige
  • SVG billeder kan printes i høj kvalitet i enhver opløsning
  • SVG billeder er skalbare
  • SVG grafik mister ingen kvalitet ved skalering eller justering af størrelse
  • SVG er en åben standard
  • SVG filer er rene XML

oprettes SVG billeder

SVG Billeder kan oprettes med enhver teksteditor, men brug af tegneprogrammer (f.eks. InkscapeDet er ofte mere bekvemt at oprette SVG-billeder.