
Resources
SVG Optimizers
Helpers
Learn more
Libraries
- Snap
- Bouncejs
- CSS animation Cheat Sheet
- Motion CSS
- Animate.css
- Effeckt.css
- The noun project
- SNAP
- Greensock
- Velocity
- SVGjs
Create sprite with IcoMoon
To accelerate animations use
transform: translate3d: (0,0,0)
SVG transform origin is at (0,0)
To set it in the middle of the object use
transform-origin: 50% 50%
In Firefox only absolute values work (you can also use cx and cy from a circle to position it.
Basic Shapes
line
rect
circle
ellipse
polygon
polyline
path
Sample rectangle
<svg>
<rect x="10" y="10"
width="500" height="500"
fill="yellow"
stroke="blue"
stroke-width="5" />
</svg>
Sample circle
<svg>
<circle cx="50" cy="20" r="15"
fill="yellow"
stroke="blue"
stroke-width="5" />
</svg>
Sample polygon
<svg>
<polygon points="32.8, 72.3 54.2,65.1 ..."
fill="yellow"
stroke="blue"
stroke-width="5" />
</svg>
Sample Linear Gradient
<svg>
<linearGradient id="gradient"
x1="0%" y1="0%"
x2="0%" y2="100%"
spreadMethod="pad">
<stop offset="0%" stop-color="#00cc00" stop-opacity="1"/>
<stop offset="100%" stop-color="#006600" stop-opacity="1"/>
</linearGradient>
<ellipse fill="url(#gradient)" cx="150" cy="50" rx="150" ry=50 />
</svg>
Include SVG into HTML
The options are:
SVG as <img>
in HTML. SVG is content!
<img src="nerds.svg" alt="Nerds being nerds." />
SVG as background-image
in CSS. SVG is design!
.main-header {
background-image: url(people.svg);
}
Inline SVG in HTML
<svg viewBox="0 0 1000 1000">
<rect x="10" y="10"
width="500" height="500"
fill="yellow"
stroke="blue"
stroke-width="5" />
</svg>
Other are> object, embed, iframe – not so useful
Examples
View animations in Chrome as some of them are not optimized for FF and it’s issues with relative transform-origin
property.
CSS Transform
See the Pen CSS transform by 22nds (@22nds) on CodePen.0
CSS 3D Transforms
See the Pen CSS 3d Transforms by 22nds (@22nds) on CodePen.0
CSS animation basics
See the Pen CSS animation basics by 22nds (@22nds) on CodePen.0
SVG flag animation
See the Pen Slovenian flag – css animation of SVG by 22nds (@22nds) on CodePen.0
SVG animation of rectangle
See the Pen SVG animation – rect by 22nds (@22nds) on CodePen.0
Airbnb balance.gif as SVG
See the Pen Airbnb balance.gif as SVG by 22nds (@22nds) on CodePen.0
CSS animation – paused/running on hover
See the Pen CSS animation – paused/running on hover by 22nds (@22nds) on CodePen.0
CSS animation – cat walk cycle
See the Pen CSS animation – walk cycle by 22nds (@22nds) on CodePen.0
SVG Square animation
See the Pen SVG square animation by 22nds (@22nds) on CodePen.0
Letter animation – SVG path
See the Pen Animating letter by 22nds (@22nds) on CodePen.0
Animated circle – path
See the Pen Animated SVG – circle path by 22nds (@22nds) on CodePen.0
Animated circles – paths
See the Pen SVG path animation – multiple paths by 22nds (@22nds) on CodePen.0
Animated circles – paths with dashes
See the Pen SVG path animation – multiple paths dashed by 22nds (@22nds) on CodePen.0
Animated SVG Path
See the Pen Animating SVG path by 22nds (@22nds) on CodePen.0
Animated SVG path – snail
See the Pen Draw SVG path by 22nds (@22nds) on CodePen.0
SVG loader
See the Pen SVG loader by 22nds (@22nds) on CodePen.0
Animated icon
See the Pen Animated SVG icon by 22nds (@22nds) on CodePen.0