SVGアイコン HTMLインライン書き込み CSS content カラーとサイズ

SVG Webページ表示 カラー・サイズ設定

レスポンシブで悩まないのがSVG(そのはず…)

• Tabler Icons: over 4800 veC.T.O.r icons for web design

上記のSVG無料配信サイトで、「coin-yen」のSVGコードを取得する

コードは次のとおり
HTMLインラインでも、CSS contentでも、コードはそのまま利用する

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-coin-yen" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M9 12h6" /><path d="M9 15h6" /><path d="M9 8l3 4.5" /><path d="M15 8l-3 4.5v4.5" /></svg>

汎用化のために、<div class="svg-box">～</div> で外側をマークアップ

HTMLインラインのケース

SVGコードは、spanでマークアップ

<div class="svg-box"><span class="icon-tabler-coin-yen inline"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-coin-yen" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M9 12h6" /><path d="M9 15h6" /><path d="M9 8l3 4.5" /><path d="M15 8l-3 4.5v4.5" /></svg></span></div>

「inline」は、今回のみの振り分け用のclassで、HTMLインラインを識別明示

CSS contentのケース

SVG読み込みコードは、空のspanコードでclassにSVG固有のコードを記述

<div class="svg-box"><span class="icon-tabler-coin-yen content"></span></div>

「content」も、振り分け用のclassで、CSS contentを識別明示

.svg-box svg {
	width: 100%;
	height: 100%; }
.svg-box span.icon-tabler-coin-yen:is(.content, .inline) {
	display: inline-block;
	width: 60px;
	height: 60px; }

SVGも画像と同じように、SVGコードに width / height が記述されていても、幅と高さを100%にしておくと、アスペクト比を保ったままSVGを囲むボックスのサイズに合わせてレスポンシブで伸縮する

HTMLインラインのケース

.svg-box span.icon-tabler-coin-yen.inline svg {
	stroke: red; }

今回は、CSS側で「stroke」つまり線のカラーを設定できている
塗りつぶしカラーも、svgタグ、pathタグ内の「fill」で設定できることがある
つまり、SVGの元コーディング次第

CSS　contentのケース

CSS content は、サイズ設定は可能だが、カラー設定はできない

HTMLインライン CSS contentのカラー設定検証

SVGのカラー設定を、HTMLインラインおよびCSScontent で下記で検証

HTMLインラインの事例

上述のように、svg-boxおよびspanでSVGコードをマークアップ

CSSでSVGのstrokeに「red」を設定
ストローク 線は、赤色に

CSS contentの事例１

svg-box内に空のspanで、CSS content記述

.svg-box span.icon-tabler-coin-yen.content svg {
	stroke: blue; }

このようなCSS記述で、ストローク 線のカラーは青色にはならない

CSS contentの事例２

結局、CSSではカラー設定ができなかったので、CSS contentの箇所 SVGコードの stroke="blue" と、直接書き換え

SVGはGoogleアイコンやロゴも

これらのSVGの取り扱い、サイズやカラー設定などは、SVG本体はもとより、Material Symbols and IconsもCSV(pngも)を提供しており、いろいろなロゴはSVGが提供されていることも多い

SVGはテキストベースのベクター画像なので、4K・DPR:3や、レスポンシブなどで表示も画質？も悩まない

ちなみに、上述の見出しアイコン「HTML」と「CSS」は、Material Symbols and Iconsのアイコンフォントでは意図したとおりの表示にならないので、緊急避難措置としてMaterial Symbols and IconsのSVGで height / width / fillを設定し、HTML内インラインで仕込んでいる
また「SVG」は、そもそもMaterial Symbols and Iconsにはないので、SVGを記述している