Create Animated SVG with Adobe Illustrator

Source code for SVG developed with Adobe Illustrator CS


index.html

<img src="web1.svg" />


web1.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 129 129">
<defs><style>.cls-1{isolation:isolate;}
.cls-2{opacity:0.75;mix-blend-mode:multiply;}
.cls-3{fill:none;stroke-dasharray:11.7 11.7;}
.cls-3,
.cls-4,
.cls-5{stroke:#0071bc;stroke-miterlimit:1;}
.cls-4{fill:#0071bc;}.cls-5{fill:#fff;}</style>
</defs><title>Untitled-3</title>
<circle class="cls-3" cx="57.84" cy="57.16" r="48.43">
     <animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 50 50"
to="360 50 50"
dur="10s"
repeatCount="indefinite" />
</circle>
<circle class="cls-4" cx="59.41" cy="55.88" r="34.6"/>
<path class="cls-5" d="M45.32,43.53h0a0,0,0,0,1,0,0V65.24a3,3,0,0,1-3,3h0a0,0,0,0,1,0,0V46.53A3,3,0,0,1,45.32,43.53Z"/>
<path class="cls-5" d="M51.82,43.64h0a0,0,0,0,1,0,0v21.7a3,3,0,0,1-3,3h0a0,0,0,0,1,0,0V46.64A3,3,0,0,1,51.82,43.64Z"/>
<path class="cls-5" d="M57.64,43.64h0a0,0,0,0,1,0,0v21.7a3,3,0,0,1-3,3h0a0,0,0,0,1,0,0V46.64A3,3,0,0,1,57.64,43.64Z"/>
<path class="cls-5" d="M64.14,43.59h0a0,0,0,0,1,0,0v21.7a3,3,0,0,1-3,3h0a0,0,0,0,1,0,0V46.59A3,3,0,0,1,64.14,43.59Z"/>
<path class="cls-5" d="M70,43.42h0a0,0,0,0,1,0,0v21.7a3,3,0,0,1-3,3h0a0,0,0,0,1,0,0V46.42A3,3,0,0,1,70,43.42Z"/>
<path class="cls-5" d="M76.46,43.53h0a0,0,0,0,1,0,0v21.7a3,3,0,0,1-3,3h0a0,0,0,0,1,0,0V46.53A3,3,0,0,1,76.46,43.53Z"/>
</svg>




web2.svg


<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75.79 43.64"><defs><style>.cls-1{fill:#fff;stroke:#000;stroke-miterlimit:10;}</style></defs><title>web1</title>
<rect class="cls-1" x="0.5" y="0.5" width="54" height="37">
 <animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 50 50"
to="360 50 50"
dur="10s"
transform="translate(50) rotate(0 50 50)"
repeatCount="indefinite" />
</rect></svg>


Supporting link: http://tutorials.jenkov.com/svg/svg-transformation.html