HTML5 sisäänrakennettu SVG

HTML5 tukee sisäänrakennettua SVG:ää.

Mitä SVG on?

  • SVG tarkoittaa skaalautuvaa vektorigrafiikkaa (Scalable Vector Graphics)
  • SVG käytetään määrittämään verkossa käytettäviä vektorigrafiikoita
  • SVG käyttää XML-muotoa määrittääkseen kuvia
  • SVG-kuvien grafiikkalaatu ei heikenny, kun ne laajennetaan tai muutetaan kokoa
  • SVG on W3C:n standardi

SVG:n etuna

SVG:n etuna muihin kuvamuotoihin (kuten JPEG ja GIF) verrattuna on:

  • SVG-kuvia voidaan luoda ja muokata tekstieditoriin
  • SVG-kuvia voidaan hakea, indeksoida, skriptata tai puristaa
  • SVG on skaalautuva
  • SVG-kuvia voidaan tulostaa korkealaatuisesti mihin tahansa resoluutioon
  • SVG voidaan laajentaa ilman, että kuvanlaatu heikkenee

Selaimen tuki

Internet Explorer 9, Firefox, Opera, Chrome ja Safari tukevat sisäänrakennettua SVG:ää.

Sisällytä SVG suoraan HTML-sivulle

HTML5:ssa voit suoraan sisällyttää SVG-elementtejä HTML-sivulle:

Esimerkki

<!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>

Kokeile itse

Tulokset:

SVG oppitunnit

Jos haluat oppia lisää SVG:stä, vieraile SVG oppitunnit.