Afbeeldingen

Een afbeelding voegt u in met de tag <image>. U kan verschillende formaten gebruiken. Hieronder ziet u een tabel.

formaat	extenties	aantal kleuren	te animeren	doorzichtig	Alpha transparantie	kwaliteitsverlies
gif (Graphics Interchange Format)	.gif	256	ja	ja	neen	neen
jpeg(Joint Picture Experts Group)	.jpg, .jpe, .jpeg	16,7 milioen	neen	neen	neen	ja
png (Portable Network Graphics)	.png	16,7 milioen	neen	ja	ja	neen

Naast dure foto-bewerkings-programmas boordevol functies die de doorsnee gebruiker toch niet nodig heeft zijn er ook gratis alternatieven zoals The GIMP (GNU Image Manipulation Program), een programma waarvan versies voor verschillende besturingssystemen waaronder GNU/Linux, MacOSX en Windows bestaan en dat veel bekendheid heeft in de Linux-wereld. The GIMP ondersteunt vele afbeeldingsformaten waaronder gif, jpeg en png (ook doorzichtige en alpha-transparante png's).

De tag <image> heeft de volgende attributen:

attribuut	verplicht	waarde van het attribuut	uitleg
xlink:href	ja	url	Locatie van de afbeelding.
x	ja	getal	x-coördinaat van de afbeelding.
y	ja	getal	y-coördinaat van de afbeelding.
height	aanbevolen	getal	Hoogte van de afbeelding.
width	aanbevolen	getal	Breedte van de afbeelding.

Mogelijke subtags:

animate | set | animateMotion | animateColor | animateTransform

Let op! Als de attributen height en width niet gegeven zijn is de afbeelding nul pixels hoog en nul pixels breed (in tegenstelling tot in HTML)

Bijvoorbeeld:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200px" height="200px">
<defs>
<g id="a">
<path d="M25 172L11 167L0 158L10 138L28 132L31 134L56 119C52 116 44 107 60 58L30 57C20 61 9 78 2 100C3 78 13 50 33 41L67 46L71 34L56 32L49 35L52 29L73 29C73 20 70 10 65 0C78 9 83 21 86 26L106 18L107 21L88 30L89 33L101 34L103 38L96 37L92 40L94 43L99 42L100 45L90 48L89 53C104 56 120 69 121 74L124 80L119 83C108 71 95 68 84 68L111 88L105 92L77 75C75 82 68 88 67 97C69 104 92 102 125 99C130 100 130 124 127 149L121 144C117 149 99 159 69 156C62 159 47 175 44 175L41 171L69 136L76 129C69 127 61 123 64 124L37 139L34 154L35 155ZM93 102L175 41L179 45L102 102ZM89 156L90 168L86 168L87 175C91 181 97 186 99 187L102 182L92 167L95 167L95 155ZM104 153L107 157L102 161L107 165L124 164L118 156L112 156L110 151" fill="black" />
</g>
</defs>
<g>
<image height="200" width="200" x="0" y="0" xlink:href="maan.jpg" />
<use x="0" y="10" transform="scale(0.9)" xlink:href="#a">
<animate attributeName="x" from="-200" to="200" begin="load" dur="10s" repeatDur="indefinite" />
</use>
</g>
</svg>

Dit voorbeeld geeft een heks (gemaakt met de Path Development Kit) die voor de maan vliegt weer. (Bekijk dit voorbeeld).

---

Ga naar het volgende hoofdstuk: Tekst in SVG