SVG教程

SVG skalbar vektorgrafik (Scalable Vector Graphics).

SVG betyder XML formaterar vektorbaserade grafik.

exempel i varje kapitel

Genom att använda vår "prova själv"-redigerare kan du redigera SVG och sedan klicka på knappen för att se resultatet.

SVG-exempel

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

prova själv

grundläggande kunskaper som krävs

Innan du fortsätter, bör du ha en viss grundläggande förståelse för följande:

  • HTML
  • grunderna XML

Om du vill lära dig detta först, besök våra relaterade guider på huvudsidan.

Vad är SVG？

  • SVG betyder skalbar vektorgrafik
  • SVG används för att definiera vektorbaserade webbgrafik
  • SVG definiera grafik i XML-format
  • SVG varje element och varje egenskap i filen kan anpassas med animation
  • SVG är W3C rekommenderad standard
  • SVG integras med andra W3C standarder, t.ex. DOM och XSL

SVG är W3C rekommenderad standard

SVG 1.0 blev W3C rekommenderad standard den 4 september 2001.

SVG 1.1 blev W3C rekommenderad standard den 14 januari 2003.

SVG 1.1 (andra upplagan) blev W3C rekommenderad standard den 16 augusti 2011.

SVG fördelarna

Jämfört med andra bildformat (t.ex. JPEG och GIF), användning av SVG Fördelen är att:

  • SVG bild kan skapas och redigeras med valfritt textredigeringsprogram
  • SVG bild kan sökas, indexeras, skriptas och komprimeras
  • SVG bild är utökbar
  • SVG bild kan skrivas ut i hög kvalitet i alla upplösningar
  • SVG bild är skalbar
  • SVG grafik förlorar ingen kvalitet vid skalning eller justering av storlek
  • SVG är en öppen standard
  • SVG fil är ren XML

skapa SVG bild

SVG Bilder kan skapas med valfritt textredigeringsprogram, men använda ritprogram (t.ex. InkscapeDet är vanligtvis mer bekvämt att skapa SVG-bilder.