SVG an example

SVG skrivs med XML.

SVG example

Följande exempel är en enkel SVG-fil. SVG-filer måste sparas med .svg-filändelsen:

<?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 exempel (endast för webbläsare som stöder SVG)

(För att se SVG-källkoden, öppna detta exempel och högerklicka i fönstret. Välj "Visa källkod".)

Kodförklaring:

Det första raden innehåller en XML-deklaration. Observera standalone-attributet! Detta attribut avgör om denna SVG-fil är "independent" eller om den innehåller hänvisningar till externa filer.

standalone="no" innebär att SVG-dokumentet kommer att hänvisa till en extern fil - här är DTD-filen.

Andra och tredje raden refererar till denna externa SVG DTD. DTD:n finns på “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”. DTD:n finns på W3C och innehåller alla tillåtna SVG-element.

SVG-koden börjar med <svg>-elementet, inklusive öppnande tagg <svg> och stängande tagg </svg>. Detta är roden. width- och height-attributen kan ställa in bredden och höjden på detta SVG-dokument. version-attributet kan definiera den använda SVG-versionen, xmlns-attributet kan definiera SVG-namnrymden.

SVG:s <circle> används för att skapa en cirkel. cx- och cy-attributen definierar cirkelns mittens x- och y-koordinater. Om dessa attribut ignoreras sätts punkt till (0, 0). r-attributet definierar cirkelns radie.

stroke- och stroke-width-attributen kontrollerar hur formens kontur visas. Vi ställer in cirkelns kontur till 2px bred, svart kant.

fill-attributet ställer in färgen inom formen. Vi ställer in fyllningsfärgen till röd.

Stängningstaggarna används för att stänga SVG-elementet och dokumentet självt.

Kommentar:Alla öppnande taggar måste ha en stängande tagg!