Task list
Task 1: Replace the xo icon with a different icon
Task 2: Make your own svg graphic, a cat
Task 3: Create a web page displaying half a dozen simple icons you have made yourself

Sample SVG page created by the teacher: http://www.users.on.net/~billkerr/i/svg.htm
Download Opera browser for best view of SVG


Tutorial 1: How to make basic shapes
Tutorial 2: How to display svg shapes on a web page using style (css)
Tutorial 3: Scaling, Rotation
Tutorial 4: Paths
Tutorial 5: Colour Gradient
Tutorial 6: Text, including text which follows a path
Tutorial 7: Animations
Tutorial 8: Filters

LINUX TERMINAL COMMAND MEANINGS (see Terminal page for more detail)
su = super user or switch user --> administration rights (long term)
sudo = administration rights for just the current command (one off)
ls = lists files (black) and folders (blue)
pwd = print working directory, shows where you are
cd = change directory
cp = copy specified files, you need to specify source destination if copying from one folder to another
vi fileName: enter a text editor
nano fileName: enter another text editor

TERMINOLOGY
bash = Bourne Again Shell, a command language interpreter, the most popular linux shell
shell = a program which interprets commands (interpreter)


SVG Task 1: Replace the xo icon with a different icon

1) Start the Terminal Activity and enter these commands:
su -l # this is a lower case L

2) Navigate to the device folder
cd /usr/share/icons/sugar/scalable/device/

3) View the files in the folder and write down the names of some svg files you would like to use as a replacement for the xo icon
ls

4) Navigate to the home folder
cd /usr/share/sugar/shell/view/home

5) Check that the file we want, MyIcon.py, is there
ls

6) Use vi (or your favorite text editor) to open MyIcon.py
vi MyIcon.py

Tip: Some basic commands for using the vi editor:

i (enter insert mode)

esc (exit insert mode)

:w (write/save your changes)

:q (quit vi)

:q! (quit vi without saving, in case you have mucked up)


7) Change the icon_name to the replacement you have chosen
class MyIcon(CanvasIcon):
    def __init__(self, size):
        CanvasIcon.__init__(self, size=size,
                            icon_name='REPLACE_HERE',
                            xo_color=profile.get_color())

8) Restart Sugar (by pressing ctrl + alt + erase)

9) Show new icon to the teacher, to get your marks



SVG Task 2: Make your own svg graphic, a cat

1. Cut and paste this markup into an HTML editor (eg. HTMLKit) or a text editor (eg. notepad) or take the version from the L drive, Icon_template.generic.svg
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="55px" height="55px">
<g id="Icon">
<circle fill="#FFFFFF" stroke="#666666" stroke-width="3.5" cx="27.5" cy="27.5" r="22.5"/>
</g>
</svg>

Tips:

To edit the file use HTML-Kit or notepad
To view the svg graphic load the svg file in a modern browser (NOT IE rubbish, but firefox, chrome or opera will do the job)

SVG markup works from a co-ordinate system, which is x=0, y=0 from the top left hand corner

catGraph.jpg
DRAW A DIAGRAM OF THE CAT ON GRAPH PAPER SHOWING CO-ORDINATES

2. Drawing the cat step by step. Edit the template to create the following:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="140px" height="170px">
<title>Cat</title>
 
<!-- face -->
<circle fill="none" stroke="black" cx="70" cy="95" r="50"/>
 
<!-- eyes -->
<circle fill="red" stroke="black" cx="55" cy="80" r="5"/>
<circle fill="red" stroke="black" cx="85" cy="80" r="5"/>
 
<!-- whiskers -->
<line x1="75" y1="95" x2="135" y2="85" stroke="black" />
<line x1="75" y1="95" x2="135" y2="105" stroke="black" />
 
<line x1="65" y1="95" x2="5" y2="85" stroke="black" />
<line x1="65" y1="95" x2="5" y2="105" stroke="black" />
 
<!-- ears -->
<polyline points="108 62, 90 10, 70 45, 50 10, 32 62" stroke="black" fill="none" />
 
<!-- mouth -->
<polyline points="35 110, 45 120, 95 120, 105 110" stroke="red" fill="none" stroke-width="3" />
 
<!-- nose -->
<!-- M for move, L for line A for arc, xradius 5, yradius 10, ending at (75,90) -->
<path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" stroke="black" fill="#ffcccc" />
 
<!-- text -->
<text x="60" y="165">Cat </text>
 
