SVG Webアイコン 最短手順 レスポンシブ HTMLインライン書き込み CSS content読み込み

SVG Webアイコン

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

Tabler Icons: over 4800 vector icons for web design

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-seo" 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>
   <path d="M7 8h-3a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-3"></path>
   <path d="M14 16h-4v-8h4"></path>
   <path d="M11 12h2"></path>
   <path d="M17 8m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path>
</svg>

これを、下記ページで圧縮

SVG最適化 コンパクト化

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-seo" 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="M7 8h-3a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-3"/>
<path d="M14 16h-4v-8h4"/>
<path d="M11 12h2"/>
<path d="M17 8m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"/>
</svg>

HTMLインライン書き込み

上記の圧縮SVGコードの赤の箇所と青の箇所・紫(バイオレット)の箇所を削除してHTMLの所定の箇所に貼り付ける
CSSでサイズ変更するためにspanでマークアップする

<span><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-seo" viewBox="0 0 24 24" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M7 8h-3a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-3"/>
<path d="M14 16h-4v-8h4"/>
<path d="M11 12h2"/>
<path d="M17 8m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"/>
</svg></span>

HTMLインラインSVGのサイズやカラーのCSS記述は

要素名 span {
	display: inline-block;
	width: 48px;
	height: 48px; }
要素名 span svg {
	fill: #EA4335;
	stroke: #4285F4; }

CSS content読み込み

圧縮SVGコードの紫(バイオレット)の箇所(stroke)は、CSSのcontent側でstrokeカラー設定のために残して、下記のように記述

要素名 {	content: url( 'data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-seo" 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="M7 8h-3a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-3"/>
<path d="M14 16h-4v-8h4"/>
<path d="M11 12h2"/>
<path d="M17 8m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"/>
</svg>' ); }

strokeのところは「stroke=”red”」やら「stroke=”#FF0000″」などカラーコードに書き換え

HTMLインライン書き込みがおすすめのSVG活用法

SVGのインライン書き込みであれば、サイズ設定はもとより、strokeのカラー設定もほぼ可能、fillも設定できる可能性があり、ダメな場合はHTMLインラインのSVGコードを書き直すだけ

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

SVGは、脱レガシーWeb、モダンWeb最適のツールとなる