Kansas City Web Designer Tip – SVG vs PNG

How many websites can you think of in Kansas City that use an svg?

For those of you who are into research, an svg is a Scalable Vector Graphic. It does not rely on pixels. It relies on a set of coordinates.

When web designers layout their web design, they might not always be thiking of the end graphic. It really depends on which program is being used to design the website. Some web designers enjoy using Photoshop, as it gives pixel perfect grids and images. Some web designers choose Illustrator, as it gives them a better option to play with shapes.

When the web developer receives the file, whether it be from Photoshop or Illustrator, and sometimes depending on the file, the web developer chooses between the immense possibilities to showcase simple things like logos or graphics when deciding the important layout structure.

For example, Photoshop files will render rasterized images, so making jpgs, gifs, or pngs is the only option. A logo can be an image clickable , or an link with a background-image. There isn’t much to do with it. Swapping the image out for another on :hover, changing the absolute position if it’s an image sprite, or creating an action in javascript with a listener. It’s pretty basic.

What if you could change a color inside your logo, or make something move, or take something out? Web developers caught on to the svg buzz when they were able to see some pretty neat features. Chaos ensued. Web Designers continued to make layouts in Photoshop, but Web Developers were asking for logos and graphics in Illustrator. Some designers completely switched over to designing in Illustrator. For a later discussion, we can talk about the pro’s and con’s of designing a website in the two.

Back to the revolution which is svg. The graphic format is written directly as an xml file. Almost all browsers can identify svg just like they do pngs, gifs, and jpgs. You can call an svg file just like you can a png file. You can target the shapes by giving elements an id, and then changing them directly with javascript.

Another distinct advantage is that there is no loss of clarity. Viewers who are visually impaired will zoom into documents. pngs will show the dreaded bitmap pixels, while as an svg will still continue to be crisp. Retina displays and svgs go hand in hand.

Have you seen a creative use of an svg? Leave your comments below.

For creative web design and web development, consider KC Web Specialists as your option of choice.

KC Web Specialists’ Kansas City SEO / PPC specialist who enjoys blogging about all things web related.