フォローしてみる

HTML内でSVGを快適に使いまわし

フロントエンド実装

HTMLにCSS装飾可能な状態でSVGを読み込む方法のご紹介。
SVGシンボルさえ用意できれば、快適なSVGライフを送ることができます。オススメです。

こんな方にオススメです

  • ・オリジナルロゴなどのSVGをページ内で何箇所も設置したい
  • ・設置したSVGはCSSで色などを簡単に変更できるようにしたい
  • ・SVGを１つのファイルにまとめて管理したい
  • ・HTMLがSVGだらけで汚くなるのはイヤだ！

ファイル構成イメージ

実装の際の構成イメージです。

下図のように、SVGシンボルが内部に記述されたJavascript（外部ファイル）をページロード時に指定エリアに読み込む構成にしています。

今回用意した、読込みされるJSファイル↓
SVGシンボルコードを取得する方法は、コチラの記事でご覧いただけます。

$(function () {
  //ページ読込実行後にSVGシンボルを定義エリアに追加する
  
  //SVGシンボルの定義
  //Illustratorなどから書き出したSVGシンボルのコードを貼り付けておきます。
  //自分は管理のし易さからシンボル毎に配列に分けていますが、ひと続きに繋げて定義しても問題ありません。
  let svgSymbols = [
    //シンボル１（Twitter）
     '<symbol id="svgIconTwitter" data-name="svgIconTwitter" viewBox="0 0 28 22.778"><path d="M28,2.632a7.352,7.352,0,0,1-3.352.812l-.01-.022a4.727,4.727,0,0,0,2.4-2.943A10.409,10.409,0,0,1,23.555,1.8a5.744,5.744,0,0,0-9.8,5.068C9.706,7.1,6.351,5.633,1.675.957A6.094,6.094,0,0,0,3.35,8.615,7.247,7.247,0,0,1,.957,8.137s-.239,4.068,4.547,5.5a4.188,4.188,0,0,1-2.393.239s.479,3.351,5.265,3.829A11.519,11.519,0,0,1,0,20.342a16.716,16.716,0,0,0,21.06-3.111A15.826,15.826,0,0,0,25.125,5.885c0-.047,0-.094,0-.141s0-.1,0-.152A10.8,10.8,0,0,0,28,2.632Z"/></symbol>'
    //シンボル２（Facebook）
     ,'<symbol id="svgIconFacebook" data-name="svgIconFacebook" viewBox="0 0 14.822 26.217"><path d="M10.746,4.632h4.076V0H10.746A6.028,6.028,0,0,0,4.725,6.022V9.171H0v4.262H4.725V26.217H9.357V13.433h5.28V9.171H9.357V6.022A1.408,1.408,0,0,1,10.746,4.632Z"/></symbol>'
  ];

  //定義エリアにSVGをセット
  $('#svgDefine').append('<svg xmlns="http://www.w3.org/2000/svg">' + svgSymbols.join("") + '</svg>');
});

実装の例（HTML+CSS）

今回は以下のHTMLとCSSで動かしてみます。
シンボル化されたSVGは以下の記述で呼出しと設置ができます。

<svg class=”CSSクラス名（任意）”><use xlink:href=”#シンボルのID”></use></svg>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG-Demo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <svg class="sns-icon twitter"><use xlink:href="#svgIconTwitter"></use></svg>
  <svg class="sns-icon twitter red"><use xlink:href="#svgIconTwitter"></use></svg>
  <svg class="sns-icon facebook"><use xlink:href="#svgIconFacebook"></use></svg>

  <!-- ↓ここにJSファイルからSVGシンボルの定義が挿入される（非表示ブロック） -->
  <div id="svgDefine"></div>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="svg_symbols.js"></script>
</body>
</html>
#svgDefine{
  display: none;
}

.sns-icon{
  width:44px;
  height:44px;
}

.sns-icon.red{
  fill: #FF0000;
}

.sns-icon.twitter:hover{
  fill: #00acee;
}

.sns-icon.facebook:hover{
  fill:#3b5998;
}

動作デモ

アイコンの初期表示色が赤に変わっていること、マウスオンした時に色が変わること、がResultエリアで確認できると思います。
（Resultエリアが表示されていない場合は、「Run Pen」をクリック）

このようにCSSの記述だけで、１行呼出しのオリジナルSVGをイジる事ができるようになります。

些細な変更のために、バージョン違いの画像ファイルを作成しないといけない機会も減るのではないでしょうか？

See the Pen svg_symbols_in_html by ゆずる (@yuz_unemployed) on CodePen.

この投稿をシェアする

広告

目次

広告

関連記事

記事をもっと見る