SVGのアイコン埋め込み HTML編

ブログのカスタマイズを始めると、いくつかのアイコンを使うために【FontAwesome】 を利用するようになると思います。この FontAwesome の css を読み込むように設定するのがこれ。

<link href='//use.fontawesome.com/releases/v5.14.0/css/all.css' rel='stylesheet' type='text/css'/>

でも、PageSpeed Insights では、レンダリングを妨げるリソースだって言われちゃいます。

そこで今回は、Bloggerテーマの HTML 内に、SVG データを埋め込んでしまう方法を紹介します。CSSの疑似要素へ埋め込む場合は、こちらの記事のほうをみてください。

埋め込み方

FontAwesome のサイトは次のところです。

普通の使い方だと、ここのページから欲しいアイコンをみつけて、表示されてる i タグを自分のページのHTMLに張り付けていると思います。欲しいアイコンを探すまでは同じです。

ぱっと見わかりにくいです。真ん中ボタン下の Free Icons のリンクを選ぶとアイコン検索画面にいけます。また、幅を細くすると左上にハンバーガーボタンがでるので、そこからメニューをだして、ICONSを選んでもいいです。

ここで、検索するなりして、目的のアイコンを探します。薄い色は有償のプロ版のアイコンです。

赤い丸で囲ったところが i タグ、大抵のサイトは、これを埋め込んで使うよう説明されています。CSSへ埋め込む時は、青で囲った番号を使って説明されていると思います。

今回は、緑で囲ったダウンロードボタンから、ダウンロードして埋め込んでしまうという方法でアイコンを導入します。

ダウンロードすると、中身は、こんな感じ。

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-double-up" class="svg-inline--fa fa-angle-double-up fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path fill="currentColor" d="M177 255.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 351.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 425.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1zm-34-192L7 199.7c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l96.4-96.4 96.4 96.4c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9l-136-136c-9.2-9.4-24.4-9.4-33.8 0z">
</path>
</svg>

これを、Blogger テーマの HTML に埋め込んでいきます。埋め込み先は、body タグの先頭がよいでしょう。フォーマットは次のようにします。SymbolタグでPathタグ囲って、埋め込みます。

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  
  <symbol id="beaker" viewBox="214.7 0 182.6 792">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>
  
  <symbol id="shape-icon-2" viewBox="0 26 100 48">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>
  
</svg>

使い方

埋め込み時につけた id で、use タグをつかって使います。

<svg class='svg'>
	<use xlink:href='#svg-angle-double-up'/>
</svg>

  .svg {
    fill: currentColor;
    height: 1em;
    width: 1em;
    margin-left: 2px;
    margin-right: 2px;
    vertical-align: -8%;
  }
  .svg-external-link-alt {
    margin-left: 5px;
    vertical-align: -3%;
  }
  .svg-exclamation-triangle {
    fill: orange;
    margin-right: 5px;
    vertical-align: -8%;
  }

<style>
#pagetop,
#pagebottom {
    display: none;
    position: fixed;
    right: 0;
    color: #6495ed;
  	font-size:2.8em;
    z-index: 99;
}
#pagetop {
    bottom: 80px;
}
#pagebottom {
    bottom: 20px;  
}
#pagetop span,
#pagebottom span {
    transition: .5s;
    opacity: .5;
}
#pagetop span:hover,
#pagebottom span:hover {
    cursor: pointer;
    opacity: 1;
}
</style>

結果

見た目は、もちろん同じ。体感上は、いまのところ、なにも変わりませんが、Google の PageSpeed Insights で、FontAwsomeのCSS読み込みを無くすことができました。