SVG Graphics & You

Lightweight & scalable. The two words an app or website developer loves to hear when it comes to graphics.

SVG (scalable vector graphics) are vector images (images that don’t degrade – get fuzzy – when you zoom in) you can reference with either an img tag, or by using the actual code generated by a drawing program to draw the graphic out. You can then apply CSS styles, animations, media queries, etc.

So the next time you find yourself creating a rediculously complicated graph that needs to be viewed at 3 different page sizes, think SVG. It’s a lifesaver, trust me. Combine it with animations and your world gets even bigger!

 

Further Reading

w3 Schools Information on SVG Graphics

CSS-Tricks Using SVG