</svg>


Task 3: Create a web page displaying half a dozen simple icons you have made yourself


TUTORIAL 1: HOW TO MAKE VARIOUS BASIC SHAPES


Visit http://www.users.on.net/~billkerr/i/svg.htm to see some simple examples displayed
SmallGrid12x12.gif

Method: All x and y values or co-ordinates start from zero in top left hand corner of the graph grid.

Note that all files must begin with something like:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="60px" height="60px">

and end with:
</svg>

All values are in pixels by default, unless otherwise specified

LINE
<line x1="5" y1="50" x2="50" y2="5" stroke="crimson" stroke-width="10" stroke-opacity="0.5" stroke-dasharray="9 3" />

stroke-opacity varies between 0 (transparent) and 1 (opaque)
stroke-dasharray="9 3" creates a 9px line followed by 3px gap, repeated

RECTANGLE
<rect x="10" y="10" width="35" height="10" stroke="black" stroke-width="1" fill="red" />

CIRCLE
<circle cx="37.5" cy="27.5" r="5" stroke="black" stroke-width="1" fill="red" />

cx and cy specify the circle centre

ELLIPSES
<ellipse cx="27.5" cy="27.5" rx="20" ry="15" stroke="black" stroke-width="1" fill="yellow" fill-opacity="0.5" />

fill-opacity varies between 0 (transparent) and 1 (opaque)

POLYGONS
<polygon points="30,10 37,20 55,20 45,35 50,50 30,40 10,50 18,35 5,20 25,20"
stroke="black" stroke-width="1" fill="yellow" />

To draw a star I first drew it on graph paper and then evaluated the co-ordinates for each point
There must be an even number of co-ordinates
You don't have to return to the starting point, this is automatic

POLYLINES
<polyline points="10,50 10,10 30,40 50,10 50,50"
stroke="green" stroke-width="10" fill="none" />

I used this feature to draw the letter M
Specify fill="none" to avoid inconvenient filling in places you don't want


TUTORIAL 2: HOW TO DISPLAY SHAPES ON A WEB PAGE, WITH STYLE


Example here: http://www.users.on.net/~billkerr/i/svg.htm

Setup the style in the head section of the web page:

The style below creates a class called 'thumbnail' which controls the appearance of your images (layout across the page, width and height, border, margin, padding, text annotations)
<style type="text/css">
 
.thumbnail {
float: left;
width: 60px; /* width of my images */
height:60px;
border: 3px solid #ccffcc; /* 3 pixel border, solid, cadet blue colour */
margin: 0 10px 10px 0; /* clockwide order, top, right, bottom, left */
padding: 5px;
text-align: center;
color: #a52a2a; /* brown */
}
</style>

To complete the picture layout In the body section write a series of divs, as follows:

<div class="thumbnail">
<object type="image/svg+xml" data="lines.svg">
Browser does not support SVG files!
</object>
</div>

In this example the svg files are in the same folder as the web page. Create a path if they are in a sub folder

To alter the general appearance of your page add some more style in between the style tags in the head section.
For example:
body {
 margin: 5%;
 background-color: yellow;
 }

The above will act on the body (which is the whole page) to put in a margin of 5% and background colour = yellow



TUTORIAL 3A SCALING


The cat in Task 2 is drawn on this canvas size: width="140px" height="170px". We want to scale that to fit in a 60x60 grid.

Calculate the scale factor = 60/170 = 0.35
Group all the xml markup for the cat:
<svg ...>
<g>
all the cat markup goes here
</g>
</svg>

Add the transform="scale()" attribute to the group element, as follows:
<g transform="scale(.35)">

TUTORIAL 3B ROTATION


Draw a shape, eg. a square
To rotate it, copy the markup and then add transform="rotate(angle, centerX, centreY)"
angle = angle of rotation (rotation is clockwise)
centerX, centreY = pivot point or centre of rotation

Example:
<rect x="10" y="10" width="20" height="20" fill="red" />
<rect x="10" y="10" width="20" height="20" fill="orange" transform="rotate(45, 30, 30)"/>
The first line draws a small square
The second line rotates the square 45 degrees clockwise around the (30,30) co-ordinate and changes the colour from red to orange


TUTORIAL 4 PATHS


d= data
M= move
L = line to
A = Arc (elliptical)
Q = Quadratic Bezier
T = smooth Quadratic Bezier
C = Cubic Bezier
S = smooth Cubic Bezier

