HTML5 sisäänrakennettu SVG

HTML5 tukee sisäänrakennettua SVG:ää.

Mikä on SVG?

  • SVG tarkoittaa skaalautuvaa vektor grafiikkaa (Scalable Vector Graphics)
  • SVG käytetään määrittämään verkkoon perustuvia vektor grafiikoita
  • SVG käyttää XML-muotoa määrittääkseen kuvia
  • SVG-kuvien grafiikkalaatu ei heikkeny, kun ne laajennetaan tai muutetaan kokoa
  • SVG on W3C:n standardi

SVG:n etuja

SVG:n etuja muihin kuvamuotoihin (kuten JPEG ja GIF) verrattuna ovat:

  • 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 kuvanlaadun heikkenemistä

Selaimen tuki

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

Lisää SVG suoraan HTML-sivulle

HTML5:ssä voit lisätä SVG-elementtejä suoraan 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

Tulos:

SVG opetusohjelma

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