svg製作小圖示

satomiyoyi07發表於2019-02-17
SVG

什麼是svg

svg(scalable vector graphics)可縮略向量圖形。視網膜屏下解析度解決方案之一。比如在iphone裝置下devicePixelRatio大於1的情況下，防止圖片模糊就可以使用svg的圖片。svg是基於xml的標記語言。編輯起來類似於html構建頁面一樣。學習曲線平滑。實際應用於背景圖片，小圖示的場景較多。

如果獲取svg

既然svg常作為圖示使用，那麼如何複用現有的輪子。還是在https://www.iconfont.cn上下載的時候選擇“svg下載即可”。

如何使用svg

直接當作圖片使用

和使用png，jpg圖片相同的方式

<img src="paiqiu.svg">
<div style="background: url(paiqiu.svg); width: 100px;height: 100px;"></div>
複製程式碼

如果我們發現下載的svg圖片過大或者過小怎麼辦？ 和修改圖片沒什麼兩樣，直接編輯svg圖片

<?xml version="1.0" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg t="1550061994320" class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1292" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100" height="100">
    <defs>
        <style type="text/css">
        </style>
    </defs>
    <path d="M836.077037 115.579259a513.327407 513.327407 0 0 0-94.814815-61.345185 512 512 0 0 1-632.414815 773.404445 512 512 0 1 0 727.22963-712.05926z"
    fill="#BDDDFA" p-id="1293"></path>
    <path d="M512 75.851852A436.148148 436.148148 0 1 1 75.851852 512 436.622222 436.622222 0 0 1 512 75.851852m0-75.851852a512 512 0 1 0 512 512A512 512 0 0 0 512 0z"
    fill="#0788FF" p-id="1294"></path>
    <path d="M273.825185 420.598519l-20.48-19.816297c181.854815-187.828148 425.528889-205.368889 724.290371-51.579259l-12.98963 25.315556c-286.340741-147.437037-518.731852-131.792593-690.820741 46.08z"
    fill="#0788FF" p-id="1295"></path>
    <path d="M264.722963 426.192593c-106.761481-54.139259-134.637037-144.782222-81.540741-269.368889l26.168889 11.188148c-46.838519 109.89037-24.557037 186.026667 68.171852 232.865185z"
    fill="#0788FF" p-id="1296"></path>
    <path d="M228.124444 890.69037l-18.962963-21.428148c116.717037-101.451852 133.499259-249.552593 51.2-452.93037l26.737778-10.24c86.186667 212.48 66.37037 375.751111-58.974815 484.598518zM567.277037 992.616296l-23.04-16.687407c169.623704-234.097778 179.579259-470.471111 29.487407-702.577778l23.893334-15.454815c157.108148 243.01037 146.868148 490.097778-30.340741 734.72z"
    fill="#0788FF" p-id="1297"></path>
    <path d="M318.388148 672.995556C111.976296 630.044444 22.281481 526.601481 51.863704 365.605926l28.444444 5.12c-26.642963 144.971852 52.906667 234.477037 243.863704 274.394074zM879.597037 849.825185l-27.306667-8.059259c67.602963-228.219259 53.94963-407.703704-40.675555-533.238519l22.755555-17.066666c100.408889 133.12 115.579259 321.042963 45.226667 558.364444zM192.284444 318.767407l-24.841481-13.179259C250.69037 146.868148 413.961481 66.37037 653.463704 66.37037v28.444445c-228.124444 0-383.241481 75.377778-461.17926 223.952592zM273.066667 834.74963c-69.214815-11.946667-125.914074-37.925926-168.675556-76.894815l18.962963-21.048889c38.684444 35.271111 90.642963 58.785185 154.358519 69.878518z"
    fill="#0788FF" p-id="1298"></path>
</svg>
複製程式碼

內容有點多，但是很眼熟。不要被嚇到，直接看著width height操作起來。其餘引數後續會介紹。但是初步使用，改改寬高就夠了。

svg sprite

直接使用感覺並沒有多高階，甚至一個高畫素圖片能解決的事情，非要用svg感覺不爽。 那麼svg sprite是你需要的。類似於css spirit 將圖示整合到一起，實際呈現特定圖示即可。

symbo

從剛剛的例子中我們看到，svg標籤類似於html標籤，是一個大舞臺，想畫什麼在裡面自成一派的繪製即可。symbo（翻譯為元件），symbo就是一個個組裝好的原價，一個元件就是一個圖示。 如下就是一個舞臺上的三個劇目

<svg>
    <symbol>
        <!-- 第1個圖示路徑形狀之類程式碼 -->
    </symbol>
    <symbol>
        <!-- 第2個圖示路徑形狀之類程式碼 -->
    </symbol>
    <symbol>
        <!-- 第3個圖示路徑形狀之類程式碼 -->
    </symbol>
</svg>
複製程式碼
use

好的劇目如果不播出來看看是不知道效果的。單獨把上面的內容放到html中，你只能得到三大段空白。是騾子是馬，要用用才知道（use），這時需要svg 中的<use>元素

  1. 可重複呼叫
