インラインSVGのdefsとgかsymbolとuseによる呼び出しのマークアップ 結城永人 - 2021年6月27日 (日) サイトに画像を描画できるインラインSVGは小さくても乱れず、しかもサイト内にマークアップすればサーバーの呼び出しを行わず、迅速に表示できるからアイコンのデザインなどに良く使われる。 Honeycomb by Clker-Free-Vector-Images / Pixabay インラインSVGには同じ画像を繰り返して表示するためのマークアップがある。 一つのsvgタグの内側にdefsタグを入れてそこにid付きのgタグかsymbolタグで描画内容を纏めておく。そして内側か、または外側の場合は他のもう一つのsvgタグにuseタグを入れてhref属性でgタグかsymbolタグのidを指定してリンクのように呼び出す。 目次インラインSVGの二つの呼び出し方一つのsvgタグの中で呼び出す場合定義用と表示用のsvgタグを分ける場合呼び出しのマークアップの長所と短所SVGのgタグとsymbolタグの違い インラインSVGの二つの呼び出し方 一つのsvgタグの中で呼び出す場合 HTML <svg viewBox="0 0 124 36" width="124" height="36"> <defs class="hidden"> <g id="rect_g"> <rect x="2" y="2" width="32" height="32" stroke-width="4px" stroke="#8fbc8f" fill="#2e8b57" rx="2px" ry="2px"/> <rect x="46" y="2" width="32" height="32" stroke-width="4px" stroke="#2e8b57" fill="#3cb371" rx="2px" ry="2px"/> <rect x="90" y="2" width="32" height="32" stroke-width="4px" stroke="#3cb371" fill="#8fbc8f" rx="2px" ry="2px"/> </g> </defs> <use href="#rect_g"/> </svg> CSS .hidden {display:none} ※SVGの名前空間のxmlns属性やxmlns:xlink属性は付けなくてもHTML5のブラウザは付くものとして把握する。 複数の画像をsvgタグのviewBox/座標系に全て纏めて記載するのに向いてそうだ。 定義用と表示用のsvgタグを分ける場合 HTML /* 呼び出し元のマークアップ */ <svg class="hidden" viewBox="0 0 36 36"> <symbol id="rect_r1"> <rect x="2" y="2" width="32" height="32" stroke-width="4px" stroke="#dfc0cb" fill="#8b0000" rx="2px" ry="2px"/> </symbol> <symbol id="rect_r2"> <rect x="2" y="2" width="32" height="32" stroke-width="4px" stroke="#8b0000" fill="#ff0000" rx="2px" ry="2px"/> </symbol> <symbol id="rect_r3"> <rect x="2" y="2" width="32" height="32" stroke-width="4px" stroke="#ff0000" fill="#dfc0cb" rx="2px" ry="2px"/> </symbol> </svg> /* 呼び出し先のマークアップ */ <svg width="36" height="36"><use href="#rect_r1"/></svg> <svg width="36" height="36"><use href="#rect_r2"/></svg> <svg width="36" height="36"><use href="#rect_r3"/></svg> CSS .hidden {display:none} ※SVGの名前空間のxmlns属性やxmlns:xlink属性は付けなくてもHTML5のブラウザは付くものとして把握する。 複数の画像を一ずつ扱って色んなところに配置するのに向いてそうだ。 どちらの場合でもdefsタグは使わなくても画像の表示に支障はないけれどもSVGのマークアップとしては使うことが推進されている。 SVGでは、後で再利用できるよう描画オブジェクトを定義します。参照される要素は、可能なかぎりdefs要素内で定義されることが推奨されています。defs要素内でこれらの要素を定義することは、SVGの要素の可読性を向上させ、ひいては操作性をも向上させます。defs要素の描画要素は、そのままでは描画されません。ビューポート上で描画したい場所へそれらの要素を描画するために、<use>要素を使用します。 defs|MDN|Mozilla defsタグはサイトのソースコードでそれ自体がインラインSVGの「参照される要素」を含むという「可読性」を示すと同時に囲んだ領域を表示しないので、インラインSVGの画像を部分的に使ったり、使わずに他のuseタグの呼び出しでのみ使ったりするという「操作性」を与える。 只、symbolタグについては最初から呼び出しのuseタグとセットで使うものと決まっているからそうした描画用のマークアップを収めるだけの用途ならばdefsタグで囲わなくても不都合は特にない。 インラインSVGの呼び出しのマークアップは画像を定義する呼び出し元を表示したくない場合はデザインのCSSで親要素のsvgタグなどに非表示の「display:none」をかける。 defsタグやsymbolタグを使うとその場で描画しなくなるけれどもマークアップした分の高さが残ってしまうから余計な隙間を縮めるためにもCSSの「display:none」で要素として取り除くか、せめて「height:0」で高さをなくす必要が出て来る。 画像の大きさは表示するsvgタグに横幅のwidth属性と縦幅のheight属性を付ける(pxか%の値で、単位なしはpx値となる)かCSSの縦幅のwidthと横幅のheightを指定する(単位ありの値)のが簡単だ。 定義用と表示用のsvgタグが同じか異なる場合の何れにしても画像を呼び出して実際に表示するuseタグを含む方で大きさを調節できる。 呼び出しのマークアップの長所と短所 僕はインラインSVGの呼び出しのマークアップに関して一つのページに同じ画像が幾つも必要でなければ意味がないと思ってブログのアイコンでも使わなかったけれども表示速度などのパフォーマンスへの好影響がないわけではないかも知れないから改めて使ってみたくなったんだ。 一方defs要素に定義されたグラフィックをuse要素から参照する場合,一旦defs要素内で解析済みの内容をuse要素部に描画するだけであり,その結果スクリーンの書き換え処理の回数を極小化できる.つまり,オフスクリーンレンダリングのような効果が得られる. SVGの高速化・生DOMを直接描画するな|ゲームミュージックと生存確認をかねた画期的な ブラウザのインラインSVGのパースとレンダリング(解析と表出)が分離されるとスクリーンの描画コストを下げることができるのかも知れない。 または描画内容の比較的に長めのマークアップを定義用としてインラインSVGの実際の表示位置から外して下の方にでも置けば後続のコンテンツへのブラウザの動作もなるべく止めずに済ませられるかも知れない。 defsとgかsymbolとuseによる呼び出しのマークアップは複数のインラインSVGを一つに纏めておけるから便利だけれどもそれらを一つずつしか使わない場合でもやる価値はパフォーマンスの向上のためにありそうだ。 ただし状況によって反対の結果を招くという可能性もあるから注意を要する。 私は<use>を深く入れ子にしないことを助言する。大半のブラウザで遅鈍を引き起こすと知られている、こちらとこちらで分かる。 原文 I would advise you to not nest <use> elements deeply. That is known to cause slowdowns in most browsers, see here and here. Does reusing symbols improve SVG performance?|stackoverflow(訳出)|Stack Exchange gタグやsymbolタグの中にuseタグを記載すると階層が深くなるほどにインラインSVGのパフォーマンスの低下を招く。 その他、アニメーションを付けるとスクリーンの書き換えが増えて表示速度が下がり易くなる。 use要素とsymbol要素は、Flashで使われる「シンボル化」と違って、内部でかなり複雑な変換をしています。 動的な変更があるたびに、この複雑な変換をしますので、描画処理の性能が落ちてしまいます。 重たくなりますので、必ず、この二つの要素は避けましょう。 SVGを高速化させるためのルール|プラグインレスでSVGを表示する「SIE」開発ブログ gタグを含めてアニメーションはデザインのCSSの更新などでもパフォーマンスを低下させるからなるべくインラインSVG自体を使わない方が望ましいようだ。 その他、大きな画像の場合はインラインSVGをサイト内よりも外部ファイルのマークアップから呼び出す方がブラウザが適切に読み込んだり、保存して使い回せたりして効率的かも知れない。 大量の5k以下の小さなSVG――SVGスプライトを作る 原文 Huge number of small SVG(s) < 5k - Make SVG sprite Inline SVG vs SVG File Performance|stackoverflow(訳出)|Stack Exchange 例えばアイコンを大量に使うような場合はインラインSVGのマークアップを外部ファイルに「SVGスプライト」として全て纏めて一回で読み込む方がパフォーマンスが良いと考えられる。 useタグで外部ファイルを読み込む場合はリンクと全く同じにhref属性にインラインSVGの定義を置いたサイトのURLを入力することになる。 SVGのgタグとsymbolタグの違い どちらもidを付けるとuseタグでマークアップされた描画内容をhref属性で呼び出すことができるけれども全く同じものでもない。 gタグの特徴それ自体は表示される座標系のviewBox属性が使えない縦横比のpreserveAspectRatio属性が使えないsymbolタグの特徴useタグなしに表示されない座標系のviewBox属性が使える縦横比のpreserveAspectRatio属性が使える HTML要素としてgタグはSVGの描画内容を纏めるもの、symbolタグはuseタグで呼び出される描画内容を示すものなので、インラインSVGの呼び出しにはsymbolタグを使うのが普通だろう。 両方とも別々に使うだけではなく、gタグの中にsymbolタグ、反対にsymbolタグの中にgタグを入れ子にして一緒に使うこともできる。 useタグが呼び出せるのはgタグとsymbolタグだけではなく、svgタグやグラフィックス要素と呼ばれる一群の描画用のタグ: circle/ellipse/image/line/path/polygon/polyline/rect/text/useもidを付ければhref属性で表示できる。 コメント 新しい投稿 前の投稿
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
アドセンスのGDPRに日本でも対応しなくてはならない場合がある アドセンスの個人情報のCookieなどの使用に関してサイトの訪問者に同意を得なくてはならない法律としてEU(European Union/欧州連合)の GDPR (General Data Protection Regulation/EU一般データ保護規則)がある。外国の個人情報...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
日本人がジャニーズ事務所で行われた性加害よりも恐れていること イギリスの公共放送のBBC(British Broadcasting Corporation/英国放送協会)が日本のジャニーズ事務所の創業者の ジャニー喜多川 の性加害について取り上げたドキュメンタリーの J-POPの捕食者:秘められたスキャンダル に衝撃を受けた。 目次 ジ...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
キム・テヒの反日活動を日本人としてどこまで許せるか かつて韓国ドラマの IRIS -アイリス- を観て何て綺麗で可愛くて良いんだと一目で度肝を抜かれた俳優に キム・テヒ がいた。 映画『アイリス -THE LAST-』予告編 by TAEWON ENTERTAINMENT from シネマトゥデイ 日本で放映されたのが2...
コメント