SVG, SVG, SVG
Continue to Page 1 2 3 4 5 6 7 >>
(right click and check 'view source' for the code)
How did I Fall into SVG Trap ?
it was 2004 august 15th and sunday and i was bored. i started to read websites. and i read a story about Pierre Bezier. he is an engineer who worked for renault and he developed a formula for the bodies of car to use in cam/cad program. this is in 1970s. and today it is 16 of august and i am still trying to understand the coordinate calculations of a polygon. thanks to Bezier, i dont know how i came to monday night.
About This Tutorial
Tutorial goes from simple to complex. Fisrt i give the frame then i expand the titles according to the frame. Frame content is to start, to draw, to animate and svg in detail.
1. how to start ?
svg will start with :
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg >
the content will come here
later
</svg>
2. how to continue ?
code will continue with < and /> and between these two; texts, images, geometrical shapes, animations,odd odd things,...will come.
2.1. continue with text
2.1.1. if we want to write a text with svg, first we define the frame of the text :
<svg xml:space="preserve" width="3in" height="2in" >
2.1.2.Then we define the content and style of the text :
<text style="fill:red;" y="15">i want a new cat for my toys</text> </svg>
2.1.3. if i write a svg code called minako for a text :
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg xml:space="preserve"
width="3in" height="3in">
<text
style="fill:red;" y="15">i
want a new cat for my toys</text>
</svg>
2.1.4. to publish a svg code in html insert the sentence below after <body tag :
<embed src="minako.svg" width="200" height="50" type="image/svg-xml"></embed>
2.1.5. result of minako.svg code :
Next page : How to draw rectanges in svg