styling & animating svgs
Post on 01-Jul-2018
226 Views
Preview:
TRANSCRIPT
-
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
-
8/15/2019 Styling & Animating SVGs
2/61
Hello,I’m Sara.
-
8/15/2019 Styling & Animating SVGs
3/61
-
8/15/2019 Styling & Animating SVGs
4/61
Scalable Vector Graphics (SVG
an XML-based vector image for
for two-dimensional graphics w
support for interactivity andanimation.
-
8/15/2019 Styling & Animating SVGs
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
-
8/15/2019 Styling & Animating SVGs
6/61
Creating SVGs
Adobe Illustrator Inkscape (Free) Sketch (Mac O
-
8/15/2019 Styling & Animating SVGs
7/61
Optimize Exported Code (Standalone T
http://goo.gl/0XvzHs
SVG Editor by PeterCollingridge (Online)
http://goo.gl/0XvzHshttp://goo.gl/0XvzHs
-
8/15/2019 Styling & Animating SVGs
8/61
Optimize Exported Code (Standalone T
SVG O (NodeJS-Based + GUI)
-
8/15/2019 Styling & Animating SVGs
9/61
PeterEdito
-
8/15/2019 Styling & Animating SVGs
10/61
Clean Up & Give Classes
bird.svg
Replace generic class names with semantic ones that describe your illustration.
-
8/15/2019 Styling & Animating SVGs
11/61
Styling SVGs with CS
-
8/15/2019 Styling & Animating SVGs
12/61
SVG Presentation Attributes
-
8/15/2019 Styling & Animating SVGs
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.
-
8/15/2019 Styling & Animating SVGs
14/61
Inline Styles (style=” ”)
-
8/15/2019 Styling & Animating SVGs
15/61
Embedded Styles ( ) Inside s
selector {/* styles */}
]]>
…
fi
-
8/15/2019 Styling & Animating SVGs
16/61
Embedded Styles ( ) Outside
...
/* style rules */
fil
-
8/15/2019 Styling & Animating SVGs
17/61
External Style Sheets
-
8/15/2019 Styling & Animating SVGs
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.
-
8/15/2019 Styling & Animating SVGs
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)
-
8/15/2019 Styling & Animating SVGs
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
-
8/15/2019 Styling & Animating SVGs
21/61
Embedding SVGs
-
8/15/2019 Styling & Animating SVGs
22/61
http://goo.gl/oiYssv
1
2
3
4
5 …
-
8/15/2019 Styling & Animating SVGs
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
-
8/15/2019 Styling & Animating SVGs
24/61
-
8/15/2019 Styling & Animating SVGs
25/61
Example(Embedded)
Example: SVG (SMIL) Animation
-
8/15/2019 Styling & Animating SVGs
26/61
-
8/15/2019 Styling & Animating SVGs
27/61
Example (Embedded)
-
8/15/2019 Styling & Animating SVGs
28/61
Responsifying SVG
Example
-
8/15/2019 Styling & Animating SVGs
29/61
-
8/15/2019 Styling & Animating SVGs
30/61
1. Remove Width & Height, Add view
-
8/15/2019 Styling & Animating SVGs
31/61
2. Preserve Aspect Ratio
-
8/15/2019 Styling & Animating SVGs
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
-
8/15/2019 Styling & Animating SVGs
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
-
8/15/2019 Styling & Animating SVGs
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!
-
8/15/2019 Styling & Animating SVGs
35/61
6. Resize!
-
8/15/2019 Styling & Animating SVGs
36/61
Animating SVGs with C
-
8/15/2019 Styling & Animating SVGs
37/61
Transforming SVGs
I iti l HTML
-
8/15/2019 Styling & Animating SVGs
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
-
8/15/2019 Styling & Animating SVGs
39/61
CSS Transforms on HTML & SVG
...
-
8/15/2019 Styling & Animating SVGs
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 (
-
8/15/2019 Styling & Animating SVGs
41/61
CSS Transforms on HTML vs SVG (c
div, rect {
transform-origin: 50% 50%;
}
Heads up: Transform Origin Issue
-
8/15/2019 Styling & Animating SVGs
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
-
8/15/2019 Styling & Animating SVGs
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
-
8/15/2019 Styling & Animating SVGs
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
-
8/15/2019 Styling & Animating SVGs
45/61
→ Just use absolute values(for the time being)!
Heads up: Hardware Acceleration I
-
8/15/2019 Styling & Animating SVGs
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
-
8/15/2019 Styling & Animating SVGs
47/61
Animating SVG Paths
Animated Line Drawing
-
8/15/2019 Styling & Animating SVGs
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
-
8/15/2019 Styling & Animating SVGs
49/61
#cable {
stroke: #FFF2B1;
stroke-dasharray: 4000 4000;
stroke-dashoffset: 4000;
stroke-width: 4;
transition: stroke-dashoffset 8slinear;
}
svg:hover #cable {
stroke-dashoffset: 0;
}
/* 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
-
8/15/2019 Styling & Animating SVGs
50/61
http://
Animated Line Drawing: Retrieving
http://goo.gl/zII9p0
-
8/15/2019 Styling & Animating SVGs
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
-
8/15/2019 Styling & Animating SVGs
52/61
http://jakearchibald.com/2013/animated-line-drawing-svg
Animated Paths (Morphing Paths)
http://jakearchibald.com/2013/animated-line-drawing-svg/
-
8/15/2019 Styling & Animating SVGs
53/61
Animated Paths (Morphing Paths)
http://goo gl/ri9nwU
Animated Paths (Morphing Paths)
http://goo.gl/ri9nwU
-
8/15/2019 Styling & Animating SVGs
54/61
Animated Paths (Morphing Paths)
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/
-
8/15/2019 Styling & Animating SVGs
55/61
http://snapsvg.io/
p g
Animated SVGs As GIFs Replaceme
http://snapsvg.io/http://snapsvg.io/
-
8/15/2019 Styling & Animating SVGs
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/
-
8/15/2019 Styling & Animating SVGs
57/61
Don’t forget to.
Make SVGs Accessible
-
8/15/2019 Styling & Animating SVGs
58/61
Make SVGs Accessible
http://goo gl/sG7G0j
#Must
Optimize & Degrade Gracefully
http://goo.gl/sG7G0j
-
8/15/2019 Styling & Animating SVGs
59/61
Optimize & Degrade Gracefully
http://goo gl/nhXtbu
#Mu
http://goo.gl/nhXtbu
-
8/15/2019 Styling & Animating SVGs
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
-
8/15/2019 Styling & Animating SVGs
61/61
top related