要讓SVG 動起來，可以使用SMIL：SVG的原生動畫規範，
雖然前幾年Chrome放話不再支援，但這幾年好像暫緩了。

當然不用SMIL就可以用最近超常看到的GSAP套件。
GSAP在網路上的宣傳真的是不得了，只要看到SVG動畫相關的都是GSAP的教學。
雖然大部分使用都是免費，但只要網站有付費相關的服務/產品，就需要購買他們的授權。
GSAP那個可以自動沿著路徑畫圖功能＆改變SVG圖案的morphs真是不得了...

總之今天不偷懶，用原生的SMIL來讓Logo SVG小小地動起來吧！

老樣子先看成果：

為什麼要用SMIL?

1.有些SVG的路徑，譬如說 data (d="" attribute) 是無法被CSS操作的。
2.而有時候當SVG被拿來用作CSS的圖片或是背景圖，JS沒辦法操作細節。
這時候SMIL就派上用場。

用法就是在<svg>標籤裡面加上<animate>
1.選擇要動的對象 xlink:href="#group"
2. 要動的屬性attributeName
3.屬性開始的數值from
4.屬性結束的數值to
5.動畫持續時間dur
6.動畫結束的狀態fill，通常都是freeze，表示凍結在最後一格
7.可幫這個動畫上id，就可以讓其他動畫在begin的地方使用
8.啥時開始的begin，不填就是網頁load之後，填2s就是load 2s後，或是選擇在某個動畫結束之後如id.end

上部分code!研究太久了，之後回頭再來把註解補好補滿！！

（命名也是醜不拉機......）

<svg>
		<!-- ...省略，中間就是那一堆圖型啦！-->
		<!-- SVG標籤裡面的 Animation     -->
		<!-- 1. 最後面那個圓圈圈     -->
    <animate 
    id="1"
    xlink:href="#Ellipse_13"
    attributeName="fill" values="#FF8DD7;#94EFF5;#FEDEB5;#D4F3D9;#FFD0CB"
    dur="1s"
    fill="freeze"
    begin="click" />
    
		<!-- 2. 中間一堆字的群組     -->
    <animate 
    xlink:href="#group"
    attributeName="opacity"
    from="0"
    to="1" 
    dur="0.8s"
    fill="freeze"
    begin="1.end"
    id="2"
    />
    
		<!-- 3. 各種形狀的圖案：依序是S的圖->R的圖->兩個N的圖->A的圖->D的圖     -->
    <animate 
    xlink:href="#s"
    attributeName="width"
    from="0"
    to="66" 
    dur="0.5s"
    fill="freeze"
    begin="2.end"
    />
    
    <animate 
    xlink:href="#RIN_"
    attributeName="cx"
    from="-14"
    to="14.15" 
    dur="0.5s"
    fill="freeze"
    begin="2.end" />
    
    <animate
    xlink:href="#n_up"
    attributeName="height"      
    from="0"
    to="64" 
    dur="0.5s"
    fill="freeze"
    begin="2.end" />
    
    <animate
    xlink:href="#n_down"
    attributeName="height"      
    from="0"
    to="64" 
    dur="0.5s"
    fill="freeze"
    begin="2.end" />
    
    <animate
    xlink:href="#a_middle"
    attributeName="height"
    from="0" 
    to="77"
    dur="0.5s"
    fill="freeze"
    begin="2.end" />
    
    <animate
    xlink:href="#d_left"
    attributeName="width"
    from="4" 
    to="46"
    dur="0.5s"
    fill="freeze"
    begin="2.end" />
</svg>

</div>

以上！

今天的code: 在這裡

點擊就可以看到動畫喔！

話說這個Logo是我朋友的手工製品牌，有很多日式髮帶、帽子...
雖然主打嬰幼兒產品，但大人的也有客製產品唷！
順便幫打個廣告哈哈 ٩(^ᴗ^)۶ 傳送門
台中的朋友也可以到市集逛逛～～

有任何問題或是錯誤都歡迎批評指教！！

參考文章：

让SVG 自己动起来！SMIL animation动画详解
A Guide to SVG Animations (SMIL)