SVG

Well lately I've began using SVG images files. In fact, it is almost an addiction. They're pretty nice. Many places let you use this format, and if I know a place isn't going to let me use it, I'll create an SVG file and then use Inkscape to convert it to a .png or something else. In fact, that is what I did for almost all of the images on this site.

This page is not really intended for everyone to have access to, but rather just as notes for me. But if you happen to stumble across it and find it useful, then all the better.

Note that most of these examples come from http://www.w3schools.com/svg/. This is a very good site, from what I've seen so far.

Drawing a Circle

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

Drawing a Rectangle

<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
<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"/>

Drawing an Ellipse

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

Drawing a Line

<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>

Drawing a Polygon

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

or a polyline:

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

Drawing a Path

It's complicated, but powerful… You can draw things like spirals and stuff.

Drawing Text

<text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24"> It's SVG! </text>

A Gradient

<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs><ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>

The Big Picture

<?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"><defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs><ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/></svg>