Animate SVG icons with CSS and Snap | CodyHouse

Share

SVG (scalable vector graphics) are becoming more and more popular on the web these days – and support is getting closer to being universal. In fact, if we didn’t have to support IE8 anymore, it would be universal!

One benefit of SVG is that it looks great on all devices, regardless of resolution (hence the scalable part of the name). Other benefits include the fact that they can be recolored on the fly with CSS, plus animation.

I’m heavily into reading about and experimenting with SVGs these days, and here’s a cool article I found on Smashing Magazine, so I thought I’d share. It not only covers the animation aspect noted in its title, but also has some great tips on creating the SVGs themselves as well as optimization.

Animate SVG icons with CSS and Snap | CodyHouse

Curious about the code behind the SVG logo? Here it is...
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 100">

<title>SVG Logo</title>

<a xlink:href="http://www.w3.org/Graphics/SVG/" target="_parent"
xlink:title="W3C SVG Working Group home page">

<rect
id="background"
fill="#FF9900"
width="100"
height="100"
rx="4"
ry="4"/>

<rect
id="top-left"
fill="#FFB13B"
width="50"
height="50"
rx="4"
ry="4"/>

<rect
id="bottom-right"
x="50"
y="50"
fill="#DE8500"
width="50"
height="50"
rx="4"
ry="4"/>

<g id="circles" fill="#FF9900">
<circle
id="n"
cx="50"
cy="18.4"
r="18.4"/>

<circle
id="ne"
cx="72.4"
cy="27.6"
r="18.4"/>

<circle
id="e"
cx="81.6"
cy="50"
r="18.4"/>

<circle
id="se"
cx="72.4"
cy="72.4"
r="18.4"/>

<circle
id="s"
cx="50"
cy="81.6"
r="18.4"/>

<circle
id="sw"
cx="27.6"
cy="72.4"
r="18.4"/>

<circle
id="w"
cx="18.4"
cy="50"
r="18.4"/>

<circle
id="nw"
cx="27.6"
cy="27.6"
r="18.4"/>
</g>

<g id="stars">
<path
id="black-star"
d="M 63.086, 18.385
c 0.000, -7.227 -5.859,-13.086 -13.100,-13.086
c -7.235, 0.000 -13.096, 5.859 -13.096, 13.086
c -5.100, -5.110 -13.395, -5.110 -18.497, 0.000
c -5.119, 5.120 -5.119, 13.408 0.000, 18.524
c -7.234, 0.000 -13.103, 5.859 -13.103, 13.085
c 0.000, 7.230 5.870, 13.098 13.103, 13.098
c -5.119, 5.110 -5.119, 13.395 0.000, 18.515
c 5.102, 5.104 13.397, 5.104 18.497, 0.000
c 0.000, 7.228 5.860, 13.083 13.096, 13.083
c 7.240, 0.000 13.100, -5.855 13.100,-13.083
c 5.118, 5.104 13.416, 5.104 18.513, 0.000
c 5.101, -5.120 5.101,-13.410 0.000,-18.515
c 7.216, 0.000 13.081, -5.869 13.081,-13.098
c 0.000, -7.227 -5.865,-13.085 -13.081,-13.085
c 5.101, -5.119 5.101,-13.406 0.000,-18.524
C 76.502, 13.275 68.206, 13.275 63.086, 18.385 z"/>

<path
id="white-star"
fill="#FFFFFF"
d="M 55.003, 23.405
v 14.488
L 65.260, 27.640
c 0.000, -1.812 0.691,-3.618 2.066, -5.005
c 2.780, -2.771 7.275,-2.771 10.024, 0.000
c 2.771, 2.766 2.771, 7.255 0.000, 10.027
c -1.377, 1.375 -3.195, 2.072 -5.015, 2.072
L 62.101, 44.982
H 76.590
c 1.290, -1.280 3.054,-2.076 5.011, -2.076
c 3.900, 0.000 7.078, 3.179 7.078, 7.087
c 0.000, 3.906 -3.178, 7.088 -7.078, 7.088
c -1.957, 0.000 -3.721,-0.798 -5.011, -2.072
H 62.100
l 10.229, 10.244
c 1.824, 0.000 3.642, 0.694 5.015, 2.086
c 2.774, 2.759 2.774, 7.250 0.000, 10.010
c -2.750, 2.774 -7.239, 2.774 -10.025, 0.000
c -1.372, -1.372 -2.064,-3.192 -2.064, -5.003
L 55.000, 62.094
v 14.499
c 1.271, 1.276 2.084, 3.054 2.084, 5.013
c 0.000, 3.906 -3.177, 7.077 -7.098, 7.077
c -3.919, 0.000 -7.094,-3.167 -7.094, -7.077
c 0.000, -1.959 0.811,-3.732 2.081, -5.013
V 62.094
L 34.738, 72.346
c 0.000, 1.812 -0.705, 3.627 -2.084, 5.003
c -2.769, 2.772 -7.251, 2.772 -10.024, 0.000
c -2.775, -2.764 -2.775,-7.253 0.000,-10.012
c 1.377, -1.390 3.214,-2.086 5.012, -2.086
l 10.257,-10.242
H 23.414
c -1.289, 1.276 -3.072, 2.072 -5.015, 2.072
c -3.917, 0.000 -7.096,-3.180 -7.096, -7.088
s 3.177, -7.087 7.096,-7.087
c 1.940, 0.000 3.725, 0.796 5.015, 2.076
h 14.488
L 27.646, 34.736
c -1.797, 0.000 -3.632,-0.697 -5.012, -2.071
c -2.775, -2.772 -2.775,-7.260 0.000,-10.027
c 2.773, -2.771 7.256,-2.771 10.027, 0.000
c 1.375, 1.386 2.083, 3.195 2.083, 5.005
l 10.235, 10.252
V 23.407
c -1.270, -1.287 -2.082,-3.053 -2.082, -5.023
c 0.000, -3.908 3.175,-7.079 7.096, -7.079
c 3.919, 0.000 7.097, 3.168 7.097, 7.079
C 57.088, 20.356 56.274,22.119 55.003, 23.405 z"/>
</g>

