06-24-2011, 09:39 PM
Today I am going to teach you about SVG.
What is SVG?
SVG stands for Scalable Vector Graphics. With SVG you can add effects to pictures, like a Gaussian blur for example. You can also make shapes with it. Most browsers support SVG.
Why use it?
This is comes in handy if you do not own Photoshop and cannot do blurs or shapes.
Basics.
The tag for SVG is <svg>
The first thing you do is set up the parameters and the version. We are going to use version 1.1. It's going to look like this.
Shapes.
There are seven different shapes you can do.
Rectangle <rect>
Circle <circle>
Ellipse <ellipse>
Line <line>
Polyline <polyline>
Polygon <polygon>
Path <path>
Rectangle
We will start with rectangle, as it will be the easiest.
first me have to think about what we want the parameters to be. Let's do 200x100.
The tag will look like this.
The full code will look like this.
Now let's learn about color. To fill the rectangle in with color you use style="fill:rgb(0,0,0)".
So if you want to make it red, you do this.
Now for the final thing, borders.
To do this we use
stroke-width:1;stroke:rgb(0,0,0)
The rgb is used the same as before. To put the stroke and the fill together you use ;. So far we have this.
Now you have a red rectangle with a border!
Circle/Elipse.
Making these are kind of simiral, the only difference is we don't use Width and Height, we use cx, cy, and r.
cx and cy are defining the center of the circle in x,y coordinates. It's going to place it on the page.
r is defining the radius of the circle.
You use stroke and fill the same way.
This is what it will look like.
Now on to ellipses
It's basically the same thing, but you have rx and ry. This is going to be the width and the height.
It should look like this.
Done with this section!
I don't want the thread to be too long, but if you want to learn the rest of the shapes there will be a link at the bottom.
Picture effects.
Gaussian Blur.
First you must define an SVG Filter with a <defs> tag.
The second thing you have to do is add a <filter> tag.
You have to say which filter you are using so, <filter id="Gaussian_Blur">
Now you will add something along the lines of this.
So. feGaussianBlur is basically defining what it's going to do the picture. in="SourceGraphic" is defining what is going to be effected by the Gaussian Blur.
stdDeviation is how blurry it's going to make the picture.
Next you have to add the filter to the shape/picture. You do this by inserting filter:url(#Gaussian_Blur)"
Now, for some reason, you can't do Gaussian Blurs using rgb so you have to do fill:#ff0000 Like,
Let's use our circle from earlier to make an example of the Gaussian Blur.
Pretty cool right?
Gradients.
Sorry guys, I have to go to sleep. It's freakin late and I have been working on this for hours. I will have the links to how to do it. Tomorrow I will write my own.
Linear.
http://www.w3schools.com/svg/svg_grad_linear.asp
Radial.
http://www.w3schools.com/svg/svg_grad_radial.asp
Will add links to shapes tommorrow. I'm off. Hope you enjoyed.
What is SVG?
SVG stands for Scalable Vector Graphics. With SVG you can add effects to pictures, like a Gaussian blur for example. You can also make shapes with it. Most browsers support SVG.
Why use it?
This is comes in handy if you do not own Photoshop and cannot do blurs or shapes.
Basics.
The tag for SVG is <svg>
The first thing you do is set up the parameters and the version. We are going to use version 1.1. It's going to look like this.
Quote:<svg width="100%" height="100%" version="1.1">
Shapes.
There are seven different shapes you can do.
Rectangle <rect>
Circle <circle>
Ellipse <ellipse>
Line <line>
Polyline <polyline>
Polygon <polygon>
Path <path>
Rectangle
We will start with rectangle, as it will be the easiest.
first me have to think about what we want the parameters to be. Let's do 200x100.
The tag will look like this.
Quote:<rect width="200" height="100"/>
The full code will look like this.
Quote:<svg width="50%" height="100%" version="1.1">
<rect width="200" height="100"/>
</svg>
Now let's learn about color. To fill the rectangle in with color you use style="fill:rgb(0,0,0)".
So if you want to make it red, you do this.
Quote:<svg width="50%" height="100%" version="1.1">
<rect width="200" height="100"
style="fill:rgb(250,0,0)"/>
</svg>
Now for the final thing, borders.
To do this we use
stroke-width:1;stroke:rgb(0,0,0)
The rgb is used the same as before. To put the stroke and the fill together you use ;. So far we have this.
Quote:<svg width="100%" height="100%" version="1.1">
<rect width="200" height="100"
style="fill:rgb(250,0,0);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>
Now you have a red rectangle with a border!
Circle/Elipse.
Making these are kind of simiral, the only difference is we don't use Width and Height, we use cx, cy, and r.
cx and cy are defining the center of the circle in x,y coordinates. It's going to place it on the page.
r is defining the radius of the circle.
You use stroke and fill the same way.
This is what it will look like.
Quote:<svg width="50%" height="100%" version="1.1">
<circle cx="250" cy="120" r="100"style="fill:rgb(250,0,0);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>
Now on to ellipses
It's basically the same thing, but you have rx and ry. This is going to be the width and the height.
It should look like this.
Quote:<svg width="50%" height="100%" version="1.1">
<ellipse cx="250" cy="120" rx="50" ry="100" style="fill:rgb
(250,0,0);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>
Done with this section!
I don't want the thread to be too long, but if you want to learn the rest of the shapes there will be a link at the bottom.
Picture effects.
Gaussian Blur.
First you must define an SVG Filter with a <defs> tag.
The second thing you have to do is add a <filter> tag.
You have to say which filter you are using so, <filter id="Gaussian_Blur">
Now you will add something along the lines of this.
Quote:<feGaussianBlur in="SourceGraphic" stdDeviation="3"/>
So. feGaussianBlur is basically defining what it's going to do the picture. in="SourceGraphic" is defining what is going to be effected by the Gaussian Blur.
stdDeviation is how blurry it's going to make the picture.
Next you have to add the filter to the shape/picture. You do this by inserting filter:url(#Gaussian_Blur)"
Now, for some reason, you can't do Gaussian Blurs using rgb so you have to do fill:#ff0000 Like,
Quote:style="fill:#ff0000;stroke:black;
stroke-width:2"
Let's use our circle from earlier to make an example of the Gaussian Blur.
Quote:<svg width="50%" height="100%" version="1.1">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
</defs>
<circle cx="250" cy="120" r="100"style="fill:rgb
(250,0,0);stroke-width:1;
stroke:rgb(0,0,0);filter:url(#Gaussian_Blur)"/>
</svg>
Pretty cool right?
Gradients.
Sorry guys, I have to go to sleep. It's freakin late and I have been working on this for hours. I will have the links to how to do it. Tomorrow I will write my own.
Linear.
http://www.w3schools.com/svg/svg_grad_linear.asp
Radial.
http://www.w3schools.com/svg/svg_grad_radial.asp
Will add links to shapes tommorrow. I'm off. Hope you enjoyed.
![[Image: Untitled-1-4.jpg]](http://i1080.photobucket.com/albums/j322/anarcee/Untitled-1-4.jpg)