SVG – Tutorial on SVG files image, animation and editor

svg examples svg file svg tutorial

This SVG tutorial will serve as a complete guide for learning and using SVG file. We will also focus on some SVG editor (online and downloadable), and some JavaScript Libraries. We will discuss all these in great details along with several SVG examples. I will explain, why as a web designer, it is important for you to use this image format and how you can use SVG file to beautify your web design.

Who you should be!

I am making an assumption, that you are either a web designer looking to use this technology in your next project, or you are someone who have basic knowledge of HTML5/CSS3 and looking to add few more technological skill in your portfolio. You can be also curious web designer, who want to see how SVG file works with your web design.

Why you still, not an expert of SVG!

There can be several reason for this. Few reasons I noted.

  • It doesn’t worth so much attention, because it is just a image format.
  • Codes are complicated, and why should you take so much headache for an image.
  • You didn’t find enough resources for learning it.
  • The tutorials you found online, appears like robot text.
  • You see it as graphics designing material & not a web design issue.

I assume that you have overcome these barriers, and now you see a whole new world of possibilities with this so called image format. If you still have any doubt with SVG file check out some amazing examples which use this technology to attain cool effects.

SVG Examples for your inspiration

Before we start our What’s and How’s, you must check these cool SVG examples. I curated these in order to serve you with some web design inspiration. This will inspire you to follow this tutorial.

One of my SVG Examples : I masked an image with text, look in the example below.

Hope these SVG examples had removed dust from your creative ability. Run your creative skills and think, what you can do with it and how you may use it in designing websites. There are lots of JavaScript library available to make your task much easy, so that you may concentrate more on designing. You will learn about few JavaScript library, in later part of this tutorial.

Now let’s start with How’s and What’s

Did you ever try to zoom a image in your touch screen mobile or did you ever see an image on a very wide screen? If your answer is “yes”, then my next question is! Did you ever see a dirty squares in image like this!

svg examples svg file svg tutorial

These are normal images, which gets pixelated on high resolution and size. To overcome this, designers use vector image, which remains crisp and sharp and doesn’t lose quality on any screen size. The reason why I am saying you this is because, it is answer to most important question “What is this technology and how it is used ?”

Now I will give theoretical answer to this question.

What is SVG?

It stands for Scalable Vector Graphics. It defines the graphics in XML format, and doesn’t lose quality on any screen size. We can animate any of its element or attribute. It is recommended¬† by W3C and it a good alternative of flash. We can embed it directly in our web page, without the need of image tag <img/>.

SVG editor

Most of the web designers, who quit the thought of using SVG file, is because of its complicated codes. Well, you don’t have to write codes, and there are many downloadable and online svg editor, where you may create your image, and use the SVG file directly into your HTML document. Now we will talk about those available editors.

SVG editor (Downloadable)
  • Illustrator : Popular premium software from Adobe .
  • Inkscape : Popular free software for creating SVG file.
  • svgmaker : It is another popular software for creating SVG file.
  • Edraw : It has a trial version and a paid version.

I am not endorsing any of these software, I personally used above mentioned tools. You may choose to download any of these.

Online SVG editor

If you don’t want to download anything, then there are many online SVG editor, which you may use, some of the popular among those are as follows:

  • SVG-edit : Its the best editor online, that I have used. Try it out.
  • SVG-editor : It is a simple tool, where you may upload image and edit it. Try it out.
  • Drawsvg : It is another nice and popular tool, which you may try. Try it out.
  • Janvas : It has got a nice interface and its one of my favorite tool. Try it out.
  • Rapidtables : It is a simple tool, with simple interface. Try it out.

There are many more online SVG editor, I will write another post dedicated to extensive list of tools and editors.

Shapes in SVG

There are many designers, who want to have complete control over their design. Till now we haven’t written a single line of code. This part will explain you, how you may get your hands dirty by writing codes.

There are some predefined shapes in SVG

Rectangle <rect>

 

Circle <circle>

 

Ellipse <ellipse>

 

Line <line>

 

Polyline <polyline>

 

Polygon <polygon>

 

Path <path>

Now the codes:

As you are well acquainted with HTML5, it won’t be difficult for you to understand the code behind these basic shapes. There is starting and ending tag just like HTML

<svg></svg>

and the predefined shape is inside the tag, which has some attribute like width, height, x position, y position, strokes-width, color etc.

<svg width=“400” height=“110”>
<rect width=“300” height=“100” style=“fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)” />
</svg>
You should note that style attribute doesn’t have color property, instead “fill” is used with RBG color code. Start playing with these codes, to sharpen your skill. If you are dealing with complex shapes, you have many online SVG editor. It doesn’t sounds sane enough to code a complete image when you have practically make editors available for free.

JavaScript Libraries

There are many JavaScript libraries, which will aid you to do much more task, for enhancing your web design, there are some libraries, which deal with animation, I recommend you to follow this tutorial, in order to learn about animation. Here is the list of few important JavaScript libraries.

Some other good tutorials on this topic

We have covered the basic and huge part of available resources in this tutorial, in our next tutorial, we will focus more on stuffs like animation, effects, filters etc. I will also give you extensive list of available tools and guide on how to use those. Leave your feedback, I will clear your doubts, if any.

0 Vote

saurabh

Saurabh chaudhary is expert in web design, he writes about web design inspiration, bringing all beautiful websites together in a showcase.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *