SVG Animations – For Fun and Profit – So What Is SVG?
SVG Animations – For Fun and Profit – So What Is SVG?
0 1
SVG-Fun-Profit-Talk
SVG for Fun and Profit talk from 11/12/14On Github kayeouh / SVG-Fun-Profit-Talk
SVG Animations
For Fun and Profit
Table O' Contents
- What is SVG?
- SVG Basics
- JavaScript Helpers: Snap.svg
- But What About SMIL?
- Is This Something I'm Actually Going to Use?
- Resources
So What Is SVG?
Scalable Vector GraphicsThe Main SVG Components
- Lines: Straight Line & Curved (Bézier) Line
- Shapes: Circle, Ellipse, Polygon & Rectangle
Straight Line
<line fill="#27C5C9" stroke="#27C5C9" stroke-width="4" x1="55.7" y1="100" x2="903.3" y2="100"></line>
Curved Line
<path fill="none" stroke="#27C5C9" stroke-width="4" d="M55.7,127.1c0.1-73.7,847.8-72.9,847.7,0.8">
</path>
Circle/Ellipse
<circle fill="#27C5C9" stroke="#27C5C9" stroke-width="4" cx="479.5" cy="100" r="89.6">
</circle>
Rectangle/Polygon
<rect x="223.3" y="31.2" fill="#27C5C9" stroke="#27C5C9" stroke-width="4" width="512.3" height="137.7">
</rect>
See Any Commonalities?
- Fill
- Stroke
- Stroke-Width
- Coordinates (x, y, cx, cy, d)
- Size (width, height, d, radius)
Let's take some of these properties and put them into CSS
.curved{
fill: none;
stroke: green;
stroke-width: 4;
}
But where are the animations?
Stroke Animations
Polygon did some amazing animations with stroke-dasharray and stroke-offset.
JavaScript Libraries
Snap.svg is one of many JS SVG libraries.
Here's a fancy example of Snap.svg in action!
And here's another Snap.svg example.
UI/UX SVG Effects
What about SMIL?
(Synchronized Multimedia Integration Language)Courtesy of Noah Blon
<svg viewBox="0 0 100 100">
<path fill="#1EB287">
<animate attributeName="d" dur="3000ms" repeatCount="indefinite" keyTimes="0;
.0625;
.208333333;
.3125;
.395833333;
.645833333;
.833333333;
1;" calcMode="spline" keySplines="0,0,1,1;
.42,0,.58,1;
.42,0,1,1;
0,0,.58,1;
.42,0,.58,1;
.42,0,.58,1;
.42,0,.58,1" values="M 0,0
C 50,0 50,0 100,0
100,50 100,50 100,100
50,100 50,100 0,100
0,50 0,50 0,0
Z;
M 0,0
C 50,0 50,0 100,0
100,50 100,50 100,100
50,100 50,100 0,100
0,50 0,50 0,0
Z;
M 50,0
C 75,25 75,25 100,50
75,75 75,75 50,100
25,75 25,75 0,50
25,25 25,25 50,0
Z;
M 25,50
C 37.5,25 37.5,25 50,0
75,50 75,50 100,100
50,100 50,100 0,100
12.5,75 12.5,75 25,50
Z;
M 25,50
C 37.5,25 37.5,25 50,0
75,50 75,50 100,100
50,100 50,100 0,100
12.5,75 12.5,75 25,50
Z;
M 50,0
C 77.6,0 100,22.4 100,50
100,77.6 77.6,100 50,100
22.4,100, 0,77.6, 0,50
0,22.4, 22.4,0, 50,0
Z;
M 50,0
C 77.6,0 100,22.4 100,50
100,77.6 77.6,100 50,100
22.4,100, 0,77.6, 0,50
0,22.4, 22.4,0, 50,0
Z;
M 100,0
C 100,50 100,50 100,100
50,100 50,100 0,100
0,50 0,50 0,0
50,0 50,0 100,0
Z;"></animate>
<animate attributeName="fill" dur="3000ms" repeatCount="indefinite" keyTimes="0;
.0625;
.208333333;
.3125;
.395833333;
.645833333;
.833333333;
1;" calcMode="spline" keySplines="0,0,1,1;
.42,0,.58,1;
.42,0,1,1;
0,0,.58,1;
.42,0,.58,1;
.42,0,.58,1;
.42,0,.58,1" values="#1eb287;
#1eb287;
#1ca69e;
#188fc2;
#188fc2;
#bb625e;
#ca5f52;
#1eb287;"></animate>
</path></svg>
Great, But Can I Actually Use This For A Client?
I Don't Know.
Basic SVG Support for Major Browsers
CSS3 Animation Support for Major Browsers
SMIL Animation Support for Major Browsers
What Can I Use to Make SVG Elements?
Illustrator
Sketch
Inkscape
Your Own Brainmind
And Remember...
...But That's Okay.
Resources
Docs
Articles
- David Walsh's Intro to SVG Animation
- An Interview with Polygon: SVG Animations for Fun and Profit
- Sara Soueidan on SMIL