img src= でSVGを埋め込む方法　2022/6

※前提として、laravel-dompdf上でimgにSVGを埋め込みたいな～と思って試行錯誤して出来た方法です。
まあ普通にも使えると思いますけれど......

基本的なimgタグにSVGを埋め込む方法は
```html:template
<img class="svg" src="data:image/svg+xml;,えすぶいじーでーた">
```
こうやる。「data:」便利ね。

## 使いたいSVGコードを持ってくる

眠たいしベッドのSVGを使います。

王道？の<a href="https://fontawesome.com/icons/" target="_blank">FontAwesome</a>を使う。
アイコンの詳細を開くとダイアログの右上に、マウスを乗せると「Copy SVG Code」と出る記号があるので、これをクリック(< />)。

![pic-f-20220614.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/990851/e07ef789-adcc-6dfa-31ac-dffc238077f2.jpeg)

コピーするとこんな風になってる。
```SVG:bed.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path d="M176 288C220.1 288 256 252.1 256 208S220.1 128 176 128S96 163.9 96 208S131.9 288 176 288zM544 128H304C295.2 128 288 135.2 288 144V320H64V48C64 39.16 56.84 32 48 32h-32C7.163 32 0 39.16 0 48v416C0 472.8 7.163 480 16 480h32C56.84 480 64 472.8 64 464V416h512v48c0 8.837 7.163 16 16 16h32c8.837 0 16-7.163 16-16V224C640 170.1 597 128 544 128z"/>
</svg>
```

## SVGコードをちょっと修正

コメントの部分は激いらないので消しとく。

こうなる。

```SVG:bed.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path d="M176 288C220.1 288 256 252.1 256 208S220.1 128 176 128S96 163.9 96 208S131.9 288 176 288zM544 128H304C295.2 128 288 135.2 288 144V320H64V48C64 39.16 56.84 32 48 32h-32C7.163 32 0 39.16 0 48v416C0 472.8 7.163 480 16 480h32C56.84 480 64 472.8 64 464V416h512v48c0 8.837 7.163 16 16 16h32c8.837 0 16-7.163 16-16V224C640 170.1 597 128 544 128z"/>
</svg>
```

これで原材料は完成。FontAwesomeありがとう。

ついでに、SVGに色が欲しい場合はこの時点でpathタグにfillを付けとくといい。あとからだとエンコードした文字列を解読する羽目になります。(経験者)

`<path fill="#dd2222" d=".....`

## コードの加工

このままだと埋め込めない。まあ見た目からしてそんな感じしますね。

加工にはjsのencodeURIComponentメソッドを使う。お気に入りのブラウザで開発者ツールを開く。[F12]

```js:F12Console
const svg_code = 'SVGのコード(改行とかは消しておくこと)'
encodeURIComponent(svg_code);
```

さあ、行くわよ。えんたー

```js:F12Console-Result
> (result)
'%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M176%20288C220.1%20288%20256%20252.1%20256%20208S220.1%20128%20176%20128S96%20163.9%2096%20208S131.9%20288%20176%20288zM544%20128H304C295.2%20128%20288%20135.2%20288%20144V320H64V48C64%2039.16%2056.84%2032%2048%2032h-32C7.163%2032%200%2039.16%200%2048v416C0%20472.8%207.163%20480%2016%20480h32C56.84%20480%2064%20472.8%2064%20464V416h512v48c0%208.837%207.163%2016%2016%2016h32c8.837%200%2016-7.163%2016-16V224C640%20170.1%20597%20128%20544%20128z%22%2F%3E%3C%2Fsvg%3E'
```

こうなった。きも

これを埋め込んでいくわけだが...。

__このままでも読み込めるとこが多いらしいが、dompdfだと読み込めなかったので、「charset=utf8,」を付ける__


https://qiita.com/takeshisakuma/items/6bd2b4cc9fb4edf61288


埋め込む
できた

```html:complete
<img class="svg" src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M176%20288C220.1%20288%20256%20252.1%20256%20208S220.1%20128%20176%20128S96%20163.9%2096%20208S131.9%20288%20176%20288zM544%20128H304C295.2%20128%20288%20135.2%20288%20144V320H64V48C64%2039.16%2056.84%2032%2048%2032h-32C7.163%2032%200%2039.16%200%2048v416C0%20472.8%207.163%20480%2016%20480h32C56.84%20480%2064%20472.8%2064%20464V416h512v48c0%208.837%207.163%2016%2016%2016h32c8.837%200%2016-7.163%2016-16V224C640%20170.1%20597%20128%20544%20128z%22%2F%3E%3C%2Fsvg%3E">
```

コード貼り付けて開いてみるとこんなだった。

![bed-svg-scsh.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/990851/b5c8f779-3263-35ee-ee8f-70da858fd489.jpeg)

おやすみ。