SVG HTML:ssä

Voit lisätä SVG-elementin suoraan HTML-sivulle.

Lisää SVG suoraan HTML-sivulle

Tässä on yksinkertainen SVG-kuvaesimerkki:

Pahoittelemme, mutta selaimesi ei tue sisäistä SVG:ää.

Tämä on HTML-koodi:

<!DOCTYPE html>
<html>
<body>
<h1>Minun ensimmäinen SVG</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

Kokeile itse

SVG-koodin selitys:

  • SVG-kuvat alkavat <svg>-elementillä
  • <svg>-elementin width- ja height-ominaisuudet määrittävät SVG-kuvan leveyden ja korkeuden
  • <circle>-elementti käytetään pyörien piirtämiseen
  • cx- ja cy-ominaisuudet määrittävät pyörien keskikohdan x- ja y-koordinaatit. Jos cx ja cy ei ole asetettu, pyörien keskikohta asetetaan (0, 0)
  • r-ominaisuus määrittää pyörien säteen
  • stroke- ja stroke-width-ominaisuudet hallitsevat muodon reunan näyttämistapaa. Asetamme pyörien reunan 4 pikselin vihreäksi "reunaksi"
  • fill-ominaisuus asettaa pyörien sisäisen värin. Asetamme täyttävän värin keltaiseksi
  • </svg> -tagi sulkee SVG-kuvan

Huomio: Koska SVG kirjoitetaan XML:n avulla, kaikki elementit täytyy sulkea oikein!