What

什麼是 SVG ？有什麼特性？

SVG 全稱 Scalable Vector Graphics，直接翻譯就是可擴展的向量圖形， 是一種向量圖檔案格式。

SVG 圖檔可以由 <svg> element 與包含的 SVG element <path> <rect> circle...自行用程式碼繪製，但通常還是會使用繪圖軟體（如 Sketch 或 Figma）來繪製輸出。

Why

為什麼會需要在網頁前端開發使用 SVG ？
相比於 PNG, JPG 等圖片格式，向量圖的特性讓 SVG 適合在網頁中作為 Icon, Logo 使用，無論放大縮小都不會影響圖形的清晰度，且可以透過 CSS 與 JavaScript 做操控。

How

以下就以我最常遇到的三個場景來看看要如何使用 SVG

• 如何更改 SVG 圖檔的顏色？

  • 方法 1

    <svg>
        ...
    </svg>
    

    svg {
      fill: blue;
    }
    

  • 方法 2

    <svg fill="currentColor">
        ...
    </svg>
    

    svg {
      color: blue;
    }
    

• 如何在 React 中使用 SVG ？

  • 方法 1

    import React from 'react';
    import icon from './icon.svg';
    
    const Icon = () => {
      return <img src={icon} />;
    };
    

  • 方法 2

    import React from 'react'
    
    export const Icon = (props) => (
      <svg>
        ...
      </svg>
    )
    

  • 方法 3 SVGR

    import Icon from './icon.svg'
    
    const App = () => (
      <>
        <Icon />
      </>
    )
    

• 如何管理 SVG 圖檔？
  因為難以依據程式碼了解 SVG 繪製出來的結果，所以可以使用 Iconset 這個 App 來集中管理 SVG 檔案。

參考資料

A Fresh Perspective at Why, When, and How to Use SVG
MDN: SVG Tutorial
Cascading SVG Fill Color
The Many Ways to Change an SVG Fill on Hover (and When to Use Them)
How to use SVGs in your React App
How to Organize and Sync SVG Files with Iconset