What is an SVG file?

Hi

You may also have come across SVG files on web pages and wondered what these files are. These files are based on code; that is, they're made with code, but they give us an image! which is interesting in its own way.

The advantage of these files is their small size compared to their high capability, and you can create vector and even 3D shapes with them that never change in quality when you zoom in and enlarge them. To get better acquainted with these files, let me give an example. Consider the image below:

The image you see above is a GIF file. Now I'll enlarge this image:

As you can see, the image has become annoying!

Now we want to create an SVG file with code.

Save the code below in a text file and change the file extension to SVG.

<svg width="16" height="16" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M 150,0 a 150,150 0 0,1 106.066,256.066 l -35.355,-35.355 a -100,-100 0 0,0 -70.711,-170.711 z" fill="#3d7fe6"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 150 150" to="360 150 150" begin="0s" dur="1s" fill="freeze" repeatCount="indefinite" /> </path> </svg>

Now drag this file into your web browser, and something like the shape below will be shown:

Yes, you got it right! This is the same shape shown at the top of the Chrome browser.

Now look at the image below:

This image is an enlarged version of the previous one! Without any loss of quality...

Now look at this one:

I've edited this image; as you can see, the color has changed to black, the inside of the semicircle has become thicker and the rotation speed has slowed down. You can see its code below:

<svg width="60" height="60" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M 150,0 a 150,150 0 0,1 106.066,256.066 l -35.355,-35.355 a -130,-130 0 0,0 -70.711,-170.711 z" fill="#444"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 150 150" to="360 150 150" begin="0s" dur="4s" fill="freeze" repeatCount="indefinite" /> </path> </svg>

Now try editing this code yourself with a code editor or any other program, and enjoy!

The future of the web is in the hands of these files...

Best of luck...