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.


Marketing For the Web – Login and CMS Problems

On my 4 Elements site, the administrator can log in and log out. The only thing is with the Login say if i use my username and password and its successful the login box will stay their even though the user has logged in.

This is a problem i have been having for a couple of weeks now. The problem is how can i hide this div, and i have been experimenting for weeks now and researching online but the same piece of code pop ups and i know its the right code but maybe i am either putting it wrong or misplacing it. The code is:

    jQuery('#hideshow').live('click', function(event) {        

This cannot be done in HTML/CSS, it has to be done by either Jquery or JavaScript.

The second issue i had with building a site with Parallax is the Content Management System. Since this is only a one page website unlike websites that have 3 or 4 pages i found it very difficult to refresh the page or even get the cms system to fit in wit my website.

I have now had to draw a line under it to focus on all my other stuff but apart from the login box little problem which doesnt make a difference it will be fine.