SVG画像の読み込み方を使い分ける
こんにちは。Gaji-Labo 横田です。SVG 画像の読み込み方を使い分けているパターンについて紹介します。
SVGをdataURLでCSSに記述する
同じ画像だけれど、色やサイズをページやコンポーネントごと、状態変化によって変更したい時、dataURL で CSS に記述して使います。
div {
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 12" width="12" height="7"><path d="M6.7,5.3l-5-5A.967.967,0,0,0..." fill="%23000000"/></svg>') no-repeat right center;
&:has(select:invalid) {
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 12" width="12" height="7"><path d="M6.7,5.3l-5-5A.967.967,0,0,0..." fill="%23CCCCCC"/></svg>');
}data:image/svg+xml;charset=UTF-8, に続けて SVG のコードを挿入します。
色の指定はパーセントにエンコーディングしておきます。fill や width などの値を簡単に変更できるので、違いごとの画像を用意する必要がなくなり、パフォーマンスの向上にもつながりますね。
SVGをインラインでHTMLに記述する
別ウィンドウで開くリンクに付くアイコンなど、HTML 側に直接画像を置きたい時、SVG 画像をインラインで HTML に記述して使います。
<a href="" target="_blank">
リンク
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" role="img" aria-label="別ウィンドウで開く">
<path d="M-299.3,6229a.684.684,0,0..." transform="translate(300 -6214)" fill="#252525"/>
</svg>
</a>role="img"と aria-label 属性で代替テキストの代わりの機能を補完してみました。
こちらも色やサイズを直接変更できるのがメリットですが、複数箇所に使うとコードの見通しや保守性が下がるので、アクセシビリティの観点から HTML に記述したい場合や出現数とのバランスで採用を決めています。
SVGを画像として読み込む
単体でしか使わない画像やコードの複雑な SVG 画像は、通常の画像と同様に使用します。
<img src="/assets/images/hoge.svg" alt="" width="100" height="100">div {
background: url("/assets/images/hoge.svg") no-repeat;
background-size: 50% 50%;
}画像を SVG にすることでファイルサイズを小さくできますし、サイズの変更も容易です。
ちなみに、わたしはコードエディタに VS Code を使用しているのですが、SVG 画像をエディタで開くとコード表示になってしまい、何の画像か判断できないのが地味に不便でした。この不便さは Svg Preview という拡張機能を入れることで解消されました！ライブ編集もできるので VS Code で SVG 画像を扱う場合におすすめです。
おわりに
小さなことですが、SVG の読み込み方を使い分けることで、パフォーマンスやアクセシビリティの向上、運用のしやすさにつながると考えます。
開発のお悩み、フロントエンドから解決しませんか？
あなたのチームのお悩みはなんですか？
「バックエンドエンジニアにフロントエンドまで任せてしまっている」
「デザイナーに主業務以外も任せてしまっている」
「すべての手が足りず細かいことまで手が回らない」
役割や領域を適切に捉えてカバーし、チーム全体の生産性と品質をアップするお手伝いをします。
フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にお声がけください。
オンラインでのヒアリングとフルリモートでのプロセス支援に対応しています。
リモートワーク対応のパートナーをお探しの場合もぜひ弊社にお問い合わせください！
お悩み相談はこちらから！
