svgをHTMLに記入した反映方法に関して

参考サイト：https://memo.appri.me/programming/efficient-svg-icon
のようにsvgをbodyタグ直下に記述し、画像をどこから呼び出せるような記述をしたいです。
defsタグやその他のタグが増えると、容易に呼び出しができなくてご質問させていただきました
。

□　"#logo,#btn,#tag,#calender"は、useタグとidを指定して呼び出しできました。
───────────────
<svg>
<use xlink:href="#~~~~~~"></use>
</svg>
───────────────
□　しかし、"#line,#folder"は、display属性値をnoneにしなければ、呼び出せますが、
反面、該当画像がページ先頭に表示されてしまいます。
（display:noneだと先頭の表示画像と一緒に呼び出し画像が消えてしまうような状況）
本件、CSSにてbackground-image指定のコーディングにて、妥協しているのですが
項数を減らしたいことから、この問題を解決することはできないものかと考えています。

★質問内容
①defsタグが入っているsvgのsymbolタグを用いた正しい記述方法について
└（#logo）の時、symbol二回来てるのでそれが関係するのでしょうか？
②gタグやpathタグ以外で注意しておくべきタグはあるか
③pathのd値などが長くなってしまうのは、省略は前提に、あらかじめ簡素化できる方法があるか

以上の疑問が出てきました。
修正依頼については随時お受けしております。ご指摘いただければ幸いです。

ご教授の程、よろしくお願いいたします。

HTML
1<body>
2  <svg class="defs" version="1.1" xmlns="http://www.w3.org/2000/svg" display="none">
3    <symbol id="logo"><defs><symbol id="svg_10"><metadata></metadata><g><path/></g></symbol></defs><g><use xlink:href="#svg_10"/><g/></g></symbol>
4    <symbol id="btn"><g><polygon/><ellipse/><line/><polygon/><polygon/><polygon/></g></symbol>
5    <symbol id="tag"><g><path/></g></symbol>
6    <symbol id="calender"><g><path/></g></symbol>
7    <symbol id="line"><defs><linearGradient></linearGradient><linearGradient/></defs><g><g/><path/></g></symbol>
8    <symbol id="folder"><defs><linearGradient><stop/><stop/></linearGradient><radialGradient><stop/><stop/></radialGradient></defs><g><path/></g></symbol>
9  </svg>
10      <div class="outer">
11         <div id="folder1" class="container">
12              <svg><use xlink:href="#folder"/></svg> //ここが反映されなくなる☆
13         </div>
14         <div id="folder2" class="container">
15              <svg><use xlink:href="#folder"/></svg> //ここが反映されなくなる☆
16         </div>
17         <div id="folder3" class="container">
18              <svg><use xlink:href="#folder"/></svg> //ここが反映されなくなる☆
19         </div>
20      </div>
21      <div class="main">
22        <article class="article">
23          <section class="section1">
24            <div class="set">
25              <h1>Title1</h1>
26              <ul>
27                <svg><use xlink:href="#calender"/></svg>
28                <li>date</li>
29                <svg><use xlink:href="#tag"/></svg>
30                <li>object</li>
31              </ul>
32            </div>
33            <svg><use xlink:href="#line"/></svg> //ここが反映されなくなる☆
34          </section>
35          </div>
36        </article>
37        <article class="article">
38          <section class="section2">
39            <div class="set">
40              <h1>Title1</h1>
41              <ul>
42                <svg><use xlink:href="#calender"/></svg>
43                <li>date</li>
44                <svg><use xlink:href="#tag"/></svg>
45                <li>object</li>
46              </ul>
47            </div>
48            <svg><use xlink:href="#line"/></svg> //ここが反映されなくなる☆
49          </section>
50          </div>
51        </article>
52      </div>
53</body>
54
55

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓追記↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

svg
1申し訳ありません。
2文字数が１７７７０文字になってしまったので、コードペンにsvgを記載しています。
3https://codepen.io/89txtx/pen/XWNpEbG

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

#試したこと

html
1<symbol id="line">
2  <defs
3     id="defs20">
4   <symbol>
5    <linearGradient">
6      <stop/>
7      <stop/>
8    </linearGradient>
9   </symbol>
10  </defs>
11  <g>
12   <use xlink:href="test">
13    <g/>
14    <path/>
15  </g>
16</symbol>
17

yambejp

2021/02/03 07:24

開始・終了タグや入れ子のないタグの書き方がひどい状態です。最低限、開始と終了を１対１になるように書き換えて下さい

Kosketu

2021/02/03 09:38 編集

間違っていた部分がありましたので修正いたしました。画像を作った当初の通りだったんですが、<g/>、<path/>のように省略がなされている元々のコードと、XMLの省略禁止ルールが競合してしまって、困惑してます。この場合、原則通りに終了タグを付与してもいいですか？？

AT_2nd

2021/02/13 16:45 編集

やりたい事はなんとなく分かったような気がしないでもないですが、具体的な座標やパスが省略されていては検証のしようがないです。その辺を省略せずに提示して下さい。

Kosketu

2021/02/13 16:47

ご指摘ありがとうございます！！すぐ確認次第修正・追記致しますので、ご確認のほどよろしくお願いいたします！！

phoepsilonix

2021/02/13 17:14

ミスタイプかもしれませんが、とりあえず後ろに余分な/gタグがあります。 ``` <g><use xlink:href="#svg_10"/><g/></g> ```

Kosketu

2021/02/13 18:29

phoepsilonixさん本当に無知で申し訳ありません。inkspaceにて画像を作成したため、このタグがもともと入ってました。。。

AT_2nd

2021/02/13 20:44

svgはxmlのサブセットですので、<g/>の部分単体で空のg要素を意味します。なので、<g><use xlink:href="#svg_10"/><g/></g>は、xmlの構造としては間違っていませんよ。間違っていないだけでこの空のg要素が入っている意味は全くありませんが。

Kosketu

2021/02/14 09:04 編集

回答コメントに書き写し

Kosketu

2021/02/14 11:20 編集

回答コメントに書き写し

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

回答1件

ベストアンサー

SVGの部分を別ファイルに切り出して確認したら、下記の問題が見つかりました。

・xlinkの名前空間定義が<symbol id="line"/>の中で宣言されている。
当然その外ではxlink接頭辞は機能しない。
・<symbol id="line"/>の中で、id属性が二重に付けられている。(id="svg16")
・idがfolderのsymbol要素が存在しない。

これらの問題を解決したら、#lineは使用できました。存在していない#folderはどうにもならんですが。
修正内容は自分で考えてどうぞ。

投稿2021/02/13 20:38

AT_2nd

総合スコア266

Kosketu

2021/02/14 09:15 編集

ご確認いただきありがとうございます！！！申し訳ありません。問題点を上げていただいた中で、namespaceの定義を<symbol id="line"/>ないでしていることが問題であることは理解できたのですが、解消するためには、これらをどこのタグに記述するべきなのかが分かりませでした。他、2点の問題箇所については、昇華済みでして、もし良かったら。ご説明いただけると大変嬉しいですが、お手数になる場合は、参考サイトなどを教えていただけませんでしょうか？理解力がなくて誠に申し訳ありません。