Références

Animation attribute (width, opacity, etc.)

<animate attributeName="?" begin="0s" dur="6s" repeatCount="indefinite" values="0;0"/>

Animation coordinates (groupe)

<animateMotion begin="0s" dur="6s" repeatCount="indefinite" values="0,0;0,0"/>

Animation rotate/translate/skewX/skewY/scale/matrix

<animateTransform attributeName="transform" attributeType="xml" type="rotate" values="0 0 0; 360 0 0" begin="0s" dur="6s" repeatCount="indefinite"/>

Animation by path

<animateMotion begin="0s" dur="6s" repeatCount="indefinite" rotate="auto" path="m0 0L400 0L400 400L0 400z"/>

Animation by path id

<path id="chemin" d="m0 0L400 0L400 400L0 400z"/>
<animateMotion begin="0s" dur="6s" repeatcount="indefinite" rotate="auto">
<mpath xlink:href="#chemin"/>
</animateMotion>

Blur filter

<defs>
<filter height="200%" width="200%" y="-50%" x="-50%" id="blur">
<feGaussianBlur stdDeviation="10" in="SourceGraphic"/>
</filter>
</defs>
<rect width="100" height="100" fill="red" filter="url(#blur)"/>

Linear gradient

<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="gold" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<rect width="100" height="100" fill="url(#grad1)"/>

Radial gradient

<defs>
<radialGradient id="grad2">
<stop offset="0%" stop-color="gold"/>
<stop offset="100%" stop-color="red"/>
</radialGradient>
</defs>
<rect width="100" height="100" fill="url(#grad2)"/>

Use

<rect width="100" height="100" id="clone"/>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#clone" transform="translate(100 100)"/>

Rotation couleurs

<filter id="fecolor">
<fecolormatrix type="hueRotate">
<animate attributename="values" begin="0s" dur="24s" values="0;360;0" repeatcount="indefinite"/>
</fecolormatrix>
</filter>
<rect width="100" height="100" fill="red" filter="url(#fecolor)"/>

Filtre Saturation

<filter id="gray">
<feColorMatrix in="SourceGraphic" type="saturate" values="0" />
</filter>
<rect width="100" height="100" fill="#f00" filter="url(#gray)"/>

Masque

<defs>
<mask id="hide">
<rect width="100" height="100"/>
</mask>
</defs>
<circle cx="100" cy="100" r="100" fill="#fff" style="mask:url(#hide)"/>

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <g>
  <rect stroke="#ff0000" id="svg_1" height="400" width="400" y="050" x="050" stroke-width="2" fill="none">
   <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 250 250" to="360 250 250" dur="5s" repeatCount="indefinite"/>
  </rect>
  <rect stroke="#ff0000" id="svg_1" height="350" width="350" y="075" x="075" stroke-width="2" fill="none">
   <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 250 250" to="360 250 250" dur="4.9s" repeatCount="indefinite"/>
  </rect>
  <rect stroke="#ff0000" id="svg_2" height="300" width="300" y="100" x="100" stroke-width="2" fill="none">
   <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 250 250" to="360 250 250" dur="4.8s" repeatCount="indefinite"/>
  </rect>
  <rect stroke="#ff0000" id="svg_2" height="250" width="250" y="125" x="125" stroke-width="2" fill="none">
   <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 250 250" to="360 250 250" dur="4.7s" repeatCount="indefinite"/>
  </rect>
  <rect stroke="#ff0000" id="svg_3" height="200" width="200" y="150" x="150" stroke-width="2" fill="none">
   <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 250 250" to="360 250 250" dur="4.6s" repeatCount="indefinite"/>
  </rect>
  <rect stroke="#ff0000" id="svg_3" height="150" width="150" y="175" x="175" stroke-width="2" fill="none">
   <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 250 250" to="360 250 250" dur="4.5s" repeatCount="indefinite"/>
  </rect>
  <rect stroke="#ff0000" id="svg_4" height="100" width="100" y="200" x="200" stroke-width="2" fill="none">
   <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 250 250" to="360 250 250" dur="4.4s" repeatCount="indefinite"/>
  </rect>
  <rect stroke="#ff0000" id="svg_4" height="050" width="050" y="225" x="225" stroke-width="2" fill="none">
   <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 250 250" to="360 250 250" dur="4.3s" repeatCount="indefinite"/>
  </rect>
</g>
</svg>

Je bouge ▲▼►◄

boules

Tentants tentacules

Loose Haircut

Loose stripes