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:
Kaikki harjoitukset on syytä tallentaa. Voit käyttää samoja koodinpätkiä uudelleen eri tehtävissä.<!-- SVG harjoitus 2a, tekijät Jaakko ja Jenni-->
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.
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:
SVG-kuva voidaan sijoittaa HTML sivuille seuraavasti:
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.
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 |