質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

1144閲覧

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

Kosketu

総合スコア46

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2021/02/03 07:12

編集2021/02/14 09:19

参考サイト: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文字数が17770文字になってしまったので、コードペンに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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2021/02/03 07:24

開始・終了タグや入れ子のないタグの書き方がひどい状態です。 最低限、開始と終了を1対1になるように書き換えて下さい
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 編集

回答コメントに書き写し
guest

回答1

0

ベストアンサー

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点の問題箇所については、昇華済みでして、もし良かったら。ご説明いただけると大変嬉しいですが、お手数になる場合は、参考サイトなどを教えていただけませんでしょうか?理解力がなくて誠に申し訳ありません。
AT_2nd

2021/02/14 09:32

分からないなら、適当にルート要素にでも放り込んでおけばokです。
Kosketu

2021/02/14 11:20

妥協は許さず、のつもりでしたが、私のレベルはここまでなのかと痛感しました。もう少しがんばってみます。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問