 So, hi, I'm Vikram Jeet Singh. I'm co-founder and city of head out. Lately, I've seen that a lot of mostly people are using PNGs for icons and logos on their websites, be it mobile, be it desktop. I want to put forward a suitable alternative or better alternative, which is SVG. So, how do SVGs help? SVGs are basically agnostic. What are SVGs? SVGs are basically vectors. They scale to any desired resolution, whereas images pixelate. Let me just adjust this first. Zoom out won't work on this. All right. Let's work with this. Okay. So, yeah, I just made this yesterday with HTML CSS. So, yeah, buggy. So, images basically pixelate. Hence, SVGs are basically perfect for all your high resolution screens. And since they are vectors, they are typically of a lesser file size. So, what you can basically do is you don't need different file size PNGs for different screens and or different sizes. You can just use one file and take care of all your resolutions. SVGs have super cross-browser support. Chrome, Firefox, Opera have basically supported it since childbirth. And IE9 has full support. It has a little bit of glitches, which can be solved by adding height with viewbox and CSS rules. Android 3 Plus has support except for masking. And Android 4.4 Plus has full support. SVGs are basically XML format. They are plain text in XML format. They support HTML attributes like IDs and class. So, you can basically put IDs and class inside SVG or its inner elements. Hence, they are embeddable in HTML and they are easily accessible via DOM. So, what you can do is you can basically access each and every element and change it on the fly, which cannot be done with images. The best part of SVGs is CSS styling. Well, it fits. So, SVGs like normal HTML elements can be styled via CSS. The CSS support is basically mixed. It supports basic styles along with some special styles like fill and stroke. You can basically change colors. You can also change colors of individual elements inside the SVG. You can change sizes. You can even do transforms like rotate and translate. One of the hindrances is that the inner elements currently do not support transforms properly. So, what you can do is since these are all text, you can basically pull out inner elements into different SVG files and boom. You can have transforms on them and rearrange them back. Now, how do you include SVGs inside HTML? There are basically five methods. You can either use an IMG tag. The pros of this is that you can add a fallback for an image if SVG is not supported, which is very highly unlikely. The cons are that you have to add an extra call to get the SVG file and the SVG is treated like an image so CSS styling doesn't work. The second method is using background image CSS. You can basically use the URL instead of the image just put the SVG file. Same pros, same cons. You can, the best way to include an SVG is to include it in line into HTML itself. The pro is that you do not need any extra call to actually download the SVG file and CSS stylings are applicable. Cons are that you have to have an extra overhead on the page for the file, for the data itself which can be minimized by sanitizing and optimizing the SVG and the other con is that you don't have inherent fallback but you can take care of that by modernizer. The fourth method is by using object. You can basically refer to the SVG via inside the object tag. Again the pros are that you can add a fallback. The cons are again network call which is cacheable. CSS styling won't work from the HTML page but if you have a CSS style sheet inside the SVG, the object tag will acknowledge it. The fifth method is basically base 64 encoding your SVG data and you can basically include it in any of the previous four methods except for the inline thing. Again pros you can add fallback, save network call because you have that data inside and the cons are that CSS styling cons still apply for whichever method you use respectively. Again personally I always use inline. The other cool thing about SVGs are that they also adhere to CSS animations and transitions. The restrictions for the inline elements that I told you in CSS styles still apply. So if I have my logo, what you can do is you can do cool animations like this or some sophisticated animations like this. This is totally not possible in images. SVG specification also has loads of filters which are in XML format. Filters like specular lighting, Gaussian blur gradients. So I created a filter which is kind of like a bevel and emboss filter which basically converts the SVG like this. And if you don't like the filter you can just add in some gravity and they just fall. Yup, that's it.