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

Web Fonts – MFTW

Here are some web fonts that i found on web designer website, and they say they are essential to web design at this moment in time.

There is undoubtedly a font for every occasion and certain designs demand certain fonts. However, there are a few fonts that every designer should have in their collection. Here we pick a selection of free and premium fonts that if you don’t have you should get now.

5 Essential web fontsMONTSERRAT
Price: Free
URL: http://bit.ly/10kSrDX
Montserrat is a stunning free web font, perfect for any Gotham Enthusiasts out there. Inspired by posters and signage in a traditional Buenos Aires neighbourhood, it comes in two weights and is available from Google Web Fonts. This is a versatile font that looks great in big, display type and in smaller sizes.
BEST FOR: Headlines, body, small sizes

5 Essential web fontsOSWALD
Price: Free
URL: bit.ly/ZDWXKB
Oswald is a tall condensed sans serif, with a lot of character. If you like League Gothic you’ll love Oswald. It’s been designed with the screen in mind and comes in three weights; light, normal and bold. Looks great in all caps stretching across the top of your site.
BEST FOR: Headlines

5 Essential web fontsPLAYFAIR DISPLAY
Price: Free
URL: bit.ly/Zp5G7r
Playfair Display is a beautiful serif display font. Perfect for big headlines, it has high-contrast letterforms, an extra large x-height and short descenders. It comes in three weights and italics, and looks great stacked on top of itself. If you’re a fan of Georgia for body copy, Playfair Display is the perfect accompaniment.
BEST FOR: Headlines, Italics

5 Essential web fontsDROID SERIF
Price: Free
URL: www.fontsquirrel.com/fonts/droid-serif
Droid Serif is a good-looking contemporary serif font, designed for legibility on screen. This is an excellent choice for body copy but has enough character to hold its own in larger headlines too. Droid Serif comes in two weights, with italics and has a sibling in the form of Droid Sans, a complementary sans-serif version.
BEST FOR: Body, italics

5 Essential web fontsARCHER
Price: $199
URL: bit.ly/1bc018Y
Archer is a beautiful little slab-serif from Hoefler and Frere-Jones. While it may carry a high price tag, its versatility makes it well worth the money. It’s clean and credible but still full of character. It comes in eight weights and 40 styles. H&FJ’s web fonts have all recently been redesigned for web and mobile..
BEST FOR: Headlines, body, italics


I might use one of these fonts for my website and import them by Google Fonts