HTML5

Links

W3C - HTML5 SVG.

Example one

SVG 1.0

Source code

SVG 1.0

<svg> example in HTML5:

<svg width="100%" height="100%" version="1.0"
xmlns="http://www.w3.org/2000/svg">

<circle cx="50" cy="50" r="40" stroke-width="4" fill="#ff0000" />

<text x="23" y="115" fill="#cc00cc">SVG 1.0</text>

</svg>


SVG 1.0 document:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
            "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="100%" height="100%" version="1.0"
xmlns="http://www.w3.org/2000/svg">

<circle cx="50" cy="50" r="40" stroke-width="4" fill="#ff0000" />

<text x="23" y="115" fill="#cc00cc">SVG 1.0</text>

</svg>

Document

SVG 1.0

See original SVG 1.0 example.

Example two

SVG 1.1

Source code

SVG 1.1

<svg> example in HTML5:

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<circle cx="50" cy="50" r="40" stroke-width="4" fill="#00ff00" />

<text x="23" y="115" fill="#cc00cc">SVG 1.1</text>

<a xlink:href="http://validator.w3.org/check?uri=referer" target="_blank">
<text x="23" y="145" fill="#cccc00">W3C Valid SVG</text>
</a>

</svg>


SVG 1.1 document:

<?xml version="1.0" encoding="utf-8" 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"
xmlns:xlink="http://www.w3.org/1999/xlink">

<circle cx="50" cy="50" r="40" stroke-width="4" fill="#00ff00" />

<text x="23" y="115" fill="#cc00cc">SVG 1.1</text>

<a xlink:href="http://validator.w3.org/check?uri=referer" target="_blank">
<text x="23" y="145" fill="#cccc00">W3C Valid SVG</text>
</a>

</svg>

Document

SVG 1.1

See original SVG 1.1 example.

Joost De WebMaker
2002-2024 © Joost van Meeteren

Laatste update website: donderdag 21 november 2024

Deze website past cookies toe voor optimaal gebruik van dit platform | bron | Akkoord