Top Reasons to Choose SVG over PNG

There are many questions that I have seen over different sites i.e. which format is should be used for images. People either many developers don’t know which one is the best format and they don’t pay too much attention that why they choose that type.

Questions like

  • Which format is better for saving images for websites SVG or PNG.
  • Explain the reason why to choose SVG over PNG.
  • What is the main difference between png and svg?
  • Why we have svg images not png?
  • Explain the concept of vector images vs. raster images?

This article will help you in solving all the above related queries.

Reasons SVG may be a good choice:

  • For hover effect you can scroll them, up and down.
  • SVG supports any size of browser especially the CSS background size
  • SVG can embed and real time modification can be done on them with JavaScript and DOM.
  •  It can generate dynamically either on both client or server side.
  • Part of SVGs can style with CSS.
  • Better option for vector graphic images.
  • Low level libraries are not required because of its text based nature.
  • Mainly they rely on shape and fill of elements within an image.

Reasons PNG may be a good choice:

  • It supports any browser.
  • Most people use PNG compatible editor on their systems.
  •  For creating PNG sprite sheets existing tools are available.
  • Better for pixel graphics.
  •  Are best format of Raster files.
  • Used when there is graph on image and want to show flat color or lines.
  • PNG allows alpha transparency.

Conclusion:

Use SVG file type when you have a flat, simple image that you need to scaled up and PNG is used when you need transparency or if you have graphs or diagrams on image that you might need to scale.

 

 

Advertisements

About netlwonweb

WE WORK WITH BUSINESSES OF ALL SIZES, DELIVERING THE HIGHEST CREATIVE & TECHNICAL STANDARDS. WE MAKE WEBSITES FOR ALL DEVICES
This entry was posted in Uncategorized and tagged , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s