SVGを<body>直下に置いて呼び出す方法

前提・実現したいこと

SVGをHTMLにべた打ちすると長いので、body直下に置いて呼びたいです。

発生している問題・エラーメッセージ

しかし以下SVGについて、icon-plus は表示できるが、icon-test は表示できません。

該当のソースコード

表示したい icon-test はこちらです。（teratailの仕様上長くて貼れないのでリンクにさせて頂きました。）
https://jsfiddle.net/hgswyxeo/

試したこと

試しに書いたのがこちらです。
https://jsfiddle.net/ezd3amnp/

しかし、icon-plus は表示できるが、icon-test は表示できません。
どうすれば icon-test を表示できるようになるでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

こんなイメージでしょうか？

以下、変更箇所になります。
https://jsfiddle.net/cx20/1j6z4to3/

投稿2021/12/07 23:47

編集2021/12/07 23:47

cx20

総合スコア4648

nikuatsu

2021/12/08 00:02

どうもありがとうございます。大変わかりやすいアドバイスでした。一点よろしいでしょうか？高さをちょうどな感じにしたいのですが、もしかしてSVGの数字を地道に変更する必要がありますか？試しに height="50" にしてみましたが、低くはなるものの、アイコンがやたら小さくなってしまいまして。開発ツールで見ると「use」の高さに合うと理想なのですが…

cx20

2021/12/08 02:54

サイズの調整の方法は色々あると思いますが、いっそのこと SVG をファイル化すると管理が楽になるかもしれません。ファイル化すれば通常の画像ファイルと同じように参照できるようになります。 <img src="icon-plus.svg" width="50px" height="50px"> <img src="icon-test.svg" width="50px" height="50px">

行動規範の内容に同意します