Do more with SVG

#jd17de

About me

  • Robert Mittl
  • Stuttgart, Germany
  • self employed since 2012
  • Joomla, Web Development
  • JUG Stuttgart

 Sauna, Audiobooks and Barcelona

?

Scalable Vector Graphics

SVG

Why SVG?

  • scaleable (retina/responsive)
  • less filesize
  • gzip
  • easy to animate
  • load once, use many times
  • lesser http requests

 Possibillities to use SVG

  • ​logo
  • icons
  • animation
  • to tell a story
  • data visualisation
  • infographics

SVG

Please use inline for the best Browser Support and Animation

SVG Support

Shapes and Line

<svg viewBox="0 0 213.79 211.49">
	<title>Shapes</title>
	<rect class="rect" width="213.79" height="211.49"/>
        <circle class="circle" cx="50" cy="50" r="80">
        <line x1="0" y1="0" x2="200" y2="200">
        <ellipse cx="200" cy="80" rx="100" ry="50">
        <polygone points="100,20 250,190 190,210">
        <polyline points="20,20 40,25 60,40 80,120 120,140 200,180">  
</svg>

Attribute

<svg viewBox="0 0 213.79 211.49">
    <title>Attribute</title>
        <foreignobject x="20" y="10" width="180" height="150">
           <body>
             <h2>My Foreign Object</h2>
             <p>Enjoy your JoomlaDay</p>
           </body>
        </foreignobject>
 
    <circle cx="300" cy="200" r="100" fill="#dfac20"/>

    <text x="0" y="15" fill="red">I love SVG!</text>

    <foreignobject x="230" y="120" width="180" height="180">
      <h2>Title</h2>
      <ol>
        <li>Cat</li>
        <li>Squirrel</li>
        <li>Dog</li>
      </ol>
    </foreignobject>
</svg>

Path and Groups​

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 149.44 39.78"><defs><style>.cls-1{fill:#676767;}.cls-2{fill:#f39200;}</style></defs><title>logo_neu_20161016</title>
    <g class="mygroup">
        <path class="cls-1" d="M44.38,34.66c0,4.88-2.35,8.84-5.24,8.84H20.31c-2.89,0-5.24-4-5.24-8.84V17.22c0-4.88,2.35-8.84,5.24-8.84H39.14c2.9,0,5.24,4,5.24,8.84Z" transform="translate(0 -3.72)"/>
        <path class="cls-2" d="M6.92,0h24.9a6.93,6.93,0,0,1,6.93,6.93V20.59a6.93,6.93,0,0,1-6.93,6.93H6.93A6.93,6.93,0,0,1,0,20.59V6.92A6.92,6.92,0,0,1,6.92,0Z"/>
        <path class="cls-1" d="M52.4,23h0a3,3,0,0,1,2.47-1.45,3,3,0,0,1,2.69,1.65,3.36,3.36,0,0,1,2.87-1.65c2.45,0,3.08,1.91,3.08,4v5.57H61.75V25.84c0-1.19-.16-2.73-1.73-2.73-1.91,0-2,2-2,3.42v4.58H56.18V26.18c0-1.21-.06-3.06-1.71-3.06-1.91,0-2.07,2-2.07,3.42v4.58H50.61V21.8H52.4Z" transform="translate(0 -3.72)"/>
    </g>
</svg>

Path

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 149.44 39.78">
        <path class="cls-1" d="M44.38,34.66c0,4.88-2.35,8.84-5.24,8.84
            H20.31c-2.89,0-5.24-4-5.24-8.84V17.22c0-4.88,2.35-8.84,5.24-8.84
            H39.14c2.9,0,5.24,4,5.24,8.84Z" transform="translate(0 -3.72)"/>
</svg>

Path is more complex,

use a SVG-Editor

Path

Commands to draw

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

Path

Commands to draw Example

  1. Go to the coordinate 64 and 50
  2. make a line 101 to 82
  3. and close it

small letter relative values, big letter absolute values

View Box

