SVG – Tutorial on SVG files image, animation and editor
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.
- Section separator : Used for separating various sections of a web page.
- Gaming website : Look at this gaming portal, which uses, SVG animation and effects to attain cool user interface.
One of my SVG Examples : I masked an image with text, look in the example below.
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!
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/>.
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
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
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)” />
- lightweight library for manipulating and animating
- A lightweight graphics library
- Lazy line painter
Some other good tutorials on this topic
- Tutorial by Jakob Jenkov
- Tutorial by Hongkiat
- Tutorial by Peter Colling Ridge
- Tutorial by Chris Coyier
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