What is SVG-graphics and how to work with it

We often see formats such as JPG, PNG and GIF, which are used both on websites and in social networks. They are obtained by creating bitmap graphics - these are photos, screenshots, and various animated files. Along with these formats, there are many more similar ones, one of which is SVG.

It is also used to display graphics, but not raster, and vector.

What is SVG

SVG (Scalable Vector Graphics) is a type of graphics, which is formed using geometric objects: lines, circles, rectangles, curves and other elements.

The aggregate of such details can give out almost any image. For example, it can be an icon of the social network Instagram:

The impetus for the development of this language markup was first given by the World Wide Web Consortium, which in 1999 was better known as the W3C. W3C also gave the concept of SVG - a language markup for creating two-dimensional graphical interfaces and images.

Today, SVG is used on all modern sites - it can be as icons for social networks, and full-size illustrations. But more often it is logos and various icons.

Let's look at why is popular  svg download.

Advantages of SVG

One of the key features of the SVG format is its scalability. While enlarging pictures in JPG and PNG can cause a drop in quality, with the SVG format, everything will remain the same. You can enlarge a vector image 100 times, it will still look the same. Therefore, SVG-images are well displayed at the highest resolutions, without loss of quality, and are ideal for adaptive websites.

Another feature of SVG is its customization. Suppose we need to upload a red icon to the site, but there is only a black one at hand. If it's a JPG or PNG bitmap image, you'll have to make a lot of effort to change the color of the icon. In the case of SVG, just open a graphics editor that supports vector images, such as Figma, and change the icon color in one click. Just as if you were changing the color of a simple element. 

Also SVG 3d image can be opened in HTML and CSS, which means that we can directly through the code change the object itself and its color.

All these advantages are secured by the weight of the file - it will be an order of magnitude less than any raster image for equal image characteristics. In addition to this vector image can easily animate with JavaScript, which is difficult to do with a normal picture.

Disadvantages of SVG

As such, the disadvantages of SVG has no, but there are some points to be aware of:

SVG can't be used for photos. In theory you can get a picture in SVG format, but the file will be very big. In addition, the file will remain the same raster image, which will be covered by an SVG shell.

It is not supported by older browsers.

In general, the SVG format is the best option for using icons, animated elements and illustrations on the site.

Basic SVG Forms

Each SVG file can consist of elements such as:

• a simple line;

• broken line;

• rectangle;

• circle;

• ellipse;

• polygon.

All of these shapes can be used singly or in combination to create any full-length image: a person, a city, a landscape. You can see what different vector images can look like here. 

Where to work with SVG graphics

As I mentioned above, as a program for editing vector images can be used Figma. In it, you can not only modify an existing SVG file, but also create your own from scratch. To do this, there are tools such as pen, square, line, arrow, ellipse, triangle and star.

You can also use plugins that create different elements. For example, you can use Shaper to add unusual shapes in one click:

Any of these shapes can easily be exported in SVG format:

How to Export an Element to SVG Figma

This is just one way to create an SVG element. In general, Figma is not designed for professional vector image editing, it is usually used for creating layouts and website interfaces that have SVG.

Speaking of professional software, these are:

CorelDraw - the most popular graphics editor among amateurs, novice professionals and advanced artists.

Adobe Illustrator is the global standard for the printing industry. The graphics programs in Illustrator give you the ability to transfer high-quality images from the computer to paper or any other medium. The level of scaling up to 64000% is provided.

Gravit Designer is a full-featured vector editor. It is suitable for any tasks - from interface and icon design to work with presentations, illustrations and animation.

Also you can find a lot of free services for the fast editing of SVG files.

Browser Support

The SVG format is supported by all modern browsers, except Internet Explorer 8. But even that can be fixed by using Raphael.js JavaScript library. You can convert your SVG file to this library format at the ReadySetRaphael website.

Conclusion

Today we have talked about what SVG graphics are and where you can work with them. The key features of SVG are low weight and scalability, which doesn't change the quality of the image in any way.

Use SVG graphics on websites to minimize the speed of page loading, as well as improve the perception of content by users. SVG elements are easily adaptable, can change color on mouseover, and are well suited for different animations.