隨著時代的進步,瀏覽器廢除flash動態之後,網站中各種動畫技術並沒有就此消失,反而因技術的提升,不但更輕量,還能符合響應式的縮放,如ODIN架站系統中間的動畫效果,是否讓你覺得網站充滿的活耀性,今天我們就來介紹這個技術SVG動態技術
內容目錄
svg的認識
可縮放向量圖形(Scalable Vector Graphics),是一種基於可延伸標記式語言(XML),用於描述二維向量圖形的圖形格式。SVG由W3C制定,是一個開放標準。
在wiki已經有很詳細的說明,因為向量的關係,讓圖片可縮放不失真,加上是靠語法及CSS的運作可以擁有以下的優點:
- 可建立文字索引-加強SEO的圖像式搜尋技術
- 技術可互動結合-可使用Javascript來控制動態效果
- 動態生成圖形-如果你的企業是單純的色塊或是簡潔幾何,可以用svg做出吸睛的動態企業識別
- 工具輔助-現在有很多可以製作出動態效果的線上工具,能用視覺化的方式做出你想要的設計
svg的原理
SVG格式是XML的一種,SVG檔案只是普通的文字檔案,可文字編輯器檢視或修改。
svg的資源
市面上有許多可以製作svg的工具:
- SVG圖形下載:https://www.svgrepo.com
- SVG圖形下載:https://www.flaticon.com/icons
- SVG動態工具:https://www.svgator.com
以上都是與SVG相關工具,如果你的網站是以Wordpress架設的部分,需要安裝額外支援的外掛才可以作用,詳情我會在後續再教學