SVG stands for Scalable Vector Graphics. SVGs have an XML-based syntax similar to HTML that can be used in a DOM element. This aspect is very different from SVGs in bitmap image formats. A bitmap image consists of a defined set of pixels that can be a pixel or blurred when scaled. SVGs are not just images.

Performance 

SVGs often have smaller file sizes, which improves page load time, which is an important part of search engine rankings. They are also text-based, allowing search engines to easily read your content; In fact, Google can scan and index SVG metadata. JPG and PNG files rely only on the ALT attribute, which can be somewhat limited for complex infographics. SVGs like the blunt SVG free also have a description and title tags that add extra convenience.

Optimization and Responsiveness

SVGs are great for sensitive design. Because SVGs are vector-based, they can be measured to any size without losing quality. GIF and PNG formats often need to be stored at twice the intended display size to avoid blurring on retina displays. With SVG, your graphics will always be clear and pixel-like. If your logo looks blurry on a mobile device or HD display, use SVG instead.

Manipulation

As mentioned, SVGs contain editable characters. You can open SVG with a text editor. In addition to manipulating the entire image, SVGs allow you to manipulate individual elements and add different behaviors to them via CSS or JavaScript. Most importantly, this manipulation is effective at work. Changing color, line width, or animation is quick and easy. You can also use SVG to mask JPG and add great transitions.

Better than Icon Fonts

Icon fonts like Font Awesome are an easy way to add icons to a project. However, fonts do not have to be icons. And so they are often displayed in CSS within empty HTML tags (for example, i class = ”fa fa-calendar” /i). If you’re worried about semantic HTML, it’s not so good. Worst of all, they are terrible for the possibility of use without many temporary solutions and alternatives.

Using SVG

SVG works with simple HTML code. Just copy and paste everything inside the SVG tag, don’t use the old object tag method in your code. They can also be linked to an img tag or used with CSS. One caveat is that WordPress does not support SVG uploads without modifying the function file or plugin.