Using SVG for the Responsive Web

What is an SVG?

SVG is an image file format, the format offers an alternative to a bitmap image types, such as JPEG, GIF or PNG. The base difference between the two formats is that an SVG is generated using either code, or vector editing software such as Adobe Illustrator or Affinity Designer.

SVG images are created using a series of shapes made from points and paths whereas bitmaps are a compilation of dots, this means that when scaled above 100%, a bitmap image will degrade in quality as these dots enlarge; causing the image to become pixilated. Where as an SVG will maintain crispness and clarity as the shapes increase in size proportionately.

Where can SVGs be used?

Due to the qualities of SVGs, they have applications within web, and print design. The increased use within web design recently is most likely because of their flexibility in size, allowing them to be used within mobile sites, desktop sites and many in-between, all appearing at optimum quality even on a retina display. They also have a low file size so won’t have any negative impact on page load times. SVG benefits don’t stop here, as SVGs are written in code, we have the ability to manipulate them through the use of scripting. This allows SVG to be animated, and become a more interactive element within the site.

From loading icons to hover effects, SVG has been used to its full potential here for pioneering campaign from Presidentti: Presidentti 3D

Share It! Tweet it! Publish It!