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.

Interactive Enviroments – Music

I started off by researching a couple of sound bites with a basic idea how i wanted my horse to sound when the user is at that slide. Then i discovered this website called http://www.audiomicro.com, these have a great selection of sound bites that i liked but didn’t have my original idea. So what I did was with my experience of using Adobe Audition from year one i merged two soundtracks together to get that ultimate user experience as if they was on a cart.
I have therefore saved it as a .sesx file and then exported one as an .mp3 file and uploaded them onto dropbox. I’ll upload the .mp3 file onto here if you want to have a listen to it now.
The Mp3 file is on youtube and will be displayed on the presentation.

Interactive Enviroments – Persona

Since we are apart of a group and theirs normally a standard of three personas to any project you do, we thought if we did a persona each then that would be fair and feel like everybody has contributed towards the grouppersona

I thought what would be better then having one person who we are targeting the design at and trying to get into their mind of what they find interesting.

Interactive Enviroments – More Colour

In our concept we went back in time for more black and white because as you know back in them days they didn’t have any colour.

But then in one of Rivers designs they was a slight touch of sepia in their and we really liked it so we sat down with sally and thought how can we interpret that into our designs and that’s what we did, if you have a look down to out final designs you will see throughout the application you will see a slight shade of sepia.

This is the colour template we wanted to go for:

colour2 colour1