Wednesday, 16 March 2016

Blog 6 - Creating an SVG!

For my second self-initiated project, I wanted to really challenge my design and coding skills. Before this project, I began researching what I could research and learn, and one thing that really stood out was SVG’s. I have knowledge with vector graphics by creating graphics and illustrations in illustrator and flash, but had no knowledge of SVG’s. After doing some research and listening to what some professional designers were saying, they argued that all logos on sites should be SVG’s. After doing some research, I learnt you could do so much with SVG’s, like animating sections of a design and even adding sound. I was really intrigued so I began looking at examples people were creating and started off there.

I wanted to create another logo for myself by using my initials ‘DRE’. I have always wanted to use my initials to create a logo, so I thought I would try it out with an SVG.

I first began searching online for tutorials to get a feel and more understanding of what an SVG actually was. I soon found out that SVG’s were basically a coded graphic using numeric data and basic styling. This was a little of a shock to me because I went in thinking that all my time would be spent designing my SVG instead of coding, was I wrong. After a few tutorials on Lynda, Treehouse and Youtube, I began experimenting with creating a design that could be animated.

I started with basic shapes to begin with and trying not to bite off more than I could chew. I chose the turquoise blue I used a lot on my website and incorporated it into an oval shape with my initials. I didn’t have too much trouble creating the design in illustrator as I have used it before and believe I have grasp of the tools.

The biggest problem I had with this project was the coding. I quickly realized that the coding of my SVG after I had exported it was completely different to the tutorials I had been looking at previously. I tried to code the SVG by defining classes but this only broke the image. I overcame this problem by doing more research on the web for more up to date instructions. I simply found the information I was looking for by specifying what version of Illustrator I was using. The biggest problem solver for my coding problem was a website called SVGOMG by Jake Archibald. This simple website takes SVG coding and removes all unnecessary lines of code to make editing the code much easier. With this code optimizer, it made editing my code much easier and clearer.

Finally encoding the SVG into my site wasn’t too difficult because for the most part it was exactly the same as adding an image was a simple image tag. 
I animated my SVG by simply adding an animate transform tagging and customized it to my preference. Finally the SVG was uploaded to my website header in replacement of my old logo design.

Resources used:

No comments:

Post a Comment