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?
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: