Pros and Cons of working with SVG images

When working on my last project, I wanted to use high quality images that would scale nicely. Back in the 90s when I taught myself HTML, there was only two options, a gif or jpeg file. The problem with either of these files was that they did scale well. If you zoomed in or enlarged the website, the graphic would become extremely blurry or pixelated. The solution? An SVG file or Scalable Vector Graphics.

What are the pros and cons of using SVG files and when is it the most appropriate?

Take a look at this image:

Initially I had implemented this in SVG format as my navigation map. When it first loaded, it had slowed down my website significantly because of the file size. Do you notice every little detail on the graphic? Each detail adds more and more lines of code, which in turn will slow down the processing speed of your website. The benefit of using SVG format for this graphic was that I could go into the file and manipulate the code to make each purple dot change to orange when it was clicked on. However, because of the slow processing speed, I had to change the graphic back into a .png file and put implement a nav map on it.

So when does it make sense to use SVG over .png or .jpg? When you have a smaller graphic that needs to be able to scale well. You may consider using it for logos, buttons, or less detailed graphics.