SVGをHTMLに埋め込むときのあれこれ

デザイナーからSVGデータで表示させてほしいと言われても実際は色々面倒。。。
何が面倒ってもらったSVGデータをキレイにすることが一番面倒。。。
何を消していいか、どうやったら使ったらいいか、あれやこれやを記述します

SVGデータから不要なデータを削除

STEP 1. イラストレータで不要なものを削除（ほんとはデザイナーにやってもらいたい）

• 余白を削除（アートボードの調整）
  • SP/PCで同じSVGデータを利用して画像をPCでは大きく見せたりする場合に余白があると調整が難しいため
• グループの解除
  • SVGデータを少しでも軽くするため
  • 色をCSSで調整する際にグループがあるとその部分だけ上手く反映されないことがあるため
• パスの結合
  • 矢印の形などでデータを見ると三角▲と四角■のデータに分かれていることがあるが、SVGデータを少しでも軽くするためやCSSで色を変更するために結合することが望ましい
• 不要なレイヤーの削除
  • 時々何も書かれていないレイヤーが含まれていることがあるが、SVGを軽量化するために削除をしている

STEP 2. ImageOptim のような画像軽量化アプリにいれる

• STEP 1. を行った状態でもまだ下記のように使いづらい状態なのでImageOptimなどの画像軽量化アプリにいれて不要な部分を削除します
• そうすすと下記のように改行がなくなったり、パスがシンプルになったりします

ImageOptim
https://imageoptim.com/mac

BEFORE

qiita.svg

<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="" y="" width="" height="" fill="#1B1B1B"/>
<path d="" fill="#1B1B1B"/>
<path d="" fill="#1B1B1B"/>
<path d="" fill="#1B1B1B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="" fill="#1B1B1B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="" fill="#1B1B1B"/>
<path d="" fill="#1B1B1B"/>
<path d="" fill="#1B1B1B"/>
<rect x="" y="" width="" height="" fill="#1B1B1B"/>
<path d="" fill="#1B1B1B"/>
</svg>

AFTER

qiita.svg

<svg fill="none" height="" viewBox="" width="" xmlns="http://www.w3.org/2000/svg"><g fill="#1b1b1b"><path d=""/><path d=""/><path d=""/><path d=""/><path clip-rule="evenodd" d="" fill-rule="evenodd"/><path clip-rule="evenodd" d="" fill-rule="evenodd"/><path d=""/><path d=""/><path d=""/></g></svg>

STEP 3. ソースコードを直に修正

それでもまだ不要な箇所が残るので、下記の情報を削除します

• width=""
• height=""
• fill=""
• xmlns:xlink="http://www.w3.org/1999/xlink"
• <g fill="">
• </g>

今回はありませんでしたが、下記の情報も不要です

• id=""
• class=""
• enable-background=""

qiita.svg

<svg viewBox="" xmlns="http://www.w3.org/2000/svg"><path d=""/><path d=""/><path d=""/><path d=""/><path clip-rule="evenodd" d="" fill-rule="evenodd"/><path clip-rule="evenodd" d="" fill-rule="evenodd"/><path d=""/><path d=""/><path d=""/></svg>

HTMLで使用する方法

1. SVGをそのまま記述する

• fill="#000" で色指定が可能です

qiita.svg

<svg fill="#000" viewBox="" xmlns="http://www.w3.org/2000/svg"><path d=""/><path d=""/><path d=""/><path d=""/><path clip-rule="evenodd" d="" fill-rule="evenodd"/><path clip-rule="evenodd" d="" fill-rule="evenodd"/><path d=""/><path d=""/><path d=""/></svg>

2. HTMLにSVGを直接記述し、CSSで色調整

• svgにclassやidを指定して色調整

qiita.svg

<svg class="foo" viewBox="" xmlns="http://www.w3.org/2000/svg"><path d=""/><path d=""/><path d=""/><path d=""/><path clip-rule="evenodd" d="" fill-rule="evenodd"/><path clip-rule="evenodd" d="" fill-rule="evenodd"/><path d=""/><path d=""/><path d=""/></svg>

qiita.css

svg {
  fill: #000;
}

.foo {
  fill: #999;
}

3. useを使用する

• svgにidを付与し、任意のフォルダ等に格納

qiita.svg

<svg id="foo" viewBox="" xmlns="http://www.w3.org/2000/svg"><path d=""/><path d=""/><path d=""/><path d=""/><path clip-rule="evenodd" d="" fill-rule="evenodd"/><path clip-rule="evenodd" d="" fill-rule="evenodd"/><path d=""/><path d=""/><path d=""/></svg>

• 下記のようにhrefを用いてsvgを使用し、最後にidを記述する

xlink:href　はSVG2で非推奨のため　href　に変更しました
検証したところiOS9では表示できませんでした

qiita.html

<div class="bar">
  <svg>
    <use href="./img/foo.svg#foo"></use>
  </svg>
</div>

qiita.css

.bar {
  color: red;
}

svg {
  fill: currentColor; /* 親要素の色を継承 */
}

4. mask-imageを使用する

• svgにidを付与し、任意のフォルダ等に格納

qiita.html

<div class="background">
  <div class="svg"></div>
</div>

qiita.css

.svg{
  width: 36px; /* 表示したいサイズ */
  height: 36px; /* 表示したいサイズ */
  mask-repeat: no-repeat;
  mask-size: 36px; /* 表示したいサイズ */
  background-color: red; /* 表示させたい色 */
  mask-image: url('foo.svg#foo');
}

/* 背景色を変更したい場合は任意の親要素で変更してください*/
.background {
  background-color: yellow; /* 表示させたい色 */
}

以上