SVG+CSS

svg已普遍在網頁中使用,是一種向量圖片,可藉由樣式表或程式碼控制,縮放不失真且變化自由度高,可使用軟體(如illustrator)自行繪製、網路提供的元件素材(material design)或線上製作svg動態圖,可於大部分瀏覽器顯示。例如要製作一個圓,樣式表為標籤添加border-radius屬性,svg則為特定標籤<circle>,並添加專用屬性如座標cx、cy與半徑r,兩者圖形本質同樣是使用編碼製作,svg能有更多外型變化優勢。

svg應用

如何在網頁內使用svg有多種方式,不過在測試php網頁環境時發現,除了inline方式直接寫入html以外,像是常見<img>標籤讀取或<iframe>、<object>嵌入,皆會呈現破圖狀況,從目前研究結果猜測,可能與作業環境有關,以下說明提到的解法,有待與工程同仁商討…

  • 於本機測試所有嵌入方式,則完全沒有問題,推測可能是伺服器無法識別svg類型文件;官方資料有說明一些對應措施,伺服器更新、使用“.htaccess”文件添加svg mime類型設置,文件內容為AddType image/svg+xml svg。
  • 改變svg樣式有一些限制,如果是使用<img>、樣式表背景方式載入,那就無法使用外部樣式控制svg圖片,僅能於svg文件內部編寫樣式,才能完全套用至svg標籤;若要使用外部樣式表來控制svg,html內必須採用object、iframe方式嵌入,並於svg文件內讀取外部樣式表連結。
讀取svg圖片方式,外部樣式控制範圍

svg注意事項

圖形能達到足以辨識前提下,盡量減少圖形節點,svg編碼架構也能講求簡潔,於事後控制樣式變化相對方便,在調整上也較容易,適合用於圖形/背景、按鈕圖示、簡易互動效果。

  • inline方式寫入html頁面,<svg>同樣作為標籤使用,樣式表可控制標籤大小,由瀏覽器渲染顯示,此方式效能最佳,但缺點是頁面內編碼冗長雜亂;可使用線上工具優化編碼,但僅適用靜態svg圖片,因動態svg圖片匯出時路徑節點可能不同,於每次匯出時都需使用同一個檔案與匯出方式,或整個動態svg圖片重新匯出 。
另存新檔svg,編碼架構為純路徑<path>
轉存svg,編碼架構多了座標transform
  • 自軟體匯出的svg編碼架構,與網路資源的編碼架構可能不同,排除掉多餘編碼後皆可直接取用;可於svg文件內修改編碼,控制節點位置,也可從外部樣式表控制svg文件內標籤(使用object、iframe方式),由html內讀取的外部樣式表,僅能修改<svg>標籤。
  • 在svg內部每個重點標籤加上註解說明,清楚識別每個圖形編碼區塊,若未來須變更部分圖形動態路徑,在軟體匯出svg時僅取用該段編碼即可。
  • svg圖片有不失真漸層效果,必要時也有不錯的應用方式,能使用遮罩與濾鏡,讓元件效果提升。
  • svg雖然已被大量使用,主流瀏覽器也幾乎能預覽,少部分瀏覽器或APP無法顯示,例如IE11必須額外添加寬高樣式,處理特殊狀況,每個瀏覽器可能都有不同解法,上線前應實際測試瀏覽器顯示效果。

svg路徑變化效果

利用svg路徑控制樣式變化,svg路徑有兩種主要外觀屬性,分別是stroke-dasharray、stroke-dashoffset,也可當作樣式表屬性使用,直接從樣式表修改svg路徑,由簡單概念開始,這裡用illustrator完成靜態圖形,再賦予效果。

使用鋼筆工具完成圖形路徑

針對路徑做變化,可以想像是控制虛線段的長短與間距,svg屬性stroke-dasharray,可設定線段路徑長度,寫法為"stroke-dasharray: 100 50 ;",數值前者為虛線段長度,後者為虛線段間距,若兩者數值與svg圖形路徑等長,則看到的是一條實線(或是不間斷的連續線段);再搭配svg屬性stroke-dashoffset,設定虛線段與虛線段間距的偏移量,讓視覺看起來像動態效果。

See the Pen
svg01
by wenchi (@wenchi06)
on CodePen.

svg外觀屬性加上css動畫屬性,搭配做出流暢的路徑變化效果,若將"形狀"路徑改為純路徑<path>,將會有更多屬性可由樣式表控制。形狀路徑為圓形<circle>、線段<line>、多邊形<polygon>等等。

See the Pen
svg03
by wenchi (@wenchi06)
on CodePen.

複雜的圖形路徑變形,可使用svg動畫元素<animate>來完成,使用純路徑<path>將會容易許多,下圖看到圖形繪製後的節點非常多,若未來有修改需要,則不適合使用樣式表控制動態變形,以玩運彩大頭圖像為例,試試讓他動起來。

藍色方形處為路徑節點

svg架構內,可自由移動<path>標籤,越前列的標籤,圖層中代表越底層,分別將每個<path>都標示名稱,原圖檔隨時可繪製新增圖形,並添加至svg圖形內製作動態,相當於html頁面內加上一個浮動區塊,每個<path>動態變化是不相互影響的。下圖可見底圖圖層包含的<path>,共有三個圖層(已隱藏嘴、亮點圖層),軟體繪圖中可命名圖層,方便匯出svg圖形後辨識路徑。

匯出svg圖片,文件內已標示名稱,與軟體中圖層排序相反

於軟體繪製圖形的關鍵幀,並透過匯出svg圖形取得編碼,運用svg動畫元素<animate>完成補間動畫,須注意繪製圖形時勿把節點重疊或新增節點,節點數量不同則無法完成補間動畫 。為加快製作動態圖形,並應用於網頁瀏覽,個人比較傾向於繪圖軟體製作所有動態效果,匯出svg圖形後再由程式、樣式表控制基礎互動。

See the Pen
svg02
by wenchi (@wenchi06)
on CodePen.

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *