SVG

Scalable Vector Graphics

Overview

SVG images, or Scalable Vector Graphics, are a type of vector image that is becoming increasingly popular with web designers. SVG graphics are unique in that they use HTML-like code in their structure, and thus SVG elements can be targeted by CSS and Javascript.

For example:

The blue circle was created using this SVG code:


                        <svg height="100" width="100">

                            <circle cx="50" cy="50" r="40" fill="#218db4" />

                        </svg>

For example:

This star was also created using SVG:


                        <svg class="large-6 medium-5 columns" height="210" width="500">

                              <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:#75f027;fill-rule:nonzero;" />

                        </svg>

Since SVG images have HTML-like code, different parts of the SVG image can be targeted using CSS and Javascript. Being able to apply CSS and Javascript to an image directly is one of the main benefits of using SVG images.

Purpose

In order to understand why SVG's are useful, it is important to understand the difference between RASTER and VECTOR graphics.

Raster

Raster, or bitmap, graphics are created using a rectangular grid of pixels with a set number of pixels-per-inch (ppi)/resolution. When raster images are zoomed in, they become "pixelated". You can see the individual pixels, and the outline of an image is lost. Raster images are great for photographs.

Vector

Vector graphics are created using mathmatical calculations between different points to create geometric shapes. Because the shape of a vector graphic is created using math rather than pixels, you can increase or decrease the size of a vector image without any pixelization.

At first glance, the above two images seem identical... But it's a LIE!

Raster

Vector

Upon closer inspection, we can see that the raster image is quite pixelated when enlarged, while the vector image still has crisp lines and does not appear blurry.
(In your browser, try zooming in on the vector image. It will never get blurry!)

Now that you know the difference between raster and vector images, which of these two types are SVG's?
Hint: it's part of the name...

Cool Stuff

I created the SVG image below in Adobe Illustrator and exported it as an SVG. Since SVG's have HTML-like code, I was able to add ID's and classes to my SVG and then target those ID's and classes using CSS. My code looked something like this:


                        <!--I took out some stuff for simplicities sake, but you can see all the code in the source code-->

                        <svg id="kitten_sparkles">

                            <g id="face">

                                <path>...</path>

                            </g>

                            <g id="mouth">

                                <path>...</path>

                            </g>

                            <g class="sparkles">

                                <path>...</path>

                            </g>

                        </svg>

Every SVG image is surrounded by an <svg> tag and within this particular <svg> are <g> and <path> tags. If you create your SVG image in Adobe Illustrator and separate your image into different layers, Illustrator will place each layer in a <g> tag. Within each layer of your image, the actual lines that you create are called "paths" and are written in the code as <path>. You can create basic shapes by adding different properties to a <path> tag in your SVG, but once you get into more complicated shapes, using a program like Illustrator will make your life much easier.

Once you've created your SVG, you can then add in ID's and classes to different tags. I decided to add an ID to my SVG called "kitten_sparkles", and to seperate the different layers within my image I added an ID or class to each part to identify it (ie. "face", "mouth", "sparkles"). Once I'd done that, I just added some CSS to those ID's and classes and created this...