Skip to content

Commit f3f6731

Browse files
rhauckrhauck
committed
Merge pull request #101 from cabanier/master
Added animated SVG
2 parents e885672 + 5abebef commit f3f6731

File tree

1 file changed

+172
-0
lines changed

1 file changed

+172
-0
lines changed

‎_posts/2014-08-20-svg.md

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,185 @@ permalink: svg
1414

1515
Scalable Vector Graphics, short SVG, is a resolution independent graphics format. It doesn’t matter if you view SVG images on a 10 years old CRT screen, a brand new HiDPI screen or if you zoom into the graphics by a factor of 1000: The graphics will always look sharp and crisp. SVG consists of markup that describes the content, just like HTML. This provides users the best possible and most accessible experience. The markup allows authors to create rich dynamic content with JavaScript, SVG Animations or CSS transitions and animations.
1616

17+
The following example is an SVG image animated with CSS:
18+
19+
<div id="cat">
20+
<style>
21+
#cat {
22+
background: #ee7579;
23+
}
24+
25+
#cat {
26+
max-width: 300px;
27+
margin: 0 auto;
28+
}
29+
#innercat {
30+
-webkit-transform: rotate(0);
31+
-webkit-transition: -webkit-transform 2s;
32+
-webkit-transform-origin: 50% 100%;
33+
}
34+
#innercat:hover {
35+
-webkit-transform: rotate(30deg);
36+
}
37+
38+
#cauda {
39+
width: 72px;
40+
height: 79px;
41+
-webkit-animation: cauda 6s linear infinite;
42+
-webkit-transform-origin: 80% 80%;
43+
}
44+
45+
@-webkit-keyframes cauda {
46+
0% {
47+
-webkit-transform: rotate(-10deg);
48+
transform: rotate(-10deg);
49+
}
50+
50% {
51+
-webkit-transform: rotate(30deg);
52+
transform: rotate(30deg);
53+
}
54+
100% {
55+
-webkit-transform: rotate(-10deg);
56+
transform: rotate(-10deg);
57+
}
58+
}
59+
</style>
60+
<svg id="innersvg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
61+
viewBox="0 0 400 500" height="375px" width="100%" xml:space="preserve">
62+
<g id="innercat">
63+
<g id="cauda" width="72" height="79">
64+
<path id="cauda_in" fill="#333333" d="M164.7,376.7l6.2,9.9c0,0-15.1,13-33.7,16.8c-13.4,2.8-61.1,6.4-61.1-41.8
65+
s33.6-56.2,18.4-15.5c0,0-5.5,17.1,1.6,28.6s27.4,21.7,45.8,12.2L164.7,376.7z" width="72" height="79"/>
66+
</g>
67+
<g>
68+
<g>
69+
<path fill="#4D4D4D" d="M242.2,95L242.2,95l-0.1-0.1C242.1,94.9,242.1,95,242.2,95z"/>
70+
<path fill="#4D4D4D" d="M111.9,78.4L111.9,78.4C128.4,67.2,140,37.8,140,37.8l10.4,9.1c0,0-3-34.6,5.2-26.4s30.7,26,30.7,26
71+
s-4.1-21.9,0-17.8c4,4,20.8,38.6,53.5,64.5c-18.5-14.5-42.9-28.1-74-41.4C144.8,60.8,127,69.5,111.9,78.4z"/>
72+
<g>
73+
<path fill="#4D4D4D" d="M242,94.9c-0.8-0.6-1.5-1.2-2.2-1.7C240.5,93.7,241.3,94.3,242,94.9z"/>
74+
<path fill="#4D4D4D" d="M243.1,95.8c0.5-0.6,0.4-1.5-0.2-2l0,0c-0.7-0.6-1.5-1.2-2.2-1.8l0,0c0,0,0,0-0.1,0l0,0l0,0l0,0l0,0l0,0
75+
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.4-0.2-0.8-0.2-1.1-0.1l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
76+
l0,0l0,0l0,0c0,0,0,0-0.1,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0,0,0,0,0,0.1l0,0
77+
c-0.2,0.3-0.3,0.6-0.3,1l0,0l0,0l0,0c0,0.4,0.2,0.7,0.5,0.9l0,0c0.1,0.1,0.2,0.2,0.3,0.3l0,0c0.6,0.5,1.3,1,1.9,1.5l0,0l0.9-1.1
78+
l-0.9,1.1c0.3,0.2,0.6,0.3,0.9,0.3l0,0C242.5,96.3,242.9,96.1,243.1,95.8L243.1,95.8z"/>
79+
</g>
80+
</g>
81+
</g>
82+
<g>
83+
<g>
84+
<path fill="#333333" d="M158.8,95.7L158.8,95.7l0.1-0.1C158.8,95.7,158.8,95.7,158.8,95.7z"/>
85+
<path fill="#333333" d="M289,79.2L289,79.2c-16.4-11.3-28.1-40.7-28.1-40.7l-10.4,9.1c0,0,3-34.6-5.2-26.4s-30.7,26-30.7,26
86+
s4.1-21.9,0-17.8c-4,4-20.8,38.6-53.5,64.5c18.5-14.5,42.9-28.1,74-41.4C256.1,61.5,274,70.2,289,79.2z"/>
87+
<g>
88+
<path fill="#333333" d="M158.9,95.6c0.8-0.6,1.5-1.2,2.2-1.7C160.4,94.5,159.6,95.1,158.9,95.6z"/>
89+
<path fill="#333333" d="M157.8,96.5c-0.5-0.6-0.4-1.5,0.2-2l0,0c0.7-0.6,1.5-1.2,2.2-1.8l0,0c0,0,0,0,0.1,0l0,0l0,0l0,0l0,0l0,0
90+
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.4-0.2,0.8-0.2,1.1-0.1l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
91+
l0,0l0,0c0,0,0,0,0.1,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0,0,0,0,0,0.1l0,0
92+
c0.2,0.3,0.3,0.6,0.3,1l0,0l0,0l0,0c0,0.4-0.2,0.7-0.5,0.9l0,0c-0.1,0.1-0.2,0.2-0.3,0.3l0,0c-0.6,0.5-1.3,1-1.9,1.5l0,0
93+
l-0.9-1.1l0.9,1.1c-0.3,0.2-0.6,0.3-0.9,0.3l0,0C158.5,97,158.1,96.9,157.8,96.5L157.8,96.5z"/>
94+
</g>
95+
</g>
96+
</g>
97+
<path fill="#232323" d="M241.2,276.8c0,0,54.5,100.7,3.9,105.1"/>
98+
<path fill="#333333" d="M158.7,276.8c0,0-54.5,100.7-3.9,105.1"/>
99+
<path fill="#333333" d="M199.4,276.8H241c0,0,43.8,128.4-12,127.7h-29.6"/>
100+
<path fill="#4D4D4D" d="M200.1,276.8h-41.3c0,0-43.8,128.4,12,127.7h29.4"/>
101+
<path fill="#333333" d="M265.1,65.2c0,0,43-15.3,48.9-13.1c5.8,2.2,13.9,25.5,0,48.2"/>
102+
<path fill="#232323" d="M287.7,69.5c0,0,36.5-17.5,25.5,17.5"/>
103+
<path fill="#333333" d="M199.3,278.6c5.2-0.7,161.4,11.2,151.9-109S199.3,47,199.3,47"/>
104+
<path fill="#4D4D4D" d="M134.8,64.4c0,0-43-15.3-48.9-13.1c-5.8,2.2-13.9,25.5,0,48.2"/>
105+
<path fill="#333333" d="M114.4,68.8c0,0-36.5-17.5-25.5,17.5"/>
106+
<path fill="#4D4D4D" d="M199.9,278.6c-5.2-0.7-161.4,11.2-151.9-109S199.9,47,199.9,47"/>
107+
<g>
108+
<g>
109+
<g>
110+
<defs>
111+
<path id="SVGID_1_" d="M245.2,228.4c0.4,15.3-18.4,22.6-46.5,22.6s-42.3-7.9-43.6-23.1c-1.8-21,15.3-18.7,43.4-18.7
112+
C226.5,209.2,244.6,207.4,245.2,228.4z"/>
113+
</defs>
114+
<clipPath id="SVGID_2_">
115+
<use xlink:href="#SVGID_1_" overflow="visible"/>
116+
</clipPath>
117+
<path clip-path="url(#SVGID_2_)" fill="#1E1E1E" d="M245.2,228.4c0.4,15.3-18.4,22.6-46.5,22.6s-42.3-7.9-43.6-23.1
118+
c-1.8-21,15.3-18.7,43.4-18.7C226.5,209.2,244.6,207.4,245.2,228.4z"/>
119+
</g>
120+
</g>
121+
<g>
122+
<g>
123+
<defs>
124+
<path id="SVGID_3_" d="M245.2,228.4c0.4,15.3-18.4,22.6-46.5,22.6s-42.3-7.9-43.6-23.1c-1.8-21,15.3-18.7,43.4-18.7
125+
C226.5,209.2,244.6,207.4,245.2,228.4z"/>
126+
</defs>
127+
<clipPath id="SVGID_4_">
128+
<use xlink:href="#SVGID_3_" overflow="visible"/>
129+
</clipPath>
130+
<path clip-path="url(#SVGID_4_)" fill="#F05B61" d="M159.4,250.1c-0.3-13.3,16-19.6,40.3-19.6s36.6,6.8,37.8,20
131+
c1.6,18.2-13.2,16.2-37.6,16.2C175.6,266.7,159.9,268.3,159.4,250.1z"/>
132+
</g>
133+
</g>
134+
</g>
135+
<path fill="#333333" d="M209.4,398c-2.5,6.3-4.6,12.7-4.9,19.5c-0.5,9.5,2,18.9,5.2,27.7c1.7,4.6,12.8,1.7,11.2-2.8
136+
c-2.9-8.1-5.3-16.6-5.1-25.2c0.2-6.3,2-12.3,4.4-18.1c2.2-5.5-8.1-5.3-9.8-1.1H209.4z"/>
137+
<path fill="#4D4D4D" d="M194.2,396.7c-2.9,15.4-8.3,33-0.3,47.8c1.3,2.4-3.7,2.9-4.9,3.1c-2.8,0.3-6.2-0.9-7.7-3.5
138+
c-8.5-15.7,0.2-35.5,3.4-52C185.1,389.9,194.8,393.4,194.2,396.7z"/>
139+
<path fill="#1E1E1E" d="M212.1,167.6c-2.7-5.2-22.5-5.5-24.6,0c-1.3,3.6,7.6,11,12.1,10.8C204.2,178.1,213.7,170.7,212.1,167.6z"/>
140+
<path fill="#1E1E1E" d="M230.5,136.4c3.4-6,6.5-9.9,9.2-12.1l0,0c2.7-2.3,4.9-2.9,6.8-2.9l0,0c3,0,5.9,2,8.3,4.7l0,0
141+
c2.4,2.7,4.1,5.8,4.6,7l0,0c0.2,0.3,0.2,0.5,0.2,0.5l0,0l0,0c0.6,1.4,2.3,2.1,3.8,1.5l0,0c1.4-0.6,2.1-2.3,1.5-3.8l0,0
142+
c-0.1-0.2-3.5-8.3-10.3-13l0,0c-2.3-1.5-5-2.7-8.2-2.7l0,0c-3.4,0-7,1.4-10.4,4.2l0,0c-3.5,2.9-7,7.3-10.5,13.8l0,0
143+
c-0.8,1.4-0.3,3.1,1.1,3.9l0,0c0.4,0.2,0.9,0.4,1.4,0.4l0,0C229,137.9,230,137.3,230.5,136.4L230.5,136.4z"/>
144+
<path fill="#1E1E1E" d="M140.3,136.4c3.4-6,6.5-9.9,9.2-12.1l0,0c2.7-2.3,4.9-2.9,6.8-2.9l0,0c3,0,5.9,2,8.3,4.7l0,0
145+
c2.4,2.7,4.1,5.8,4.6,7l0,0c0.2,0.3,0.2,0.5,0.2,0.5l0,0l0,0c0.6,1.4,2.3,2.1,3.8,1.5l0,0c1.4-0.6,2.1-2.3,1.5-3.8l0,0
146+
c-0.1-0.2-3.5-8.3-10.3-13l0,0c-2.3-1.5-5-2.7-8.2-2.7l0,0c-3.4,0-7,1.4-10.4,4.2l0,0c-3.5,2.9-7,7.3-10.5,13.8l0,0
147+
c-0.8,1.4-0.3,3.1,1.1,3.9l0,0c0.4,0.2,0.9,0.4,1.4,0.4l0,0C138.7,137.9,139.7,137.3,140.3,136.4L140.3,136.4z"/>
148+
<path fill="#333333" d="M176.8,290.6c0,0,9.5,4.4,23.3,5.1v94.9C200.1,390.6,143.9,397.1,176.8,290.6z"/>
149+
<path fill="#232323" d="M223.5,290.6c0,0-9.5,4.4-23.3,5.1v94.9C200.1,390.6,256.3,397.1,223.5,290.6z"/>
150+
<g>
151+
<g>
152+
<path fill="#4D4D4D" d="M94.8,97.2L94.8,97.2L94.8,97.2C94.7,97.3,94.7,97.2,94.8,97.2z"/>
153+
<path fill="#4D4D4D" d="M78.2,227.4L78.2,227.4C67,211,37.5,199.3,37.5,199.3l9.1-10.4c0,0-33.9-45.1-25.7-53.3
154+
c8.2-8.2,25.2,17.4,25.2,17.4s-21.1-44-17-48.2c4-4,37.9,27.3,63.8-5.3c-14.5,18.5-28.1,42.9-41.4,74
155+
C60.5,194.5,69.3,212.4,78.2,227.4z"/>
156+
<g>
157+
<path fill="#4D4D4D" d="M94.7,97.3c-0.6,0.8-1.2,1.5-1.7,2.2C93.5,98.8,94.1,98,94.7,97.3z"/>
158+
<path fill="#4D4D4D" d="M95.5,96.2c-0.6-0.5-1.5-0.4-2,0.2l0,0c-0.6,0.7-1.2,1.5-1.8,2.2l0,0c0,0,0,0,0,0.1l0,0l0,0l0,0l0,0l0,0
159+
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.2,0.4-0.2,0.8-0.1,1.1l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
160+
l0,0l0,0l0,0c0,0,0,0,0,0.1l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0,0,0,0,0.1,0l0,0
161+
c0.3,0.2,0.6,0.3,1,0.3l0,0l0,0l0,0c0.4,0,0.7-0.2,0.9-0.5l0,0c0.1-0.1,0.2-0.2,0.3-0.3l0,0c0.5-0.6,1-1.3,1.5-1.9l0,0l-1.1-0.9
162+
l1.1,0.9c0.2-0.3,0.3-0.6,0.3-0.9l0,0C96.1,96.9,95.9,96.5,95.5,96.2L95.5,96.2z"/>
163+
</g>
164+
</g>
165+
</g>
166+
<g>
167+
<g>
168+
<path fill="#333333" d="M302.8,99.1L302.8,99.1l0.1,0.1C302.8,99.1,302.8,99.1,302.8,99.1z"/>
169+
<path fill="#333333" d="M319.3,229.3L319.3,229.3c11.3-16.4,40.7-28.1,40.7-28.1l-9.1-10.4c0,0,34.6,3,26.4-5.2s-26-30.7-26-30.7
170+
s21.9,4.1,17.8,0c-4-4-38.6-20.8-64.5-53.5c14.5,18.5,28.1,42.9,41.4,74C337,196.4,328.3,214.3,319.3,229.3z"/>
171+
<g>
172+
<path fill="#333333" d="M302.9,99.2c0.6,0.8,1.2,1.5,1.7,2.2C304,100.7,303.5,99.9,302.9,99.2z"/>
173+
<path fill="#333333" d="M302,98.1c0.6-0.5,1.5-0.4,2,0.2l0,0c0.6,0.7,1.2,1.5,1.8,2.2l0,0c0,0,0,0,0,0.1l0,0l0,0l0,0l0,0l0,0l0,0
174+
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.2,0.4,0.2,0.8,0.1,1.1l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
175+
l0,0c0,0,0,0,0,0.1l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0,0,0,0-0.1,0l0,0
176+
c-0.3,0.2-0.6,0.3-1,0.3l0,0l0,0l0,0c-0.4,0-0.7-0.2-0.9-0.5l0,0c-0.1-0.1-0.2-0.2-0.3-0.3l0,0c-0.5-0.6-1-1.3-1.5-1.9l0,0
177+
l1.1-0.9l-1.1,0.9c-0.2-0.3-0.3-0.6-0.3-0.9l0,0C301.5,98.8,301.6,98.4,302,98.1L302,98.1z"/>
178+
</g>
179+
</g>
180+
</g>
181+
</g>
182+
</svg>
183+
<center><small>Credit: <a href="http://codepen.io/miukimiu/">Elizabet Oliveira</a></small></center>
184+
</div><!-- /#cat-->
185+
186+
If you want to see the source, you can look at Elizabet's CodePen [here]("http://codepen.io/miukimiu/pen/Igouf").
187+
17188
At one end of the platform, the Adobe Web Platform team works to [improve the output](http://blogs.adobe.com/webplatform/2014/01/27/better-svg-for-a-better-web/) from Adobe tools, such as Illustrator. At the other end, the team participates in the SVG Working Group and on SVG-related specification, such as:
18189

19190
* [Filter Effects Module Level 1](http://dev.w3.org/fxtf/filters/){:target="_blank"}
20191
* [CSS Masking Module Level 1](http://dev.w3.org/fxtf/css-masking-1/){:target="_blank"}
21192
* [CSS Transforms Module Level 1](http://dev.w3.org/csswg/css-transforms/){:target="_blank"}
22193
* [DOMMatrix interface](http://dev.w3.org/fxtf/matrix/){:target="_blank"}
23194
* [Geometry Interfaces Module Level 1](http://dev.w3.org/fxtf/geometry/){:target="_blank"}
195+
* [Compositing and Blending Level 1](http://dev.w3.org/fxtf/compositing-1/){:target="_blank"}
24196

25197
##When can I use it?
26198

0 commit comments

Comments
 (0)