SVG

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
 * Task list**

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

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
 * LINUX TERMINAL COMMAND MEANINGS** (see Terminal page for more detail)

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: code su -l # this is a lower case L code

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

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 code ls code

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

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

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


 * 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 code class MyIcon(CanvasIcon):   def __init__(self, size):        CanvasIcon.__init__(self, size=size, icon_name='REPLACE_HERE', xo_color=profile.get_color) code

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 code  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">     code

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

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:

code  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  Cat



 

 

 





<path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" stroke="black" fill="#ffcccc" />

Cat

code


 * 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

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: code <?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"> code

and end with: code code

All values are in pixels by default, unless otherwise specified

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

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

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

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

cx and cy specify the circle centre

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

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

code <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" /> code
 * POLYGONS**

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

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

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) code <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 */ } code

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

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

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: code body { margin: 5%; background-color: yellow; } code

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: code <svg ...>  all the cat markup goes here </g> code

Add the transform="scale" attribute to the group element, as follows: code  code

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

code <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)"/> code 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
 * Example**:



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 has seven inputs Move (M) to the starting point before drawing an arc A rx ry x-axis-rotation large-arc sweep x y
 * Arc (Elliptical)**

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




 * Challenge** Make a hamburger!
 * Challenge** Make pacman!



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)
 * Quadratic Bezier curve**

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

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
 * Smooth Quadratic Bezier double curves (follow Q with a T)**




 * Challenge**: Draw a vase



TUTORIAL 5: COLOUR GRADIENT
code <linearGradient id="two_hues"> <stop offset="0%" stop-color="red" /> <stop offset="100%" stop-color="yellow" /> </linearGradient>

<rect x="0" y="0" width="60" height="60" stroke="black" fill="url(#two_hues)" /> code



TUTORIAL 6: TEXT, INCLUDING TEXT WHICH FOLLOWS A PATH
code <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> code



TUTORIAL 7: ANIMATION
Shrinking rectangle: code <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" />

code

Two circles moving forever, one from right to left, the other from left to right code <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 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"/> code

Smiley change animation with mouth and eyes changing code

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

<line x1="30" y1="20" x2="30" y2="35" stroke="crimson" stroke-width="3" />

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

code

Rotate a cube:

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

</g> code



TUTORIAL 8: FILTERS
This one draws a flower with a drop shadow filter

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



<path d= "M 38 28 Q 35 40, 45 45 Q 60 50 55 60" stroke='green' stroke-width="3" fill='none' />

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

<circle cx="35" cy="25" r="5" stroke="none" stroke-width="1" fill="brown" />

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

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

code

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. Entity references begin with an ampersand (&) and end with a semi-colon, the entity name is in the middle (e.g., ).
 * add the entity declaration block inside the DOCTYPE.
 * replace all occurrences of colors within the body of the SVG.

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

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

6. REPLACEMENT FAILED TO WORK?? NOT SURE WHY

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

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