generated at
SVGでGIFっぽいアニメーションを作る
2つの画像を交互に表示する

<set>で画像のURLを切り替える
<set> :一時的に親要素の属性を変更できる機能
svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="430" height="430" viewBox="0 0 430 430"> <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ほど小さい
svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="430" height="430" viewBox="0 0 430 430"> <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>

#2022-06-04 16:29:26