Smart Software Solutions Inc 108 S Pierre St.
Pierre, SD 57501
605-222-3403
sales@smartsoftwareinc.com

Contact Us

Articles

Image Manipulation: HTML5 Canvas vs SVG

Published 1 year ago

It is estimated that over one trillion photos will be taken in 2015. This explosion in imaging is a direct result of our digital age and the advancement of mobile devices which allows us to snap pictures at any opportunity. With so many images being produced, photo manipulation software has seen a huge increase. Web-based image editors are big money these days. They have become increasingly popular in recent years due to more powerful browsers being introduced that allow users to easily edit an image without opening a desktop application.

When HTML5 was introduced a few years ago, two new graphic elements were revealed - Canvas and SVG. Although SVG has been supported before, HTML5 has introduced the SVG tag as a container for SVG graphics. What is so great about these? Well, for starters they are capable of advanced and efficient image editing techniques while being completely library independent. 

What is the Difference?

The Canvas is bitmap based and strictly pixel manipulation. Consider it like an actual canvas in which you paint on. If you want to change the color of a certain object, you have to paint over it. It is extremely responsive because of it primitiveness, however, it has poor text rendering capabilities and any interaction with the element is JavaScript dependent.

SVG is vector based and resolution independent (can be resized without getting fuzzy). With SVG, every drawn shape is stored as an object. If an SVG object's attributes are modified, the shape will be automatically re-rendered. This does, however, result in slower rendering and possible performance issues in the browser. SVG also supports JavaScript event handlers while Canvas does not.

Which One is Best?

Canvas has some practical applications such as browser-based video games or simple pixel manipulation. There are some great libraries out there like CamanJS or fabric.js that are extremely useful if you need to allow the user to perform some simple pixel manipulation like red-eye reduction or desaturation. However, if you need to zoom in on an object or apply text you might be in trouble. With that being said, I'll say that SVG for front-end developers has a much brighter future considering the speed of modern and future browsers. Check out some of these great libraries which allow for simple integration into a project:

AUTHOR Brent Smith

Brent Smith, a graduate of the University of South Dakota, has been with Smart Software Solutions since December of 2007. He holds a Master's Degree in Computer Science and a B.S. in Mathematics.  He currently resides in Pierre, SD with his wife and two sons.  In his spare time he enjoys reading, watching baseball, and playing in a local cover band.