Scalable vector graphics image.One of the prominent trends in web design right now is the use of the SVG format for displaying imagery.  Read on to get a brief overview of what this format is, how it can be used, and what some of its benefits and setbacks are.

SVGs, or Scalable Vector Graphics, are “vector” images which consist of code-generated points and lines that can be resized without affecting image quality. Most image formats on the web such as .jpeg and .png are “raster” images, meaning they are made up of individual colored pixels to display the image. While raster images typically work fine for displaying imagery on the web and are necessary for including photos and other images with gradation, they do not retain their resolution when they are made larger and they can often take up a ton of space on the server which increases load time for the website. Meanwhile, the vector-based SVG image looks the same at all sizes and takes up a fraction of the space, making it ideal for displaying icons, logos, and other flat graphics that do not require the gradation only raster images allow.

Some benefits of using SVGs include:

  • Small file size with excellent compression – while raster images like jpegs and pngs have to account to each individual pixel that they comprise of, SVG vector images simply need to account for the points and lines that make them up, making them much smaller.
  • Resizes with no loss of quality – unlike raster images that lose resolution and pixelate when they are enlarged, SVG images look the same at all sizes
  • Looks crisp on retina displays -SVG images retain their resolution while raster images may have their resolution degraded
  • You can edit parts of images with CSS – since SVG images are assembled based on code-generated vector shapes in HTML, the code can be edited to change the image’s color, animate it, or apply filters to it such as blur or drop shadow.

Ways to use SVG graphics:

  • Insert into an <img> tag to use as an image in your HTML
  • Use as a background-image in CSS
  • Use in an <object> tag in your HTML

Some potential downsides to using SVGs include:

  • Not supported by IE8 and below and Android 2.3 and down
  • Difficult to cache

The use of SVG graphics can vastly improve the quality of a website. Between providing crisp, high resolution imagery, minimizing load times with small file size, and allowing customization with CSS, the SVG format proves to be an excellent choice for implementing icons, logos, and other flat graphics. I encourage all web designers to leverage the SVG format whenever possible in order to improve the user experience of their websites and make the web a better place.

Go from The SVG Format: A Brief Overview to the Blog

Return to the Unleashed Technologies Home Page

This entry passed through the Full-Text RSS service – if this is your content and you’re reading it on someone else’s site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers.

Related Posts

Facebook Comments

Return to Top ▲Return to Top ▲