画像ファイルなしCSSだけでSVGを表示

スタイルシートだけでSVG画像を表示する方法です。
画像ファイルを読み込んで表示するのではなく、SVGのコードをBase64でエンコードしてソースに直接埋め込みます。
古いブラウザでは表示できませんので、ご注意を。

  • × InternetExplorer 8 以下
  • × Android 2.3 以下

メリットは、ページ読み込み時のリクエストを減らせること
デメリットは、一見なんの画像を貼り込んでいるのかわからないので、うまく管理しないとカオス化すること…です。

実際のコードはこのようになります。
当ブログの開発環境アイコンに使っているパソコンが表示されています。

<div class="sample">
</div>
.sample:after {
	content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPg0KPHBhdGggZD0iTTMwLDJIMkMwLjg5NiwyLDAsMi44OTYsMCw0djE4YzAsMS4xMDQsMC44OTYsMiwyLDJoMTEuMTk4bC0xLjIxLDRINi45ODRsLTAuNCwyaDE4LjgzbC0wLjM5OC0yaC01LjAwNGwtMS4yMS00SDMwDQoJYzEuMTA0LDAsMi0wLjg5NiwyLTJWNEMzMiwyLjg5NiwzMS4xMDQsMiwzMCwyeiBNMjkuNCwyMEgyLjZWNC42aDI2LjhWMjB6Ii8+DQo8L3N2Zz4=');
}

文字列化したSVGをCSSの書式に当てはめる

実際の手順はこうなります。

  1. SVGを用意
  2. Base64にエンコード
  3. CSSにあてはめる

SVGのコードを見る

.svg拡張子のデータをテキストエディタから開くか、もしくはブラウザで表示しソースを表示するとコードを確認できます。
サンプルのアイコンはこのようになっています。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
<path d="M30,2H2C0.896,2,0,2.896,0,4v18c0,1.104,0.896,2,2,2h11.198l-1.21,4H6.984l-0.4,2h18.83l-0.398-2h-5.004l-1.21-4H30
	c1.104,0,2-0.896,2-2V4C32,2.896,31.104,2,30,2z M29.4,20H2.6V4.6h26.8V20z"/>
</svg>

SVGコードをBase64にエンコードする

オンラインでエンコードしてくれるサービスがあるので、活用させていただいてます。

Base64 Decode and Encode – Online

テキストエリアへSVGのコードをペーストし、エンコードボタンを押します。

Base64にエンコードされると、SVGのコードはこのように1行のとても長い文字列になります。

PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPg0KPHBhdGggZD0iTTMwLDJIMkMwLjg5NiwyLDAsMi44OTYsMCw0djE4YzAsMS4xMDQsMC44OTYsMiwyLDJoMTEuMTk4bC0xLjIxLDRINi45ODRsLTAuNCwyaDE4LjgzbC0wLjM5OC0yaC01LjAwNGwtMS4yMS00SDMwDQogICAgYzEuMTA0LDAsMi0wLjg5NiwyLTJWNEMzMiwyLjg5NiwzMS4xMDQsMiwzMCwyeiBNMjkuNCwyMEgyLjZWNC42aDI2LjhWMjB6Ii8+DQo8L3N2Zz4=

CSSの書式へ当てはめる

こうして取得したコードをCSSの書式に当てはめます。
擬似要素のcontentとしたり、背景画像にしたりできます。

例は、sampleというclass名の要素へ指定する場合です。

.sample:after {
	content: url('data:image/svg+xml;base64,ここにSVGのコード');
}
.sample {
	background: url('data:image/svg+xml;base64,ここにSVGのコード');
}

関連記事

Pocket