HTML5 inline SVG

HTML5 stöder inlinings SVG.

Vad är SVG?

  • SVG betyder skalbar vektorgrafik (Scalable Vector Graphics)
  • SVG används för att definiera vektorbaserade grafik för nätverket
  • SVG definieras med XML-format för grafik
  • SVG-bilder förlorar inte grafisk kvalitet när de förstörs eller ändras i storlek
  • SVG är en standard från World Wide Web Consortium

SVG:s fördelar

Fördelarna med att använda SVG jämfört med andra bildformat (t.ex. JPEG och GIF) är att:

  • SVG-bilder kan skapas och redigeras med textredigerare
  • SVG-bilder kan sökas, indexeras, skriptas eller komprimeras
  • SVG är skalbar
  • SVG-bilder kan skrivas ut i hög kvalitet vid alla upplösningar
  • SVG kan förstöras utan att kvaliteten på bilden försämras

Webbläsarstöd

Internet Explorer 9, Firefox, Opera, Chrome och Safari stöder inline SVG.

Lägg in SVG direkt i HTML-sidor

I HTML5 kan du direkt lägga in SVG-element i HTML-sidor:

Exempel

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

Prova det själv

Resultat:

SVG Lärarlektion

För att lära sig mer om SVG, besök vår SVG Lärarlektion.