What is svg

0

What is svg and SvgOcean

SVG (from English Scalable Vector Graphics – Scalable Vector Graphics) – This is one of the types of graphics that is formed using geometric objects: lines, circles, rectangles, curves and other elements.

A combination of such parts can void almost any image. For example, it can be an icon svg for cricut

svg

 

The impetus for the development of this language markup was first given by the World Wide Web Consortium (World Wide Web Consortium), which in 1999 was more famous as W3C. W3C gave and the concept of SVG – language markup to create two-dimensional graphic interfaces and images.

Today, SVG is used on all modern sites – it can be both icons of social networks and full-length illustrations. But most often it is exactly the logos, various icons.

Why is so popular SVG format – we’ll figure it out further.

The advantages of SVG.

One of the key features of the SVG format is scalability and free svg images. If an increase in photos in JPG and PNG can lead to a worsening of quality, then with SVG format you will remain at the same level. You can increase the vector image at least 100 times – it will still save the former look. Therefore, SVG pictures are well displayed in the biggest permissions without loss of quality and are simply ideal for adaptive sites.

Another feature of SVG is his customization. Suppose that we need to download the red icon on our site, but only black is on hand. If this is a raster image of a JPG or PNG format, then it will be necessary to make a lot of effort to change the color of the icons. In the case of SVG, it is enough to open a graphic editor that supports vector images, such as Figma, and change the color of the icons in one click. So, if you change the color of the simple element.

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

All of these advantages fixes the weight of the file – it will be an order of magnitude less than any raster image with equal image characteristics. In addition to this, the vector image can be easily animated using JavaScript, which is problematic to do with the usual picture.

Disadvantages of SVG.

As such deficiencies at SVG no, but there are some points about which it is worth knowing:

SVG can not be used for photos. In theory, you can get a photo in SVG format, but this file will be very large. In addition, the file will remain the same raster image that will be covered by the SVG shell.
Not supported by old browsers.

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

Basic forms SVG.

Each SVG file may consist of elements such as:

  • Simple line;
  • Loan line;
  • rectangle;
  • circle;
  • ellipse;
  • polygon.

All these figures can be used both for one, and in the aggregate, creating any full-length image: a person, cities, a landscape.

Where to work with SVG graphics

As I mentioned above, Figma may be used as a program for editing a vector image. You can not only change the already existing SVG file, but also create your own from scratch. For this there are instruments such as feather, square, line, arrow, ellipse, triangle and asterisk.

You can also use plugins that create different items. For example, with Shaper, you can add unusual figures and 3d svg to one click:

 

svg
Any of these figures can be easily exported in SVG format:

 

svg

This is just one of the ways to create a SVG element. In general, Figma is not intended for professional vector image editing, it is usually used to create layouts and site interfaces that have SVG.

If we talk about professional software, then this is:

CorelDRAW is the most popular graphic editor among lovers, novice professionals and advanced artists.
Adobe Illustrator is a global standard for the printing industry. It is the illustrator that allows you to high-qualityly carry images from a computer on paper or any other medium. The scaling level is provided up to 64,000%.
Gravit Designer – full-featured vector editor. It is suitable for any tasks – from design interfaces and icons to work with presentations, illustrations and animation.

Also on the Internet, you can find a lot of services – for example SvgOcean for SVG files.

Support browsers

The SVG format is supported by all modern browsers, with the exception of Internet Explorer 8. But it can be fixed by using the Raphael.js JavaScript library. You can convert the SVG file to the format of this library on the ReadySetRaphael website.

Conclusion

Today we talked about what is SVG graphics and where you can work with it. Key features of SVG – low weight and scalability, in which the picture quality does not change.

Use SVG graphics on sites to minimize the page download speed, as well as improve the content perception by users. SVG format elements are easily adapted, can change the color when hovering the mouse, as well as well suited for different animations.

 

 

Leave A Reply

Your email address will not be published.