The purpose of this project is to explore a Browser API and display some of its neat features. I chose the SVG API because I’m especially interested in design and have been experimenting with vector graphics in Adobe Illustrator. Learning how to manipulate SVGs using a scripting language like JavaScript is a perfect way to complement learning the ins and outs of Illustrator. I’m hoping to merge these two skills to create awesome and dynamic graphics for my future web applications.
SVG stands for Scalable Vector Graphics. The files are defined by human-readable code, which is then calculated and rendered by your browser. They're awesome in some bigs ways. Let's dig in.
- They retain perfect sharpness no matter what size you resize them! SVG is drawn from mathematically declared shapes and curves so pixels are no limitation.
- They can have super small file sizes! Because the files are identified by mathematical descriptions and not individual pixels, files are often much smaller than raster graphics.
- They can be easily edited and modified. For example, when you use inline SVG, all that SVG code is right in the HTML and in the DOM. You can style them just like a
<div>or<h1>. - SVG has broad browser support and will work properly on any modern web browser.
Unlike raster images that dramatically lose quality when you increase their size, SVGs scale up and down without sacrificing any image quality! See the difference?!
SVGs are particularly awesome in the realm of web development because they be programmed using a scripting language like JavaScrip to become dynamic and interactive. An SVG document can easily be accessed and manipulated because there are defined Document Object Model objects for every element and attribute. What’s more, SVG content can be animated with built-in elements like <animate>.
I started by making custom graphics in Adobe Illustrator. These graphics have multiple elements that can be styled individually. After exporting my graphics as SVG files, I opened them in my text editor and copied the code into my HTML document. Next I assigned classes and ids to specific components so that they could be styled in a seperate CSS file. I played around with colors and sizing to make the graphics dynamic when hovered over.