SVG & SVG animation

on the web

Soma Szoboszlai - codepen.io/szsoma

Overview

Vector vs Pixel
About the SVG
Advantages
Code & usage
Animation & optimization
Demos

Why?

Why send pixel data...

...when you can send geometry?

Math is more efficient,

let your powerful computer do the drawing

Vector vs Pixel

Original picture

Pixel based

Vector based

Complexity problem

But there is a complexity limit

About the SVG

The SVG specification is an open standard developed by the W3C in 1999.

Scalable Vector Graphics is an XML-based vector image format for 2D graphics with support for interactivity and animation.

Companies including Adobe, Apple and IBM all took part in defining and creating this new image type.

1998

Can I use SVG?

(yes)

Advantages

Lightweight
Resolution independent
Easy to manipulate (color, size...)
Easy to animate
Use as a real text

PNG - 445 Kb

SVG - 101 Kb

22.7%

Basic shapes

<line>

<rect>

<path>

Text

<text>

Use as a System

94

Tools for creating SVG

Inkscape

Sketch

Illustrator

Optimize your SVG!

Code

</svg>

<defs>

</g>

</g>

Code

</svg>

Implementation options

Image tag

    <img src="innonic.svg" alt="Innonic Logo"
         height="65" width="185">

CSS background

    .logo {
       background-image: url(innonic.svg);
    }

Embed tag

   
 
 <embed type="image/svg+xml" src="bblogo.svg" />

Object tag

   
 <object type="image/svg+xml" data="bblogo.svg">
 </object>

. . .

Inline SVG

   
     <body>
        <link href="https://fonts.googleapis.com/css?family=Lato:900" rel="stylesheet">
        
        [...]
        
        <svg xmlns="http://www.w3.org/2000/svg" width="302.5" height="171.5" viewBox="0 0 302.5 171.5">
          <g id="conversific">
            <text transform="translate(0 163.3)" font-size="46" fill="#333332" font-family="Lato-Black, Lato">CONVERSIFIC</text>
          </g>
          <g id="emblema">
              <path d="M250,18.4,201.9,46.2v55.6L250,129.6l48.1-27.8V46.3Zm29.1,72L250,107.3,220.9,90.5V56.8L250,40l29.1,16.8Z" transform="translate(-97.9 -18.4)" fill="#27af92"/>
              <polygon points="152.1 27.1 152.1 55.2 127.8 41.2 127.8 69.3 152.1 83.3 176.4 69.3 176.4 41.2 152.1 27.1" fill="#333332"/>
          </g>
        </svg>
        
        [...]

    </body>

Link