Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[TUT]Learn to edit and make pics in HTML. SVG coding language. Easy to learn! [TUT]
#1
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.

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! Blackhat
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. Blackhat
Reply
#2
Good tutorial, pretty cool! Good job.
[Image: Untitled-1-4.jpg]
Reply
#3
(06-24-2011, 09:40 PM)Slurms Makenzi Wrote: Good tutorial, pretty cool! Good job.

Thanks for the feedback. I just felt that SVG was very underused.
Reply


Possibly Related Threads...
Thread Author Replies Views Last Post
  List of Top Websites to Learn How to Code tk-hassan 0 105 06-13-2021, 11:29 PM
Last Post: tk-hassan
  Top 10 Scripting Languages You should Learn in 2021 tk-hassan 0 102 04-15-2021, 02:36 AM
Last Post: tk-hassan
  Website and coding skills KingOfHunt3rs 11 2,480 12-13-2019, 02:20 AM
Last Post: emma162
  [Tut] Build a website [Easy] supermanden 2 811 05-19-2014, 04:31 AM
Last Post: vahaa
  [tut] I Want to Make a Website, but, I don't know What to Do Grizzly 2 1,277 04-16-2014, 08:51 AM
Last Post: cracker007

Forum Jump:


Users browsing this thread: 1 Guest(s)