一、簡介
博主頭像
svg圖片格式不同於其它圖片格式，svg圖片本質上是一個xml文件，它內部是標記語言，可用文本編輯器打開編輯。
svg除了可以用ai這種制圖軟件制作以外，我們程序員也可以手寫svg代碼實現二次開發（從零畫圖不必要...不至於...）。
二、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=" 這里 " 即可。
就醬 (๑•̀ㅂ•́)و✧