<svg viewBox="0 0 149.44 39.78"><defs><style>.cls-1{fill:#676767;}.cls-2{fill:#f39200;}</style></defs><title>logo_neu_20161016</title>
    <g class="mygroup">
        <path class="cls-1" d="M44.38,34.66c0,4.88-2.35,8.84-5.24,8.84H20.31c-2.89,0-5.24-4-5.24-8.84V17.22c0-4.88,2.35-8.84,5.24-8.84H39.14c2.9,0,5.24,4,5.24,8.84Z" transform="translate(0 -3.72)"/>
        <path class="cls-2" d="M6.92,0h24.9a6.93,6.93,0,0,1,6.93,6.93V20.59a6.93,6.93,0,0,1-6.93,6.93H6.93A6.93,6.93,0,0,1,0,20.59V6.92A6.92,6.92,0,0,1,6.92,0Z"/>
        <path class="cls-1" d="M52.4,23h0a3,3,0,0,1,2.47-1.45,3,3,0,0,1,2.69,1.65,3.36,3.36,0,0,1,2.87-1.65c2.45,0,3.08,1.91,3.08,4v5.57H61.75V25.84c0-1.19-.16-2.73-1.73-2.73-1.91,0-2,2-2,3.42v4.58H56.18V26.18c0-1.21-.06-3.06-1.71-3.06-1.91,0-2.07,2-2.07,3.42v4.58H50.61V21.8H52.4Z" transform="translate(0 -3.72)"/>
    </g>
</svg>

View Box

hidden

visible

PreserveAspectRatio

playing with the view box

  • meet
  • slice

Sarasoueidan's Demo

Tools for Creating SVG

  • Illustrator
  • Sketch
  • Affinity Designer
  • Inkscape
  • Boxy
  • Keyshape

Tools to optimize SVG

Illustrator Export

Illustrator CC create small and clean SVG's with Export.

Menu -> Edit -> Export as 

Choose SVG in the Dropdown Menu

 

Compare the different tools for yourselve.

Joomla & SVG

  • Inline custom modul Code
  •  php file_get_content
    •  inline templatecode
    •  xlink:ref for using duplicate

PHP & SVG

<?php echo file_get_contents("images/my-logo.svg"); ?>

SVG - <use xlink:href> 

<svg version="1.1" class="symbolnone" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" xml:space="preserve">
<symbol id="usemylogo">
    <path class="wpmdruck1" d="M75.14,56.51a31.55,31.55,0,0,1,.44-10.7c1.17-5.18,6.07-7.62,8.3-8.51a26.33,26.33,0,0,0-            6.13-.78,25.52,25.52,0,0,0-3.83.29A25.24,25.24,0,0,0,59.32,79a22.18,22.18,0,0,1,4.27-    12.26C66.44,62.64,71,59.6,75.14,56.51Z" transform="translate(-52.53 -36.52)"></path>
    <path class="wpmdruck2" d="M68.81,85.51" transform="translate(-52.53 -36.52)"></path>
</symbol>
</svg>

<svg viewBox="0 0 285 54.83">
   <use xlink:href="#usemylogo"></use>
</svg>

html

css

.smbolnone {
    display: none;
}

CSS Animation

give your Groups and Path classes and id's

<svg>
    <g class="group">
        <rect class="rect" width="21.21" height="211.49"/>
        <path class="path" ..../> />
    </g>
    <path class="path" ..../> />
</svg>

CSS Animation

  • keyframes
  • filter effect - blur for the distance

pick the group or the rect, circle directly

CSS Animation

can be looks different in all browsers

for example rotate

SMIL is outdated

will not longer supported

Animation with GSAP

  • JS framework 
  • good Browser Support
  • easy animation 
  • solves transform-origin issue

SVG Animation and CSS Transforms: A Complicated Love Story​

Animation with GSAP

TweenLite, TweenMax

Stagger

draw an SVG

MorphSVG

drag SVG

Motion along the Path

Animation with GSAP

Tweenlite, Tweenmax

Animation with GSAP

GreenSock Ease Visualizer

Animation with GSAP

TweenStagger

Animation GSAP

David Walsh Blog

Relative HSL Color Animation

Animation with GSAP

MorphSVG

from #id to #id

TweenLite.to("#start, 1, {morphSVG:"#drop"});

convert the Path

MorphSVGPlugin.convertToPath("circle, rect, 
    ellipse, line, polygon, polyline");

Animation GSAP

MorphSVG

Animation GSAP

MorphSVG

var tl = new TimelineMax({repeat:-1, repeatDelay:1, delay:3});

tl.to("#star", 1.5, {
                morphSVG: "#bolt", 
                transformOrigin: "center center", 
                scale: 1
}).to("#star", 1.5, {
		morphSVG: "#cloud", 
                transformOrigin: "center center", 
                scale: 1, 
                fill:"#ADD8E6"
}).to("#star", 1.5, {
		morphSVG: "#rain", 
                transformOrigin: "center center", 
                scale: 1, 
                fill: "#4169E1"
}).to("#star", 1.5, {
		morphSVG: "#star", 
                transformOrigin: "center center", 
                scale: 1, 
                fill:"#FFA500"
});

Animation GSAP

MorphSVG

Animation GSAP

a Pen by Sarah Drasner

Drawing Rect Spinner

Drawing SVG with CSS

Article on Codepen by Max

Drawing SVG with CSS

Drawing SVG GSAP

Drawing SVG with GSAP

give your SVG's a stroke

then animate it

TweenMax.staggerFrom(".draw-svg", 2, {drawSVG:0}, 0.1);

Tell stories

Pen by Chris Gannon

Tell stories

Pen by Sarah Drasner

Data Visualisation with D3

easy to create an SVG in D3 

and make charts

Animation with Vue.js

Text

Any idea to use a animated SVG or story ?

MAKE IT HAPPEN

Questions?

Robert Mittl

@mittlmedien

mittl-medien.de

Made with Slides.com