<g id="svg-textbox">
<path
id="text-backdrop"
fill="black"
d="M 5.30,50.00
H 94.68
V 90.00
Q 94.68,95.00 89.68,95.00
H 10.30
Q 5.30,95.00 5.30,90.00 Z"/>

<path
id="shine"
fill="#3F3F3F"
d="M 14.657,54.211
h 71.394
c 2.908, 0.000 5.312, 2.385 5.312, 5.315
v 17.910
c -27.584,-3.403 -54.926,-8.125 -82.011,-7.683
V 59.526
C 9.353,56.596 11.743,54.211 14.657,54.211
L 14.657,54.211 z"/>

<g id="svg-text">
<title>SVG</title>
<path
id="S"
fill="#FFFFFF"
stroke="#000000"
stroke-width="0.5035"
d="M 18.312,72.927
c -2.103,-2.107 -3.407, -5.028 -3.407, -8.253
c 0.000,-6.445 5.223,-11.672 11.666,-11.672
c 6.446, 0.000 11.667, 5.225 11.667, 11.672
h -6.832
c 0.000,-2.674 -2.168, -4.837 -4.835, -4.837
c -2.663, 0.000 -4.838, 2.163 -4.838, 4.837
c 0.000, 1.338 0.549, 2.536 1.415, 3.420
l 0.000, 0.000
c 0.883, 0.874 2.101, 1.405 3.423, 1.405
v 0.012
c 3.232, 0.000 6.145, 1.309 8.243, 3.416
l 0.000, 0.000
c 2.118, 2.111 3.424, 5.034 3.424, 8.248
c 0.000, 6.454 -5.221, 11.680 -11.667, 11.680
c -6.442, 0.000 -11.666, -5.222 -11.666,-11.680
h 6.828
c 0.000, 2.679 2.175, 4.835 4.838, 4.835
c 2.667, 0.000 4.835, -2.156 4.835, -4.835
c 0.000,-1.329 -0.545, -2.527 -1.429, -3.407
l 0.000, 0.000
c -0.864,-0.880 -2.082, -1.418 -3.406, -1.418
l 0.000, 0.000
C 23.341,76.350 20.429, 75.036 18.312, 72.927
L 18.312,72.927
L 18.312,72.927 z"/>
<polygon
id="V"
fill="#FFFFFF"
stroke="#000000"
stroke-width="0.5035"
points="61.588,53.005
53.344,92.854
46.494,92.854
38.236,53.005
45.082,53.005
49.920,76.342
54.755,53.005"/>

<path
id="G"
fill="#FFFFFF"
stroke="#000000"
stroke-width="0.5035"
d="M 73.255,69.513
h 11.683
v 11.664
l 0.000, 0.000
c 0.000, 6.452 -5.226,11.678 -11.669, 11.678
c -6.441, 0.000 -11.666,-5.226 -11.666,-11.678
l 0.000, 0.000
V 64.676
h -0.017
C 61.586,58.229 66.827,53.000 73.253, 53.000
c 6.459, 0.000 11.683, 5.225 11.683, 11.676
h -6.849
c 0.000,-2.674 -2.152,-4.837 -4.834, -4.837
c -2.647, 0.000 -4.820, 2.163 -4.820, 4.837
v 16.501
l 0.000, 0.000
c 0.000, 2.675 2.173, 4.837 4.820, 4.837
c 2.682, 0.000 4.834,-2.162 4.834, -4.827
v -0.012
v -4.827
h -4.834
L 73.255,69.513
L 73.255,69.513 z"/>
</g>
</g>
</a>
</svg>
Share

Leave a Reply

Your email address will not be published. Required fields are marked *