動態svg圖片簡單製做

1、簡介

博主頭像

svg圖片格式不一樣於其它圖片格式，svg圖片本質上是一個xml文件，它內部是標記語言，可用文本編輯器打開編輯。
svg除了能夠用ai這種製圖軟件製做之外，咱們程序員也能夠手寫svg代碼實現二次開發（從零畫圖沒必要要...不至於...）。

2、svg文件簡單編輯

svg語法相似於html，且支持css語法，瀏覽器經過讀取css來渲染動畫。有趣的是，GitHub的 README.md 文件只支持少數html標籤、屬性，幾乎徹底不支持css樣式，可是你插入帶css的svg圖片就沒問題。

2.1 嵌套

<g>標籤能夠用於嵌套，包括嵌套子svg文件，拷貝進去就行。
<g>標籤通常使用id屬性，而<path> <circle>等標籤通常使用class。添加動畫的話在<style>標籤中使用css便可。

2.2 調整大小

使用如下屬性

width="366" height="366" viewBox="0 0 366 366"

前兩者好理解，viewBox無關緊要，有的話前兩位通常是0，後兩位最好和width、height保持一致。通常來講，只有<svg>主標籤內的viewBox屬性比較重要。

2.3 位移

想移動元素在圖片中的位置，使用 transform="translate(x y)" 屬性。
如你從其它svg中拷貝了一些圖形過來，嵌套在<g>標籤中，則在<g>標籤中使用transform就能調整其位置。
若是xy爲0，則圖形在最左上角，圖形中心的位置是width、height的一半。

2.4 嵌套其它圖片格式

若是要在svg中嵌入png、jpg等圖片，須要用到<image>標籤。
調用遠程圖片的話，首先確保<svg>主標籤內有xmlns:xlink="http://www.w3.org/1999/xlink"，而後能夠這樣使用

<image xlink:href="url" x="0" y="0" width="200" height="200"/>

注意事項參考：https://cloud.tencent.com/developer/section/1423874

此外，遠程調用存在一些問題，好比直接在頁面中遠程使用此svg圖片，其中的<image>能顯示。若是是被js渲染出的svg圖片，則svg中的<image>就可能不被加載。因此我推薦將圖片直接存在svg圖片中。
使用base64編碼便可：
>>在線圖片base64編碼工具<<
將編碼結果放入 xlink:href=" 這裏 " 便可。

就醬 (๑•̀ㅂ•́)و✧