<svg>
    <symbol id="icon-pencil" viewBox="0 0 32 32">
        <title>pencil</title>
        <path d="M27 0c2.761 0 5 2.239 5 5 0 1.126-0.372 2.164-1 3l-2 2-7-7 2-2c0.836-0.628 1.874-1 3-1zM2 23l-2 9 9-2 18.5-18.5-7-7-18.5 18.5zM22.362 11.362l-14 14-1.724-1.724 14-14 1.724 1.724z">
        </path>
    </symbol>
</svg>
<ul>
    <li>
        <svg>
            <use xlink:href="#icon-pencil" />
        </svg>
    </li>
    <li>
        <svg>
            <use xlink:href="#icon-pencil" />
        </svg>
    </li>
</ul>

複製程式碼

一個元件我可以use多次

  1. 跨SVG呼叫 SVG中的use元素可以呼叫其他SVG檔案的元素，只要在一個文件中。
總結

symbol+use就可以輕鬆使用svg spirite。

-----------------------簡單使用分割線----------------------------

自定義svg圖片

之前的介紹足以滿足一個通用svg圖示的製作。那麼如果是一些搜不到的圖示，我們該怎麼造輪子呢？自己繡。

手工繪製svg

網格

svg圖片的繪製說白了就是座標描點，（和十字繡很像）。預設以畫素為單位。左上角為(0,0)

svg製作小圖示

基本形狀
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
    <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

    <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
    <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

    <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
    <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/>

    <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
      stroke="green" fill="transparent" stroke-width="5"/>

    <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>
複製程式碼
  • 矩形：<rect x="左上角點橫座標" y="左上角點縱座標" rx="圓角x軸半徑" ry="圓角y周半徑" width="矩形寬" height="矩形高"/>
  • 圓形：<circle cx="圓心的x位置" cy="圓心的y位置" r="圓的半徑"/>
  • 橢圓：<ellipse cx="橢圓的x半徑" cy="橢圓的y半徑" rx="橢圓中心的x位置" ry="橢圓中心的y位置"/>
  • 線條：<line x1="起點的x位置" x2="終點的x位置" y1="起點的y位置" y2="終點的y位置"/>
  • 折線：<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>點的集合
  • 路徑：<path d="M 20 230 Q 40 205, 50 230 T 90230"/>path可能是SVG中最常見的形狀。你可以用path元素繪製矩形（直角矩形或者圓角矩形）、圓形、橢圓、折線形、多邊形，以及一些其他的形狀，例如貝塞爾曲線、2次曲線等曲線
path

path是svg中最強大的形狀。也是我們自定義形狀的關鍵。無論多特殊的形狀都是直線曲線構成的。

  1. 直線命令
<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
</svg>
複製程式碼
  • M:move to縮寫，帶有兩個引數MX Y。常用作起始點，指明起始點x，y座標
  • H：繪製水平線
  • V：繪製垂直線
  • L：Line to縮寫，LX Y。和之前點之間繪製連線。

svg製作小圖示
我們也常用閉合路徑Z簡化path。Z表示從當前點，到起始點連線

<path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
複製程式碼
  1. 弧線
<svg width="320px" height="320px">
    <path d="M0 0
    A 45 45, 0, 0, 0, 90 0
    L 90 0 Z" fill="blue" />
</svg>
複製程式碼

A 橢圓的x方向寬 橢圓的y方向寬 x軸，旋轉角度， 弧線大於還是小於180度（1or0）， 0從始至終畫弧線 ，結束點x y座標

  1. 曲線命令
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
</svg>
複製程式碼

曲線命令常用繪製特殊的曲線，比如凡爾賽曲線等。具體定義可參考（developer.mozilla.org/zh-CN/docs/…

填充和上色

fill屬性設定物件內部的顏色，stroke屬性設定繪製物件的線條的顏色。

<rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>
複製程式碼

一些特殊的描邊方式可能也會使用

svg製作小圖示

<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
  <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
  <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
</svg>
複製程式碼
總結

掌握了以上一些自定義的svg圖片的繪製基本解決了。

自定義svg sprite

解決了spirit繪製，那如何把他做成元件，安排到spirit這個大舞臺上呢。

自定義svg整合

以上圖繪製的弧形元件為例，只需要symbol標籤包裝一下，一個元件就誕生了

<svg>
    <symbol id="halfCircle">
        <title>halfCircle</title>
        <path d="M0 0
        A 45 45, 0, 0, 0, 90 0
        L 90 0 Z" fill="blue" />
      </symbol>
</svg>
<svg class="webicon">
    <use xlink:href="#halfCircle" />
</svg>
複製程式碼

下載svg整合

可以使用線上工具https://icomoon.io/app/#/select 左上角匯入現有svg圖片，或者從頁面選擇需要的svg圖片

svg製作小圖示
點選左下Generator
svg製作小圖示
進入新頁面對所選svg進行整合下載。
svg製作小圖示
得到想要的svg sprite

結語

以上是製作小圖示的方法。具體更多svg好文見參考文獻。

參考文獻：

未來必熱：SVG Sprite技術介紹

SVG教程

SVG入門—如何手寫SVG 一些SVG向下相容優雅降級技術

相關文章