What is a SVG and Snap.svg research

So today we was asked to go away and find out what an SVG is and have a look at a site called Snap.svg and see what that is all about. I already knew that an SVG was a image format because i remember Kevin talking about some stupid in the third year using it and panicking because it wasn’t working. But i thought i would search the internet for a better explanation.

An SVG is:

Short for Scalable Vector Graphics, a vector graphics file format that enables two-dimensional images to be displayed in XML pages on the Web. Vector images are created through text-based commands formatted to comply with XML specifications. In contrast to JPEG and GIF images on the Web, which are bitmapped and always remain a specified size, SVG images are scalable to the size of the viewing window and will adjust in size and resolution according to the window in which it is displayed.


Snap.svg is a brand new JavaScript library for working with SVG. Snap provides web developers with a clean, streamlined, intuitive, and powerful API for animating and manipulating both existing SVG content, and SVG content generated with Snap.

Currently, the most popular library for working with SVG is Raphaël. One of the primary reasons Raphaël became the de facto standard is that it supports browsers all the way back to IE 6. However, supporting so many browsers means only being able to implement a common subset of SVG features. Snap was written entirely from scratch by the author of Raphaël (Dmitry Baranovskiy), and is designed specifically for modern browsers (IE9 and up, Safari, Chrome, Firefox, and Opera). Targeting more modern browsers means that Snap can support features like masking, clipping, patterns, full gradients, groups, and more.

Here is an image that proves how a JPEG, PNG scales as the website gets bigger and how a SVG scales as the page gets bigger:


I aim for me to implement these into my designs maybe second semester or in the third year.