SVG An Example

SVG wordt geschreven in XML.

SVG Example

Hieronder is een voorbeeld van een eenvoudig SVG-bestand. SVG-bestanden moeten worden opgeslagen met de .svg-extensie:

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

Bekijk voorbeeld (alleen voor browsers die SVG ondersteunen)

(Als je de SVG-bron wilt bekijken, open dan dit voorbeeld en klik in het venster met de rechtermuisknop. Kies "Bekijk broncode".)

Code uitleg:

De eerste regel bevat een XML-declaratie. Let op het standalone-eigenschap! Deze eigenschap bepaalt of dit SVG-bestand "onafhankelijk" is, of het verwijst naar externe bestanden.

standalone="no" betekent dat het SVG-document een externe bestand verwijst - hier, is het DTD-bestand.

The second and third lines refer to this external SVG DTD. The DTD is located at “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”. The DTD is located at W3C and contains all allowed SVG elements.

SVG code starts with the <svg> element, including the opening tag <svg> and the closing tag </svg>. This is the root element. The width and height attributes can set the width and height of this SVG document. The version attribute can define the SVG version used, and the xmlns attribute can define the SVG namespace.

The SVG <circle> is used to create a circle. The cx and cy attributes define the x and y coordinates of the center of the circle. If these two attributes are ignored, the circle point will be set to (0, 0). The r attribute defines the radius of the circle.

The stroke and stroke-width attributes control how the outline of the shape is displayed. We set the outline of the circle to 2px wide, with a black border.

The fill attribute sets the color inside the shape. We set the fill color to red.

The closing tag is used to close the SVG element and the document itself.

Note:All opening tags must have closing tags!