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

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

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

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

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

:::note info
ImageOptim
https://imageoptim.com/mac
:::

**BEFORE**
```svg: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**
```svg: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=""

```svg: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"` で色指定が可能です

```svg: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を指定して色調整
```svg: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>
```
```css:qiita.css
svg {
  fill: #000;
}

.foo {
  fill: #999;
}
```

### 3. useを使用する

- svgにidを付与し、任意のフォルダ等に格納
```svg: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を記述する

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


```html:qiita.html
<div class="bar">
  <svg>
    <use href="./img/foo.svg#foo"></use>
  </svg>
</div>
```
```css:qiita.css
.bar {
  color: red;
}

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

### 4. mask-imageを使用する
- svgにidを付与し、任意のフォルダ等に格納
```html:qiita.html
<div class="background">
  <div class="svg"></div>
</div>
```

```css: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; /* 表示させたい色 */
}
```




以上