What is SVG?

SVG : Scalable Vector Graphic

SVG (Scalable Vector Graphic), Scalable Vector Graphics are XML-based 2D vector graphics.

It has the .svg file extension and is created as an HTML tag, so it can be edited in the code editor without the need for a graphic editor.

In case of zooming the image in the use of scalable vector graphics, there is no degradation as in png and jpeg formats. There is no loss of quality when editing the scalable vector graphics format (changing the width and height values). The reason for this is that the vector structure is used and the image is created with code.

SVG Difference Between Image File Formats

Of the three different image types above, PNG and JPG formats are pixelated in different sizes, while Scalable Vector Graphic format does not show any distortion.

Note: When the images are zoomed in, the amount of distortion can be seen more clearly.

It can be used on the web page in the desired size without any image distortion. When scalable vector graphics format is preferred, it creates less load than png and jpeg formats. In addition, when creating websites, .svg should be preferred in terms of icon sets and logo image performance.

SVG Code Structure

The codes in the <svg></svg> tag create the content of the image.

What is SVG Viewbox?

With the viewBox property, its position in the x plane, its position in the y plane, its width, and its height are set respectively. Considering the coordinate plane, since the x and y values ​​of the viewBox property in the example are set to 0, it is located right in the middle.

The <circle></circle> tag’s position in the x plane with the cx="" property, the position in the y plane with the cy="" property, and the radius of the circle with the r="" (radius) property.

Source:

https://developer.mozilla.org/en-US/docs/Web/SVG

https://developers.google.com/web/fundamentals/design-and-ux/responsive/images