EVTEK XML

SVG: basics

SVG files are XML files. You can use any text or XML/HTML editor to edit them.

Remember to add a comment line after the XML declaration where the authors are listed:

<!-- SVG assignment 8a by Jack and Jill-->

Practice 8a: A simple SVG file: a rectangle

Create and save the following file:

<?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>

Create the file for example with Notepad and save as svg8a.xml. Open the file with Internet Explorer. Compare the display with Firefox.

Practice 8b: Other shapes

Try also other shapes such as circle, lines and different size rectangles.

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

Location from the top left corner

<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"/>

Rounded corners:

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

Ellipse:

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

a line:

<?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>

Explanations to the above:

• x1 attribute defines the start of the line on x-axis
• y1 attribute defines the start of the line on y-axis
• x2 attribute defines the end of the line on x-axis
• y2 attribute defines the end of the line on y-axis

SVG images can be places on HTML pages in one of the following ways which are not consistently understood by browsers (try) :

• using embed element
• using iframe element
• using object element

Create an HTML page that contains the shapes that you previously created.

Continue with more complex shapes such as a polygon:

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

and a polyline:

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

Find more practice on:

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

Practice 8c: Your own drawing

Finally, draw a picture, for example of a house or a simple map.

Created by: Jaana Holvikivi Updated: 30.10.2007