SVG yksi esimerkki

SVG kirjoitetaan XML:n avulla.

SVG esimerkki

Alla oleva esimerkki on yksinkertainen SVG-tiedoston esimerkki. SVG-tiedosto täytyy tallentaa .svg-päätteellä:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

Katso esimerkki (vain SVG:n tukeville selaimille)

(Jos haluat tarkastella SVG-lähdetiedostoa, avaa tämä esimerkki ja napsauta oikeaa painiketta ikkunassa. Valitse “Näytä lähdekoodi”.)

Koodin selitys:

Ensimmäinen rivi sisältää XML-deklaroinnin. Huomaa standalone-ominaisuus! Tämä ominaisuus määrittää, onko SVG-tiedosto “eriomainen” vai sisältääko se viittauksen ulkoiseen tiedostoon.

standalone="no" tarkoittaa, että SVG-dokumentti viittaa ulkoiseen tiedostoon - tässä tapauksessa DTD-tiedostoon.

Toinen ja kolmas rivi viittaa tähän ulkoiseen SVG DTD:hen. Tämä DTD sijaitsee osoitteessa “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”. Tämä DTD sijaitsee W3C:ssä ja sisältää kaikki sallitut SVG-elementit.

SVG-koodi alkaa <svg>-elementillä, joka sisältää avausmerkinnän <svg> ja sulkemismerkinnän </svg> . Tämä on juurielementti. width ja height-ominaisuudet voivat asettaa tämän SVG-dokumentin leveyden ja korkeuden. version-ominaisuus voi määrittää käytetyn SVG-version, xmlns-ominaisuus määrittää SVG-nimennöspankin.

SVG:n <circle> käytetään yhden pyörän luomiseen. cx ja cy-ominaisuudet määrittävät pyörän keskipisteen x- ja y-koordinaatit. Jos nämä ominaisuudet sivuutetaan, pyörä sijoittuu kohtaan (0, 0). r-ominaisuus määrittää pyörän säteen.

stroke ja stroke-width-ominaisuudet ohjaavat muodon reunan näyttämistä. Asetamme pyörän reunan 2px leveäksi, mustaksi reunuksella.

fill-ominaisuus asettaa muodon sisällä olevan värin. Asetamme täyttyvän värin punaiseksi.

Sulkemismerkinnän tehtävä on sulkea SVG-elementti ja dokumentti itsessään.

Huomautus:Kaikki avautuvat merkinnät täytyy sulkea!