SVGoin Me!

David Novicki

A cheesy introduction to SVGs

What is an SVG?

Scalable Vector Graphics (SVG) is an XML-based markup language for describing two dimensional based  vector graphics. SVG is essentially to graphics what HTML is to text.

SVG Structure

SVG nodes are valid HTML markup

Example

Basic SVG Shapes 

• Line
• Rectangle
• Circle
• Ellipse
• Polygon
• Path

Animations

• Growing Rect
• Bouncing Ball
• Close icon

Caution: The animations you are about to see are really poor examples and do not represent the true potential of what can be done with SVG animations. I am not liable for the pain and discomfort you feel while watching them.

SVG Grid System

The coordinate system is the basis of SVGs. It typically consists of two parts: Viewport and ViewBox

Viewport

This is the what is actually visible. It is possible for elements to be hidden because the viewBox has been sized to crop out portions of an SVG. 

ViewBox

The viewBox is the coordinate system of SVG. Example