The Climate Fixathon started today and I’m one of the judges, as I’m involved with Impact Makers and volunteered. One of the other IM projects is Offset Earth (a subscription service to fund climate crisis solutions) and I animated an SVG file for them.
One of the easiest ways that you can help out in these communities is to find simple tasks that you can complete in a free hour or two. So although I’d never done any SVG animation before, when there was a request for some spinning wind turbines, I jumped right in.
SVG animation is very different to the CSS animation that I’m used to but it was required in this case so that the blades would align with the tower. I did some quick research about how to do it and got started.
Extract
The first step was to extract the SVG from the CSS using the browser developer tools. The data was URL encoded so an easy way to export it is to paste it into the browser address bar and then save the static SVG file out.
Transform
SVG is just XML, so you can edit it by hand. However, I used Inkscape to un-group and re-group the blades so it was easy to see what paths were selected. Remember to save the file as a plain SVG and not the Inkscape version of SVG.
You will then see in the file contents that there is a <g> tag surrounding the three paths of the blades. It has a random id but you could give it a better name.
<g id="g3790">
<!-- path elements -->
</g>
Next, hand edit the XML and add an animateTransform tag inside the <g>. The centre coordinates have been copied from the position of the circles that form the front of the nacelle.
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 79.620003 80.061996"
to="360 79.620003 80.061996"
dur="10s"
repeatCount="indefinite"/>
Save the file and you end up with spinning blades! The duration is different on each turbine to create a less-synchronised effect.
The last task is to make the image wider so there is no clipping and the blades don’t exit the frame. Making the image taller is more challenging due to the coordinate system starting in the top left.
Be careful not to overuse animated elements as it does increase power usage and reduce performance slightly. As with everything, it’s a trade-off between balancing the benefits of greater engagement with the costs.
An animated GIF or APNG may be a better choice for some applications. However, browser support for animated PNG is not universal.