SVG et eksempel

SVG skrives med XML.

SVG eksempel

Dette eksempel er et simpelt eksempel på et SVG-dokument. SVG-dokumenter skal gemmes med .svg-filtilføjelse:

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

Se eksemplet (kun for browsere, der understøtter SVG)

(Hvis du vil se SVG-kildeteksten, åbn dette eksempel, klik derefter højre i vinduet. Vælg "Vis kildekode".)

Kodeforklaring:

Første linje indeholder en XML-deklaration. Bemærk standalone-egenskaben! Denne egenskab bestemmer, om dette SVG-dokument er "uafhængigt" eller indeholder referencer til eksterne filer.

standalone="no" betyder, at SVG-dokumentet vil referere til en ekstern fil - i dette tilfælde, en DTD-fil.

Anden og tredje linje refererer til denne eksterne SVG DTD. DTD'en findes på “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”. DTD'en findes på W3C og indeholder alle tilladte SVG-elementer.

SVG-koden begynder med <svg>-elementet, inklusive åbnings- og lukningstag <svg> og </svg>. Dette er rod elementet. width- og height-eegenskaberne kan indstille bredden og højden af dette SVG-dokument. version-eegenskaben kan definere den anvendte SVG-version, xmlns-eegenskaben kan definere SVG-namespace.

SVG's <circle> bruges til at oprette en cirkel. cx- og cy-eegenskaberne definerer cirkelens x- og y-koordinater for centrum. Hvis disse to egenskaber ignoreres, sættes cirkelpunktet til (0, 0). r-eegenskaben definerer cirkelens radius.

stroke- og stroke-width-eegenskaberne kontrollerer, hvordan konturen af figuren vises. Vi sætter cirkelens kontur til 2px bred, sort kant.

fill-eegenskaben indstiller farven inde i figuren. Vi sætter fyldfarven til rød.

Lukket tags funktion er at lukke SVG-elementet og dokumentet selv.

Kommentar:Alle åbne tag skal have en lukket tag!