Arc (Elliptical)
Arc has seven inputs
Move (M) to the starting point before drawing an arc
A rx ry x-axis-rotation large-arc sweep x y

rx ry are the x and y radius of the ellipse
x-axis-rotation: Rotation in degrees of the ellipse measured from the x axis
large-arc: small arc (=0) or large arc (=1) of the ellipse
sweep in negative, anti clockwise (=0) or positive clockwise (=1) direction
x y: end point

This markup will draw pacman on a 60px by 60px canvas:
 <path d="M 50 30 A 20 10 0 1 1 45 25" fill="none" stroke="brown"/>
 <line x1="50" y1="30" x2="30" y2="30" stroke="brown" />
 <line x1="45" y1="25" x2="30" y2="30" stroke="brown" />

I_6_tt106-web.png

Challenge Make a hamburger!
Challenge Make pacman!

shapes-f10.svg.png

Quadratic Bezier curve
Q has 4 inputs
Q control point, end point
Move to the starting point before drawing the curve
path d= "M 30 100 Q 130 10, 230 100"
Move to point 30, 100 (point A); Control point is 130, 30 (point B); End point is 230, 100 (point C)

bezier_ex1.png
Point D is half way between A and B; point E is half way between B and C. Point F, which touches the curve is half way between D and E


Smooth Quadratic Bezier double curves (follow Q with a T)
path d= "M 30 100 Q 130 10, 230 100 T 430 100"
M start point (point A) Q control point (point B), endpoint (point C) T next endpoint (point E)
The control point for T (point D) is the mirror image or reflection of the control point for Q

bezierQT.png


Challenge: Draw a vase
page045.jpg



TUTORIAL 5: COLOUR GRADIENT



<defs>
<linearGradient id="two_hues">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="yellow" />
</linearGradient>
</defs>
 
<rect x="0" y="0" width="60" height="60" stroke="black" fill="url(#two_hues)" />



TUTORIAL 6: TEXT, INCLUDING TEXT WHICH FOLLOWS A PATH


<path id="bezier" d="M10 50 Q 50 50 50 10" fill="none" stroke="none" />
<text font-size="12" font-family="arial">
<textPath xlink:href="#bezier">
bezier text
</textPath>
</text>


TUTORIAL 7: ANIMATION


Shrinking rectangle:
<rect x="5" y="10" width="50" height="10" stroke="black" fill="none">
<animate
attributeName="width"
attributeType="XML"
from="50" to="10"
begin="0s" dur="5s"
fill="freeze" />
 
</rect>

Two circles moving forever, one from right to left, the other from left to right
<circle cx="10" cy="10" r="5" stroke="black" fill="#ccf">
<animate attributeName="cx" attributeType="XML" from="10" to="50" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite"/>
<animate attributeName="cy" attributeType="XML" from="10" to="50" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite"/>
</circle>
 
<circle cx="50" cy="10" r="5" stroke="black" fill="#cfc">
<animate attributeName="cx" attributeType="XML" from="50" to="10" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite"/>
<animate attributeName="cy" attributeType="XML" from="10" to="50" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite"/>
</circle>

Smiley change animation with mouth and eyes changing
<!-- eyes -->
<circle cx="20" cy="15" r="2" stroke="black" stroke-width="1" fill="red" >
<animate
 attributeName="r"
 attributeType="XML"
 from="2" to="5"
 begin="0s" dur="10s"
 fill="freeze"
 repeatCount="indefinite"/>
 
</circle>
 
<circle cx="40" cy="15" r="2" stroke="black" stroke-width="1" fill="red" >
<animate
 attributeName="r"
 attributeType="XML"
 from="2" to="5"
 begin="0s" dur="10s"
 fill="freeze"
 repeatCount="indefinite"/>
 
</circle>
 
<!-- nose -->
<line x1="30" y1="20" x2="30" y2="35" stroke="crimson" stroke-width="3" />
 
<!--mouth -->
<polyline points="10,30 15,40 45,40 50,30"
stroke="green" stroke-width="4" fill="none">
 
<animate
 attributeName="points"
 attributeType="XML"
 from="10,30 15,40 45,40 50,30" to="10,50 15,40 45,40 50,50"
 begin="0s" dur="10s"
 fill="freeze"
 repeatCount="indefinite"/>
 
</polyline>

Rotate a cube:

