XML - ohjelmoinnin perusteet

SVG: perusteiden harjoitus

SVG-tiedostot ovat XML-tiedostoja, ja niitä voi editoida tavallisella tekstieditorilla kuten Notepad/Muistio, tai ohjelma- ja HTML-editoreilla, jotka tunnistavat XML-syntaksin.

Muista sisällyttää jokaiseen tiedostoon kommenttirivi, joka kertoo työn tekijän:

<!-- SVG harjoitus 2a, tekijät Jaakko ja Jenni-->

Harjoitus 8a: SVG tiedoston rakenne: suorakaide

Kirjoita seuraavanlainen tiedosto ja tallenna se.

<?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">
<rect width="300" height="200" style="fill:rgb(0,155,155);stroke-width:1; stroke:rgb(0,11,11)"/>
</svg>

Tallenna koodi nimellä nelio.svg. Tutki sen esitystä Internet Explorerilla ja Firefoxilla. Korjaa mahdolliset virheet.

Harjoitus 8b: Muita muotoja

Seuraavassa on koodeja muiden muotojen piirtämiseksi: ympyrä, viivoja ja erilaisia suorakaiteita.

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

Sijoittelu pois yläkulmasta

<rect x="20" y="20" width="250" height="250" style="fill:blue;stroke:pink;stroke-width:5; fill-opacity:0.1;stroke-opacity:0.9"/>

Pyöristetyt kulmat:

<rect x="20" y="20" rx="20" ry="20" width="250" height="100" style="fill:red;stroke:black; stroke-width:5;opacity:0.5"/>

Ellipsi:

<ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>

ja viiva:

<?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">
<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>

Selitystä yllä olevaan koodiin:

• x1 attribuutti määrittelee viivan alun x-akselilla
• y1 attribuutti määrittelee viivan alun y-akselilla
• x2 attribuutti määrittelee viivan lopun x-akselilla
• y2 attribuutti määrittelee viivan lopun y-akselilla

SVG-kuva voidaan sijoittaa HTML sivuille seuraavasti:

• embed -elementtiä käyttäen
• iframe -elementtiä käyttäen
• object -elementtiä käyttäen

Tee nyt HTML-sivu, jolle sijoitat aiemmin tekemäsi kuviot.

Jatketaan monimutkaisemmilla kuvioilla, kuten monikulmio:

<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>

ja murtoviiva:

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>

Lisää mahdollisuuksia löytyy sivulta:

http://www.w3schools.com/svg/default.asp.

Harjoitus 8c: Oma kuva

Lopuksi tee kuva, jossa yhdistelemällä erilaisia muotoja saat aikaan piirroksen, vaikkapa pienen kartan omikotitalon pihapiiristä.

Päivittänyt: Jaana Holvikivi Muutettu 2.2.2010