Web Animation using JavaScript: Develop & Design (Develop and Design)

Chapter 6. Scalable Vector Graphics Primer

Since an in-depth tutorial on Scalable Vector Graphics (SVG) could easily comprise a
book of its own, this chapter simply serves as an introduction to the topic. The goal is to
equip you with enough knowledge to be comfortable animating SVG elements and to
know where to go next to continue your learning.

Creating images through code

An SVG element is a type of DOM element that borrows the syntax of the HTML
elements you’re already familiar with to define arbitrary shapes. SVG elements differ
from HTML elements in that they have unique tags, attributes, and behaviors that allow
them to define graphic shapes. Put another way, SVGs let you to create images through
code. This is a tremendously powerful concept because it means you can
programmatically style and animate these shapes using JavaScript and CSS. In addition
SVG offers many other benefits:

    SVG compresses  incredibly  well.   Graphics    defined in  SVG have    smaller file    sizes

than    their   PNG/JPEG    equivalents,    which   can greatly improve site    load    times.

    SVG graphics    scale   to  any resolution  without a   loss    of  clarity.    Unlike  standard    image

formats,    they    look    razor   sharp   across  all devices—say good-bye    to  blurry  images  on

mobile  screens.

    Like    HTML    elements,   SVG elements    can be  assigned    event   handlers    that    respond to

a   user’s  input,  which   means   that    the graphics    on  your    page    can be  made    interactive.

If  you so  desired,    all the buttons on  your    site    could   be  turned  into    animated    graphics.

    Many    photo-editing   apps    (including  Adobe   Photoshop,  Sketch, and Inkscape)   let

you export  your    design  work    into    SVG format  for quick   copying and pasting into

HTML.   So, even    if  you don’t   consider    yourself    an  artist, you can leverage    third-

party   applications    to  do  the designing   for you.

In  short,  SVGs    are an  amazing graphics    solution.   Let’s   dive    in!

SVG markup

SVG elements are defined within a parent
height dimensions of container element defines the canvas that your SVG graphics render
upon:

Click here to view code image
<svg version=“1.1” width=“500” height=“500”
xmlns=“http://www.w3.org/2000/svg”>