SVGアイコン HTMLインライン書き込み CSS contentでWeb表示 カラーとサイズ変更

SVGはHTMLインラインもしくはCSS content

SVGはHTMLインラインならspanで囲んでマークアップ
当然、HTMLはバカでかくなる

下記SVGアイコンサンプルの「chevrons-right」から「share-2」までの24個、および最後の「heart-handshake」はHTMLインライン処理

それ以外は「bookmark」から「paperclip」までがCSS contentでSVGコードを読み込み

サイズ設定はspan / カラー設定はstrokeとfill

⌘ なお、Material Symbols and Icons はサイズもカラーもCSSで変更はイージー

SVGは一手間も二手間も
HTML内インラインのコードで、width / height を削除してCSSで変更可能
カラーも stroke を削除してCSSで変更可能、fillはCSSのカラー設定は難しい(svgやpathのfillカラー設定は運次第?…)

HTML内インラインのコードを直接編集するなら、サイズやカラーも設定できるが、変更もインラインのコードを直接編集する必要あり

インラインSVGの設定はサイズ 線 塗りつぶし

SVGの最短手順の活用はspanでマークアップ、インライン書き込み
幅(width)と高さ(height)、描画線(stroke)、塗りつぶし(fill)の設定/変更
CSVコードのwidth / height / stroke / fillを直接編集するか、CSSで記述する


chevrons-right


pencil


calendar-time


clock


clock-2


category


tag


square-plus


circle-plus


heart-filled


heart


sitemap


home


home-2


star-filled


bookmark


star-half-filled


star-half


brand-apple


brand-android


brand-wordpress


world-www


browser


share-2


bookmark


coin-yen


currency-yen


credit-card


coin


currency-dollar


device-desktop


layout-grid


layout-grid-add


square-circle


paperclip


heart-handshake

カラー設定はインラインのコードを直接またはCSSで可能

上記のSVGアイコンサンプルで、「star-half-filled」はHTML内インラインのコードで、2番目のpathのfillに直接カラー設定している
また「heart-handshake」は、CSS読み込みではうまくいかず、HTMLインラインでfillカラーを記述してやっと表示されるようになっている

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

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

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

Tabler Iconsで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>
html

HTML記述 汎用パターン 一例

汎用化のために、<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を識別明示

css

CSS記述 汎用パターン 一例

.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の事例1

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

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

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

CSS contentの事例2

結局、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を記述している

 

お役立ち
注目