Images are nowadays an important part of web pages. We make our web pages look more attractive and appealing to the users by adding images. We can make it more attractive by adding responsive images. So the big question is how can we make an image responsive.

 

 

The basic formats of images that we use in our daily life are JPEGs , PNGs , BMPs etc. These formats identify image as one whole entity.So how our code will identify small portions that are there in the image.One thing that we could do is crop our image and break it into smaller images of the portions that we want to make responsive. This will be like our brute force approach to the problem not a smart approach. We might be able to do the task but it will be a very complicated solution and we will have to take care of various corner cases.Smart approach of this problem is using a different less common image format SVG. SVG stands for Scalable Vector Graphics.

We can change our image format into SVG easily either by using an online converter or using an image editing software as Illustrator. The benefit of SVG is that we can see and manipulate parts of our image as code. We can see the code by opening a SVG image into any text editor. Small portions of image is represented as small part of the code which we can manipulate.We can use SVG as HTML attribute. We can directly put the code in HTML code of our web page and manipulate the code by adding on-click and on-hover events to the different parts of the images.