SVG animations with Examples

Resources

SVG Optimizers

Helpers

Learn more

Libraries

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>