SVG, a 
recommendation from the World Wide Web Consortium, uses XML to describe graphics 
that are made up of lines, curves, and text.  

u oh! If you're one of the technical types, you definitely need to be aware that this book will not make you a better artist, 

author is very friendly!

ex:"He also told me in an email, "we already know that 
you know how to write," which is one of the nicest things anyone has ever told me."

"I also want to thank all the people, foremost among them my brother Steven, who, when I told them I was writing a book, believed in me enough to say, "Wow, that's great."" :)!

difference between raster graphics and vector graphics.

basic circle in svg:

<?xml version="1.0"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
 
<svg width="140" height="170"> 
<title>Cat</title> 
<desc>Stick Figure of a Cat</desc> 
 
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none" />
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933" /> 
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933" /> 
</svg> 
 
 
groups and transforming!
 
 <g id="whiskers"> 
    <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;" /> 
    <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;" /> 
</g> 
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)" /> 

path ex:

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

 "Move to coordinate (75,90). 
Draw a line to coordinate (65,90). Draw an elliptical arc with an x-radius of 5 and a 
y-radius of 10, ending back at coordinate (75,90)."  
 
upper lefthand-corner of browser is 0,0

this guy is the best! "These are set in stone, so you can take them for granite. "

whoops pause at 9:50 to see who this dude was. he seems lonely, just as i suspected.

 <!-- horizontal line --> 
 <line x1="30" y1="10" x2="80" y2="10" 
     style="stroke-width: 10; stroke: black;" /> 
 
color can be defined by word or rgb hex value

dash-array, for dotted lines

fill-rules:" 
<polygon style="fill-rule: nonzero; fill: yellow; stroke: black;" 
    points="48,16  16,96  96,48  0,48  80,96" /> 
 
<polygon style="fill-rule: evenodd;  fill: #00ff00; stroke    points="148,16  116,96  196,48  100,48  180,96" /> 
"

examples o far use inline styles....svg can also use document level and external style sheets.

<g> object groups

use tag to make object copies

can import raster files with <image>

on transformations, entire grid for object shifts, not the object.

lines or organized by moveto and lineto commands..also close path (M, L, and Z)

you can also add markers to paths

rectangle with gradient:

"<defs> 
<linearGradient id="two_hues"> 
    <stop offset="0%" style="stop-color: #ffcc00;"/> 
    <stop offset="100%" style="stop-color: #0099cc;"/> 
</linearGradient> 
</defs> 
 
<rect x="20" y="20" width="200" height="100" 
    style="fill: url(#two_hues);  stroke: black;"/> "


text is handled almost the same way as in css

text on a path:"<defs> 
<path id="short-corner" transform="translate(40,40)" 
    d="M0 0 L 30 0 A 30 30 0 0 1 60 30 L 60 60" 
    style="stroke: gray; fill: none;"/> 
 
<path id="long-corner" transform="translate(140,40)" 
    d="M0 0 L 50 0 A 30 30 0 0 1 80 30 L 80 80" 
    style="stroke: gray; fill: none;"/> 
</defs> 
 
<use xlink:href="#short-corner"/>  
<text style="font-size: 12;"> 
    <textPath xlink:href="#short-corner"> 
    This text is too long for the path. 
    </textPath> 
</text>  "

"Or, you might want to set a mood by showing an image as though viewed through a translucent curtain."

"nobody wants to see a graphic of a spring flower 
composed of pure vectors"

ahhhh!:" 
I created large 
numbers of stunningly ugly results during botched attempts to 
discover how a filter really works. You probably will, too. We'll just 
keep it as our little secret."

<filter id="glow"> 
    <feColorMatrix type="matrix"     [1] 
        values= 
            "0 0 0 0   0 
             0 0 0 0.9 0  
             0 0 0 0.9 0  
             0 0 0 1   0"/> 
    <feGaussianBlur stdDeviation="2.5"     [2] 
        result="coloredBlur"/>     [3] 
    <feMerge>     [4] 
        <feMergeNode in="coloredBlur"/> 
        <feMergeNode in="SourceGraphic"/> 
    </feMerge> 
</filter> 

changing gamma with svg!

"<feImage xlink:href="sky.jpg" result="sky"/> 
<feComponentTransfer in="sky" result="sky"> 
    <feFuncB type="gamma" 
        amplitude="1" exponent="0.2" offset="0"/> 
    <feFuncR type="gamma" 
        amplitude="1" exponent="0.707" offset="0"/> 
    <feFuncG type="gamma" 
        amplitude="1" exponent="0.707" offset="0"/> 
</feComponentTransfer> "

also you can do compositing in svg@!

animated svgs are the new hot shit

<rect x="10" y="10" width="200" height="20" stroke="black" fill="none">     
[1] 
 
    <animate     [2] 
        attributeName="width"     [3] 
        attributeType="XML"     [4] 
        from="200" to="20"     [5] 
        begin="0s" dur="5s"     [6] 
        fill="freeze" />     [7] 
</rect>   [8]"

there is no such thing as Psychic 
Vector Graphics

svg is also primitively scriptable(mouseover, mouseout, etc)