※前提として、laravel-dompdf上でimgにSVGを埋め込みたいな～と思って試行錯誤して出来た方法です。
まあ普通にも使えると思いますけれど......
基本的なimgタグにSVGを埋め込む方法は
template
<img class="svg" src="data:image/svg+xml;,えすぶいじーでーた">
こうやる。「data:」便利ね。
使いたいSVGコードを持ってくる
眠たいしベッドのSVGを使います。
王道？のFontAwesomeを使う。
アイコンの詳細を開くとダイアログの右上に、マウスを乗せると「Copy SVG Code」と出る記号があるので、これをクリック(< />)。
コピーするとこんな風になってる。
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コードをちょっと修正
コメントの部分は激いらないので消しとく。
こうなる。
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]
F12Console
const svg_code = 'SVGのコード(改行とかは消しておくこと)'
encodeURIComponent(svg_code);
さあ、行くわよ。えんたー
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,」を付ける
埋め込む
できた
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">
コード貼り付けて開いてみるとこんなだった。
おやすみ。