SVGでGIFっぽいアニメーションを作る

2つの画像を交互に表示する

https://scrapbox.io/files/629b0ca87f011f0023de32c8.svg

code:svg

<image x="0" y="0" width="430" height="430">

<set id="set_a" attributeName="xlink:href" begin="0s;set_b.end" dur="500ms" to="{ここに画像のData URIを入れる}"/>

<set id="set_b" attributeName="xlink:href" begin="set_a.end" dur="500ms" to="{ここに画像のData URIを入れる}" />

</image>

</svg>

ある画像の上に別の画像を点滅表示させる

2画像間の差分が少ない場合は、上の方法よりファイルサイズが小さくなる

例えば↓のSVG画像は、上のものより90KBほど小さい

https://scrapbox.io/files/629b1213eb972300231c6203.svg

code:svg

<image x="0" y="0" width="430" height="430" xlink:href="{常に表示する画像のData URI}" />

<image x="0" y="0" width="430" height="430" xlink:href="{点滅表示させる画像のData URI}" >

<set id="set_a" attributeName="display" begin="0s;set_b.end" dur="500ms" to="none"/>

<set id="set_b" attributeName="display" begin="set_a.end" dur="500ms" to="inline" />

</image>

</svg>