What are SVG files used for?

SVG images can be used for websites, paper prints, stickers or stencils (cricut, scanncut, ect), video games and many other areas.

What are the advantages of SVG files?

An SVG image can be enlarged as much as you want without loss of quality. The size of an SVG file is small unlike a PNG or JPG. You can also edit them manually.

Can I edit an SVG file with a text editor?

Yes, but only simple shapes. For more complicated shapes, you need to use a software dedicated to the creation and editing of SVG.

What is in an SVG file and how to manipulate it?

Summary

1. Open an SVG file

To open an SVG file, you need a suitable text editor like :

Notepad : Simple and minimalist.
SublimText : My favorite, because it is simple and offers automatic input when you type a word.
NotePad++ : A very good choice on Windows.
TextEdit : If you're on Apple, this is perfect.
Notes : Second choice if you are still on Apple.

As you may have noticed, I did not list the famous Word editor, because it will not work with this format (I promise, I tested it).

All you have to do is make your choice, then right click on your SVG file and open it with it.

Once you have done this, you will see something that looks like this :

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
    <circle fill="#0C3157" cx="50" cy="50" r="50"/>
    <rect fill="#75B4F0" x="40" y="40" height="20" width="20"/>
</svg>

This example is deliberately simple, because you can find many elements that are complex to use.

Here is what this SVG code looks like visually :

Having personally opened hundreds or even thousands of SVG files, I can tell you that some of them are scary. However, the code you find inside is perfectly logical to build your image.

Unlike SVG files, a JPG or PNG image is impossible to edit. I explain in the next part how to play with this code like the image above.

2. Creating and editing an SVG file by hand

The serious stuff begins! You have tens or thousands of lines of SVG code in your hands and you don't understand anything? Well, don't worry, I'll explain what you need to know.

To begin with, an SVG file is made up of elements that will create shapes. To list some of them, we have :

Element	Shape	Edition
<rect>	Rectangle	Simple
<circle>	Circle	Simple
<path>	Line drawn with a feather	Complicated

Find the complete list of elements that can be found in an SVG on this link.

The objective here is not to explain how each element works, but rather to understand the general functioning of an SVG.

If you have an SVG that represents more than 1000 lines of code, it would be wiser to use a specialized SVG software to edit it.

We continue with explanations on the example taken on how to open a SVG file.

Creating the <svg> element

Any SVG contains a <svg> tag at the beginning and </svg> at the end. This element is a bit of a base for a file where we'll fill in information like:

The height of the grid for the shapes we're going to include after : height="100".
The width of the grid for the shapes that we will include after : width="100".
The xmlns : it is there because we like it, this value is always the same.

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
	...
</svg>

Visually, this code does not display anything. We get an empty image, because we put no element inside. So we will insert a circle in the next part.

Editing the <circle> element

To add a circle, you need to define information like:

The fill color : fill="#0C3157". Here I use a hexadecimal color #0C3157 but I could have very well used a simple primary color like red.
The X position of the centered point of the circle according to the width defined on the <svg> element : cx="50".
The Y position of the centered point of the circle as a function of the height defined on the <svg> element: cy="50".

I chose to place my circle at the center by doing the math, height divided by 2. Same for the width.

So with these explanations, I can write my circle like this :

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
    <circle fill="#0C3157" cx="50" cy="50" r="50"/>
</svg>

Visually, I finally get a result that shows me my blue circle centered :

If you want to use this SVG on a website, find out how to animate an SVG with a circle.

Editing the <rect> element

To add a rectangle, you need to define information like:

The fill color : fill="#75B4F0". Here I use a hexadecimal color #75B4F0 but I could have very well used a primary color like red.
The X position of the point at the top left of the rectangle : x="40". Relative to the width I defined for the <svg> element.
The Y position of the top left point of the rectangle : y="40" relative to the height I defined for the <svg> element.
The height of my rectangle : height="20" relative to the height I defined for the <svg> element.
The width of my rectangle : width="20" relative to the width I defined for the <svg> element.

So I can write my rectangle on my previously defined circle like this:

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
    <circle fill="#0C3157" cx="50" cy="50" r="50"/>
    <rect fill="#75B4F0" x="40" y="40" height="20" width="20"/>
</svg>

Visually, I get a circle and a rectangle :

Some SVG files can be built entirely by hand with a good knowledge of these elements.

To build much more advanced images, you will need software designed specifically for SVG file creation. This is what we will see in the next part.

3. Editing an SVG file with software

Let's say you need to build an SVG image of a city with a lot of details. Doing it by hand would simply be a waste of time. To accomplish this task, you will need an SVG software like :

Software	Price	Use
Inskape	Free	Complicated to take in hand. Available on linux.
Abode Illustrator	Paying	Designed for designers. Complicated to handle.
Sketch	Paying	Designed for designers. Even more complicated.
Canva	30 days free and paid	Simple

4. Where to find SVG or PNG files for free ?

There are many websites to find SVG and PNG files for free.

For this part, I will not make a list of sites to visit, but 1 recommendation.

Many files, even if they are SVG files, can be designed in a "de-optimized" way. In other words, they have been created messily. For example:

Some SVG shapes may contain many points, when they could be simplified with a more suitable element and thus reduce the code.
Some SVG files contain JPG images (yes, it is possible to include a JPG in an SVG...). This makes the SVG format completely useless.
Some SVGs have been designed in a rudimentary way. That is to say, without a grid and without precise alignment.

To get optimized SVG files with a PNG converter, I invite you to visit our SVG library with +3000 images.

5. Converting an SVG file

Sometimes a tool or website doesn't support SVG format and asks you for a JPG or PNG file instead. So you are looking for a way to convert this file.

The recommended method is to open your SVG file with a software as described here and then export this file to the desired format.

Use online converters only as a last resort, as they may distort your SVG image.

Master SVG files like a pro