【SVG】SVGを軽量化しよう+実装方法

コマンド一発で使えるsvgoの使い方です。

svg/svgo: ⚙️ Node.js tool for optimizing SVG files

インストール

$ npm i -g svgo

globalに登録します。

使い方

例えば

/client ←今ここ
  - /assets
    - /img
      - test.svg
      - test2.svg
      - test3.svg
    - /svg-min

/imgの中のsvgを軽量（最適）化して、/svg-minに入れるとします。（/svg-minはなくてもOK）

$ cd assets/

/assetsに移動。

$ svgo -f img -o svg-min

すると、

/client
  - /assets
    - /img
      - test.svg
      - test2.svg
      - test3.svg
    - /svg-min
      - test.svg
      - test2.svg
      - test3.svg

こんなふうに最適化されたファイルが/svg-minに格納されます。

1つだけでいいんだよという場合

$ cd assets/img/

$ svgo test.svg -o test-min.svg

test-min.svgという名前で軽量化されたファイルが作成されます。とても簡単。

SVGの実装方法

img(src="<画像のパス>" alt="<SVGの説明>" title="<SVGの説明>")

普段の画像と同じように実装できます。

インタラクティブなwebアプリやアニメーションのために使う場合、object属性を使うとGoogle画像検索でインデックスされるそうです。

object(type="image/svg+xml" data="your_image.svg")
  img(src="<画像のパス>" alt="<SVGの説明>" title="<SVGの説明>")

インラインSVGについて

個人的にはインラインSVGはあまり使わないです。理由としては

• （文字列として認識される）
• alt属性が使えない

ため。

どうしても必要な場合はこんな感じ。

svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0")
  title SVGの説明
  desc SVGの説明
  path(d="パス")

でも、titleもdescもbotは読んでくれません。あくまでユーザー・開発者用です。

---

参考：Best practices for SVG SEO in Google Image | by Disrupting Diagramming | Medium