彰顯個性│製作一個獨一無二的動態 svg 頭像

一、頭像預覽

  • 看一下部落客的動態影像，是不是很炫酷，想不想擁有一個？
  • 這是一個 svg 圖片，svg 圖片不僅可以通過製圖軟體製作外，其實也可以通過程式碼進行開發
  • 因為 svg 本質上是一個下 xml 文件，是一種標記語言，可以使用編輯器編輯

二、SVG語法

  • svg 語法類似於 html，並且支援 css，瀏覽器通過讀取 css 來渲染動畫
  • svg 主標籤內要有 xmlns:xlink="//www.w3.org/1999/xlink"
  • svg 標籤中的 width/height 來標識畫布的大小
  • viewBox 標籤可有可無，有的話前兩位一般是0，後兩位一般與 width、height 保持一致
  • g 標籤可以用於嵌套，包括嵌套子 svg 文件
  • 添加動畫的話在 style 標籤中寫 css 即可
  • 使用 transform="translate(x y)" 屬性，可以移動元素在圖片中的位置
  • image 標籤是用來嵌入 png、jpg 等格式類型的圖片
<svg width="366" height="366" viewBox="0 0 366 366" xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink">
    <g fill="none" fill-rule="evenodd" width="258" height="258" viewBox="0 0 258 258" transform="translate(54 54)">
        <image xlink:href="url" x="0" y="0" width="200" height="200"/>
    </g>
</svg>

三、頭像製作

  • 這裡交大家如何製作部落客同款頭像
  • 首先將部落客的頭像 svg 下載下來，用編輯器打開，大概能看到如下內容
  • 可以看到在 image 標籤中有一個 base64 格式的圖片
  • 其實只要將自己的頭像圖片轉碼成 base64 格式，替換部落客的內容即可

四、製作圓形透明頭像

  • 一般頭像都是正方形非透明的，直接轉成 base64 格式，嵌入其中會很醜的
  • 我們需要將圖片處理一下，變成圓形背景透明的頭像
  • 這裡我們就需要藉助專業的軟體了，比如 photoshop 等

五、圖片base64格式

  • 將圖片處理完成之後，我們需要將圖片轉碼成 base64 格式
  • 可以找一些在線轉碼工具，這裡使用的是：base64轉碼工具
  • 轉碼成功後，將其複製到 image 標籤中即可
Tags:

VirMach 便宜 VPS