<g transform= "translate(30,30)">
<polygon points="-10,-10 10,-10 10,10 -10,10" stroke="black" stroke-width="1" fill="red">
 <animateTransform
 attributeName="transform" type="rotate"
 attributeType="XML"
 from="1" to="360"
 begin="0s" dur="5s" repeatCount="1000"
 fill="freeze" />
 
 
</polygon>
 
 
 
<polygon points="-10,-10 0,-20 20,-20 10,-10" stroke="black" stroke-width="1" fill="yellow">
 <animateTransform
 attributeName="transform" type="rotate"
 attributeType="XML"
 from="1" to="360"
 begin="0s" dur="5s" repeatCount="1000"
 fill="freeze" />
 
</polygon>
 
 
<polygon points="10,-10 20,-20 20,0 10,10" stroke="black" stroke-width="1" fill="green">
 <animateTransform
 attributeName="transform" type="rotate"
 attributeType="XML"
 from="1" to="360"
 begin="0s" dur="5s" repeatCount="1000"
 fill="freeze" />
 
</polygon>
</g>


TUTORIAL 8: FILTERS


This one draws a flower with a drop shadow filter

<filter id='drop-shadow'>
 <feGaussianBlur in='SourceAlpha' stdDeviation='2' results='blur' />
 <feOffset in='blur' dx='4' dy='4' result='offsetBlur' />
 <feMerge>
 <feMergeNode in='offsetBlur' />
 <feMergeNode in='SourceGraphic' />
 </feMerge>
</filter>
 
<g id='flower' filter='url(#drop-shadow)'>
<!-- stem -->
<path d= "M 38 28 Q 35 40, 45 45 Q 60 50 55 60" stroke='green' stroke-width="3" fill='none' />
<!-- shoot -->
<path d= "M 45 45 Q 50 30, 60 30" stroke='green' stroke-width="2" fill='none' />
<path d= "M 48 46 Q 50 30, 60 30" stroke='green' stroke-width="2" fill='none' />
<!-- centre -->
<circle cx="35" cy="25" r="5" stroke="none" stroke-width="1" fill="brown" />
 
<g id='petal'>
<path d= "M 35 20 Q 27 15, 35 5" fill="yellow" stroke="black"/>
<path d= "M 35 20 Q 43 15, 35 5" fill="yellow" stroke="black"/>
</g>
<!-- petals -->
<use xlink:href='#petal' transform="translate(0,25)"/>
 
<use xlink:href='#petal' transform="rotate(45 34 26)"/>
<use xlink:href='#petal' transform="rotate(90 35 25)"/>
<use xlink:href='#petal' transform="rotate(135 35 25)"/>
 
<use xlink:href='#petal' transform="rotate(-45 34 26)"/>
<use xlink:href='#petal' transform="rotate(-90 35 25)"/>
<use xlink:href='#petal' transform="rotate(-135 35 25)"/>
</g>
 
</svg>














3. Tweak the size, outline colour and fill colour by changing the hex values (RRGGBB), hex numbers vary from 0-9 and then A-F
(ask teacher for explanation)

link to hex values tutorial: Color Charts//



SVG Task yyy: Bonus marks

Download inkscape (URL below) and make your own SVG graphic.
You will need to provide convincing evidence that you have done this




SVG Task xxx: Replace xo icon with a more interesting graphic

Teacher has placed some svg icons on the L drive. To view them load in a browser
Pick one which you like and work out how to replace the sugar home page icon with it
Show to the teacher to prove you have done it


FOR LATER


5. Sugar uses "entities" in order to dynamically change icon colors.
  • add the entity declaration block inside the DOCTYPE.
  • replace all occurrences of colors within the body of the SVG.
Entity references begin with an ampersand (&) and end with a semi-colon (;), the entity name is in the middle (e.g., "&stroke_color;").

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
     <!ENTITY stroke_color "#666666">
     <!ENTITY fill_color "#FFFFFF">
 ]>
 <svg xmlns="http://www.w3.org/2000/svg" width="55" height="55">
     <rect x="5" y="5" width="45" height="45" stroke="&stroke_color;" fill="&
fill_color;" stroke-width="3.5"/>
 </svg>

Your SVG icon is now Sugar-enabled, this means dynamic colorization of sugar icons

6. REPLACEMENT FAILED TO WORK?? NOT SURE WHY


reference:
http://wiki.laptop.org/go/Making_SVG_Icons_for_Sugar

http://www.inkscape.org/
(free download available of an svg graphics editor)