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