Bár az SVG alapvetően vektorgrafikák készítésére és megjelenítésére alkalmas, számos olyan lehetőséggel rendelkezik, amivel a raszteres szerkesztők és megjelenítők esetén találkozhatunk. Ilyen lehetőség, hogy egy SVG dokumentumban nagyon egyszerűen helyezhetünk el különböző képeket. Jelenleg JPG és PNG típusú képek illeszthetők be. Erre az <image> elem használható:
| <image | x= | "0" | |
| y= | "0" | ||
| width= | "0" | ||
| height= | "0" | ||
| xlink:href= | "" | /> |
A kép helyét az xlink:href attribútumban kell megadni. Itt az attribútum értékeként a beillesztendő kép teljes elérési útját kell megadni. Különösen ügyelni kell a kis- és nagybetűk közti különbségre, és kerülni kell az ékezetes betűk és a szóköz használatát a fájlnévben. Az x és y attribútumokban a kép bal felső sarkának koordinátáit adhatjuk meg. Ha nem adunk meg értéket, akkor a kép bal felső sarka az origóba fog kerülni.
Önmagában a kép forrásának és helyének megadása még nem elegendő, ugyanis a képekhez rendelt alapbeállítások a szélességet és a magasságot is 0 pixelben határozzák meg. Ekkora területen viszont egyetlen kép sem jeleníthető meg. A kép méreteit a width és a height attribútumokban adhatjuk meg. Célszerű a kép valós méretét használni, vagy ha szükséges, akkor egy képszerkesztő programmal átméretezni a képet a célnak megfelelően.
16/1. feladat:
Készíts egy "képeslapot", ami tartalmaz egy fotót kedvenc színészedről, énekesedről, plüssmacidról stb. A kép körül helyezz el egy egyszerű szegélyt, amit SVG-ben rajzolsz meg.
Ha valamilyen oknál fogva nem tudjuk, vagy nem akarjuk a kép teljes méretét megadni, vagy a teljes képet megjeleníteni, akkor most is rendelkezésünkre áll a "Koordinátarendszerek" fejezetben megismert viewBox és preserveAspectratio elem. Ezeket fel kell venni az <image> elem attribútumai közé és megadni, hogy mekkora területen szeretnénk megjeleníteni a képet, és a méretezés során milyen módszert szeretnénk használni.
16/2. feladat:
Az előző feladatban állítsd át a kép méreteit úgy, hogy a magassága az eredetinek a fele legyen. A kép minden része maradjon látható, a méretarányokat ne tartsd meg, a magasság csökkenjen a felére, miközben a szélesség maradjon változatlan.