Styling & Animating SVGs

8/15/2019 Styling & Animating SVGs

1/61

Styling & AnimatingScalable Vector Graph

with CSS

CSSC onf - May 27t h 20

@SaraSoueidan / saraso

http://twitter.com/SaraSoueidanhttp://sarasoueidan.com/http://sarasoueidan.com/http://twitter.com/SaraSoueidan


2/61

Hello,I’m Sara.


3/61


4/61

Scalable Vector Graphics (SVG

an XML-based vector image for

for two-dimensional graphics w

support for interactivity andanimation.


5/61

Why SVGs?

➔ SVGs are accessible

➔ Scalable & Resolution Independent

➔ Very Good Browser Support

➔ Smaller sizes (can be gzipped)

➔ Built-in Graphics Effects (Blend Modes, Filters, etc.)

Interactive and Styleable (CSS and Javascript)

➔ SVGs Have Tools

http://caniuse.com/#feat=svghttp://caniuse.com/#feat=svg


6/61

Creating SVGs

Adobe Illustrator Inkscape (Free) Sketch (Mac O


7/61

Optimize Exported Code (Standalone T

http://goo.gl/0XvzHs

SVG Editor by PeterCollingridge (Online)

http://goo.gl/0XvzHshttp://goo.gl/0XvzHs


8/61

Optimize Exported Code (Standalone T

SVG O (NodeJS-Based + GUI)


9/61

PeterEdito


10/61

Clean Up & Give Classes

bird.svg

Replace generic class names with semantic ones that describe your illustration.


11/61

Styling SVGs with CS


12/61

SVG Presentation Attributes


13/61

Shared with CSS SVG-only

font

font-family

font-size

font-size-adjust

font-stretch

font-style

font-variant

font-weight

direction

letter-spacing

text-decoration

unincode-bidi

word-spacing

visibility

text-rendering

writing-mode

clip-path

mask opacity

filter

pointer-events

image-rendering

clip

color

cursor

display

overflow

clip-rule

flood-color

flood-opacity

stop-opacity

kerning

text-anchor

color-profile color-

rendering

fill

fill-opacity

fill-rule

marker

marker-end

marker-mid marker-

start

stroke

stroke-width

stroke-opac

stroke-dash

stroke-dash

stroke-lineca

stroke-linejo

stroke-miterl

alignment-bas

baseline-shif

shape-renderi

glyph-orienta

glyph-orienta

color-interpo

color-interpo

dominant-base

lighting-colo

stop-color

enable-backgr

http://goo.


14/61

Inline Styles (style=” ”)


15/61

Embedded Styles ( ) Inside s

selector {/* styles */}

]]>

…

fi


16/61

Embedded Styles ( ) Outside

...

/* style rules */

fil


17/61

External Style Sheets


18/61

Style Rules (Selectors)

Type Selectors:

g {/* style a group */ }

circle, rect { fill: #009966; }

Class and ID Selectors:

.arrow-head { /* styles */ }

#bird { /* styles */ }

Dynamic Pseudo-Class Selectors:

.icon:hover, .icon:active, .icon:

focus { /* styles */ }

Pseudo-Class Selectors:

:first-child, :last-ch

child(), :visited, :li

last-of-type, :first-o

:nth-*-type(), :only-c

type, ...

Children Selectors:

g > circle {/* styles

Notes: Pseudo-elements/Gener

work.


19/61

Style Cascades

http://goo.gl/QHFp6w

Presentation attributes count as low level “author stylesheets”

and are overridden by any other style definition (external

stylesheets, document stylesheets and inline styles).

Example: Simple Hover Effect (Iconic)


20/61

Example: Simple Hover Effect (Iconic)

Changing the stroke color and

stroke width. Fading background

in on hover.

http://goo.gl/Fofspo

http://goo.gl/Fofspo


21/61

Embedding SVGs


22/61

http://goo.gl/oiYssv

1

2

3

4

5 …


23/61

SVG Embed TechniqueLinks, Ex

Interactivity

Inline …

background-image: url(image.svg);

* CSS animations won’t be played, but SVG (SMIL) animations will be preserved.

.

Example: CSS Animation


24/61


25/61

Example(Embedded)

Example: SVG (SMIL) Animation


26/61


27/61

Example (Embedded)


28/61

Responsifying SVG

Example


29/61


30/61

1. Remove Width & Height, Add view


31/61

2. Preserve Aspect Ratio


32/61

3. Embed & Wrap in a container

...

responsive-o

SVG can be embedded as , or inline as an . The technique will work for all

4 P ddi H k C t i


33/61

4. Padding Hack on Container

.my-svg-container {

height: 0;

position: relative; /* create positioning context fo

width: width-value;

padding-top: (SVG height / SVG width) * width-value;

}

responsive-

For owl.svg: padding-top = 300 / 300 * 100 = 1 * 100 = 100%;

If width of container = 60%: padding-top = 300 / 300 * 60 = 1 * 60 = 60%;

If owl.svg has width 250px, height 400px: padding-top = 400/250 * 100 = 1.6 * 100 = 160%;

4 P iti SVG I id C t i


34/61

4. Position SVG Inside Container

/* pull the svg to the top of the container */

.my-svg {

position: absolute;

top: 0;

left: 0;

width: 100%; /* only required for */

}

responsive-o

6 Resize!


35/61

6. Resize!


36/61

Animating SVGs with C


37/61

Transforming SVGs

I iti l HTML


38/61

Initial transform-origin on HTML

Box Model?transfor

(default

HTML elements (div, etc.) Yes 50%

SVG elements (circle, rect, etc.) No 0 0

*50% 50% = center of the HTML element itself

** 0 0 is the top left corner of the SVG canvas, not the element itself

f


39/61

CSS Transforms on HTML & SVG

...


40/61

Setting transform-origin on SVG El

1. Using Percentage Values: The value is set relative t

element’s bounding box, which includes the stroke

draw its border.

2. Using absolute length values: The origin is set rela

SVG canvas.

CSS T f HTML SVG (


41/61

CSS Transforms on HTML vs SVG (c

div, rect {

transform-origin: 50% 50%;

}

Heads up: Transform Origin Issue


42/61

Heads up: Transform-Origin IssueFirefox With Percentage Values

Setting transform-origin using a percentage value cudoesn’t work in Firefox. That is a bug. (It shouldn’t be a

if you’re not rotating anything.)

Setting it in absolute length values should be fairly simple using a graphic

Example: PinWheel

https://bugzilla.mozilla.org/show_bug.cgi?id=891074


43/61

PinWheel by http://pixeldoree.com/vector/free-vector-pinwheels-adobe-illustrator-and-png-files/

.wheel {

-webkit-transform-origin: 50% 50%;

transform-origin: 193px 164px;

animation:

spin 4s

cubic-bezier(.49,.05,.32,1.04)

infinite alternate;

}

@keyframes spin {

50% {

transform: rotate(360deg);

}

}

Heads up: Transform-Origin Issue I


44/61

Zooming out (or in) in Webkit/Blink

does not maintain the transform

origin at the center of the rotating

element. This is a bug.

This issue does not happen inFirefox, where the transform origin

is set in absolute values (relative to

the SVG canvas).

Heads up: Transform-Origin Issue IChrome With Percentage Values

https://code.google.com/p/chromium/issues/detail?id=375664https://bugs.webkit.org/show_bug.cgi?id=133150


45/61

→ Just use absolute values(for the time being)!

Heads up: Hardware Acceleration I


46/61

Heads up: Hardware Acceleration IChrome

CSS 3D transforms are hardware accelerated inChrome when applied to HTML elements. How

they are not accelerated when used on SVG ele

they have the same performance profile as SVG

transform attributes. They are accelerated in Fi


47/61

Animating SVG Paths

Animated Line Drawing


48/61

Animated Line Drawing

To Animate an SVG path you need to know its exact length. Then:

#path {

stroke-dasharray: pathLength;

stroke-dashoffset: pathLength;

/* transition stroke-dashoffset */

transition: stroke-dashoffset 2s linear;

}

svg:hover #path{

stroke-dashoffset: 0;

}

Example


49/61

#cable {

stroke: #FFF2B1;

stroke-dasharray: 4000 4000;


stroke-width: 4;

transition: stroke-dashoffset 8slinear;

}

svg:hover #cable {


}

/* turn lamp on */

.inner-lamp{

fill:grey;

transition: fill .5s ease-in 6s;

}

svg:hover .inner-lamp {

fill: #FBFFF8;

}

/* ... */

The animated path is positioned on

When SVG is hovered path is anima

“turned on” after path finishes anim

that is equal to the animation (tran

path.

Example 2


50/61

http://

Animated Line Drawing: Retrieving

http://goo.gl/zII9p0


51/61

var path = document.querySelector('.drawing-path'

path.getTotalLength();

//set CSS properties up

path.style.strokeDasharray = length + ' ' + length

path.style.strokeDashoffset = length;

//set transition uppath.style.transition = 'stroke-dashoffset 2s ease

out';

// animate

path.style.strokeDashoffset = '0';

//more: http://jakearchibald.com/2013/animated-line-draw

g gLength Using Javascript

#Recommende


52/61

http://jakearchibald.com/2013/animated-line-drawing-svg

Animated Paths (Morphing Paths)

http://jakearchibald.com/2013/animated-line-drawing-svg/


53/61


http://goo gl/ri9nwU


http://goo.gl/ri9nwU


54/61


The idea is to create a SVG with one path and to morph that

path into another one.

You’ll need: the first path, the second path, and possibly

intermediate paths (depending on your animation).

There is no way in CSS to animate

one SVG path into another.

http

Use Snap.svg

http://goo.gl/93gFYhhttp://snapsvg.io/


55/61

http://snapsvg.io/

p g

Animated SVGs As GIFs Replaceme

http://snapsvg.io/http://snapsvg.io/


56/61

“ By using animated SVGs instead o

GIFs we were able to reduce our pa

size from 1.6 mb to 389 kb , and re

our page load time from 8.75 s to 4ms. That’s a huge difference.”

Animated SVGs As GIFs Replaceme

http://oak.is/thinking/animated-svgs/

http://oak.is/thinking/animated-svgs/


57/61

Don’t forget to.

Make SVGs Accessible


58/61

Make SVGs Accessible

http://goo gl/sG7G0j

#Must

Optimize & Degrade Gracefully

http://goo.gl/sG7G0j


59/61

Optimize & Degrade Gracefully

http://goo gl/nhXtbu

#Mu

http://goo.gl/nhXtbu


60/61

http://caniuse.com/#search=svg

http://caniuse.com/#search=svghttp://caniuse.com/#search=svghttp://caniuse.com/#search=svghttp://caniuse.com/#search=svghttp://caniuse.com/#search=svg


61/61

Documents

Styling & Animating SVGs