SVG is the most popular graphic extension for website designers in nowadays. You can do a lot more things as compared to the common raster graphic files like jpeg or png. As per its name Scalable, you can enlarge or reduce it to any size you want without losing the base quality. You also can change the color, animate and many more things with ease. So let's make a list of why this is so popular among the designers.

Many ways to integrate in HTML5

You can integrate SVG into a website using several methods. Only direct SVG in HTML5 method support color manipulation or animation. You need to view some tutorials on YouTube or Google to learn how to animate SVG using CSS3 and jQuery.

Direct SVG code in HTML5

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect width="100" height="100" x="0" y="0" fill="#1092CA" />
</svg>

Image source in HTML5

<image src="logo.svg" alt="" />

Using iframe in HTML5

<iframe src="logo.svg" width="100" height="100" frameBorder="0"></iframe>

Using object in HTML5

<object type="image/svg+xml" data="logo.svg"></object>

Using embed in HTML5

<embed type="image/svg+xml" src="logo.svg" />

Background Image in CSS3

#svgelement {
background-image: url("logo.svg");
}

Background Image in CSS3 using url encode

#svgelement {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' x='0' y='0' fill='%231092CA'/%3E%3C/svg%3E");
}

Smaller file size compare to other formats

Basically SVG is an Extensible Markup Language (XML) and it's not a proper image format. So it is comparatively smaller size than other raster formats such as jpeg, png or vector formats such as eps, pdf. You can edit a lot of things without opening a graphic editor and it can be directly placed in the HTML5 file.

Clarity in manipulation is never shattered

It behaves like a HTML5 element. You can apply CSS3 filters, opacity, transform and anything which is available. The main thing is that, it will never shatter under any condition and produce exactly the same quality. By the way IE browsers don't support CSS3 filters.

Conclusion

Don't compare SVG to other image files. They both have different capabilities. SVG is a good option but is mostly used for minimal color based logos or icons. I am using it for navigation arrows, bullets and some icons. Just do a research in the internet about it and learn how and where to use it properly.