BloggerのSVG画像アイコン一覧

2022/04/08 update

BloggerのSVG画像アイコンの一覧です。

公式テンプレートEmporioのSVG画像アイコンの書き方です。

<b:include data='{ iconClass: &quot;touch-icon search-icon&quot; }' name='searchIcon'/>

<b:include data='{ iconClass: &quot;touch-icon hamburger-menu&quot; }' name='menuIcon'/>

htmlに変換されると、以下のようになります。

<svg class='svg-icon-24 touch-icon search-icon'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_search_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>

<svg class='svg-icon-24 touch-icon hamburger-menu'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>

表示されるSVG画像アイコン。

　

　

cssは多いので、テスト用に省略しました。

<style>
.svg-icon-24{
cursor:pointer;
height:24px;
width:24px;
fill:#666666;
}
.touch-icon{
margin:-12px;
padding:12px;
}
.touch-icon:hover{
background-color:rgba(153,153,153,.4);
border-radius:50%;
}
</style>

Google Search Consoleの「設定」の「クロールの統計情報」の「クロールリクエスト: 画像」を見ると /responsive/sprite_v1_6.css.svg ファイルを何度もクロールリクエストしていることが分かりました。アイコンの数だけ /responsive/sprite_v1_6.css.svg を読み込んでいたようです。

Bloggerは自分のサーバーに画像などをアップロードすることができないです。/responsive/sprite_v1_6.css.svg は自分のサーバーの中にあるので、Font Awesomeなどの他のアイコンフォントを読み込むよりは読み込み時間は早いですが、アイコンの数だけ毎回ファイルを読み込むのは効率が悪いです。

SVG画像は画像ではなく、左上から右下まで線を引くなどの画像の設計図です。一度定義すると、何度でも利用可能というSVG画像のメリットが無くなってしまっているので、SVGファイルをインライン化（ファイルを読み込まずに直接内容をテンプレートに書くこと）します。

（ブログのurl）/responsive/sprite_v1_6.css.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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 24 24" id="ic_24_email_dark"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9
・・・
92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></symbol></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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 24 24" id="ic_24_email_dark">」を「<svg style="display:none">」に変更します。

「<svg style="display:none">」から「</svg>」までをコピーして</body>の前に貼ります。「display:none」にしているのは、画像と認識されて無駄な空白ができるのを、表示しないようにするためです。SVG画像アイコンは表示が遅くてもいいと思っているので、</body>の前にしましたが、早く表示したい場合は<body>の後に貼り付けます。

インライン化すると、SVG画像アイコンは簡単なタグで表示できるようになります。（SVG画像アイコンのid）を変更することで、アイコンを設定できます。

<svg><use xlink:href='#（SVG画像アイコンのid）'/></svg>

使い方は以下のようになります。

<svg><use xlink:href='#ic_search_black_24dp'/></svg>

<svg><use xlink:href='#ic_menu_black_24dp'/></svg>

SVG画像アイコンは同じページでは同じ大きさだと思うので、cssでSVGタグに大きさと色を設定します。

<style>
svg{
height:24px;
width:24px;
fill:#333333;
vertical-align:middle;
}
</style>

表示されるSVG画像アイコン。

先ほど貼り付けたSVG画像の設定は以下のようになります。

<symbol viewBox="0 0 24 24" id="ic_search_black_24dp"><path d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></symbol>

<symbol>・・・</symbol>がSVG画像アイコン1つ分です。id="ic_search_black_24dp"の部分が（SVG画像アイコンのid）です。必要なアイコン以外は削除した方がいいです。

ボタンなどに使う場合は目立たせるために、cssでさらに強調させます。SVG画像アイコンを全て同じではなく個別に設定することもできます。複数のSVG画像アイコンを重ねることもできます。

以下はSVG画像アイコンと（SVG画像アイコンのid）とスタイルの設定例の一覧です。

共通スタイル（この設定を書いておけば、個別に設定しない場合はこの設定になる）

<style>
svg{
height:24px;
width:24px;
fill:#333333;
vertical-align:middle;
}
</style>

ic_24_email_dark

<svg class='ic_24_email_dark'><use xlink:href='#ic_24_email_dark'/></svg>
<style>
.ic_24_email_dark{
height:48px;
width:48px;
fill:#dd5144;
}
</style>

ic_24_facebook_dark

<svg class='ic_24_facebook_dark'><use xlink:href='#ic_24_facebook_dark'/></svg>
<style>
.ic_24_facebook_dark{
height:48px;
width:48px;
fill:#1877f2;
}
</style>

ic_24_googlePlus_dark

<svg class='ic_24_googlePlus_dark'><use xlink:href='#ic_24_googlePlus_dark'/></svg>
<style>
.ic_24_googlePlus_dark{
height:48px;
width:48px;
fill:#dd5144;
}
</style>

ic_24_link_dark

<svg class='ic_24_link_dark'><use xlink:href='#ic_24_link_dark'/></svg>
<style>
.ic_24_link_dark{
height:48px;
width:48px;
fill:#1877f2;
}
</style>

ic_24_pinterest_dark

<svg class='ic_24_pinterest_dark'><use xlink:href='#ic_24_pinterest_dark'/></svg>
<style>
.ic_24_pinterest_dark{
height:48px;
width:48px;
fill:#e60023;
}
</style>

ic_24_twitter_dark

<svg class='ic_24_twitter_dark'><use xlink:href='#ic_24_twitter_dark'/></svg>
<style>
.ic_24_twitter_dark{
height:48px;
width:48px;
fill:#1d9bf0;
}
</style>

ic_add_box_black_24dp

<svg class='ic_add_box_black_24dp'><use xlink:href='#ic_add_box_black_24dp'/></svg>
<style>
.ic_add_box_black_24dp{
height:48px;
width:48px;
fill:#1da1f2;
}
</style>

ic_arrow_back_black_24dp

<svg class='ic_arrow_back_black_24dp'><use xlink:href='#ic_arrow_back_black_24dp'/></svg>
<style>
.ic_arrow_back_black_24dp{
height:48px;
width:48px;
fill:#333333;
}
</style>

ic_arrow_forward_black_24dp

<svg class='ic_arrow_forward_black_24dp'><use xlink:href='#ic_arrow_forward_black_24dp'/></svg>
<style>
.ic_arrow_forward_black_24dp{
height:48px;
width:48px;
fill:#333333;
}
</style>

ic_chat_bubble_black_24dp

<svg class='ic_chat_bubble_black_24dp'><use xlink:href='#ic_chat_bubble_black_24dp'/></svg>
<style>
.ic_chat_bubble_black_24dp{
height:48px;
width:48px;
fill:#00b900;
}
</style>

ic_check_box_black_24dp

<svg class='ic_check_box_black_24dp'><use xlink:href='#ic_check_box_black_24dp'/></svg>
<style>
.ic_check_box_black_24dp{
height:48px;
width:48px;
fill:#0f9d58;
}
</style>

ic_check_box_outline_blank_black_24dp

<svg class='ic_check_box_outline_blank_black_24dp'><use xlink:href='#ic_check_box_outline_blank_black_24dp'/></svg>
<style>
.ic_check_box_outline_blank_black_24dp{
height:48px;
width:48px;
fill:#db4437;
}
</style>

ic_chevron_left_black_24dp

<svg class='ic_chevron_left_black_24dp'><use xlink:href='#ic_chevron_left_black_24dp'/></svg>
<style>
.ic_chevron_left_black_24dp{
height:48px;
width:48px;
fill:#333333;
}
</style>

ic_chevron_right_black_24dp

<svg class='ic_chevron_right_black_24dp'><use xlink:href='#ic_chevron_right_black_24dp'/></svg>
<style>
.ic_chevron_right_black_24dp{
height:48px;
width:48px;
fill:#333333;
}
</style>

ic_close_black_24dp

<svg class='ic_close_black_24dp'><use xlink:href='#ic_close_black_24dp'/></svg>
<style>
.ic_close_black_24dp{
height:48px;
width:48px;
fill:#333333;
}
</style>

ic_expand_less_black_24dp

<svg class='ic_expand_less_black_24dp'><use xlink:href='#ic_expand_less_black_24dp'/></svg>
<style>
.ic_expand_less_black_24dp{
height:48px;
width:48px;
fill:#333333;
}
</style>

ic_expand_more_black_24dp

<svg class='ic_expand_more_black_24dp'><use xlink:href='#ic_expand_more_black_24dp'/></svg>
<style>
.ic_expand_more_black_24dp{
height:48px;
width:48px;
fill:#333333;
}
</style>

ic_menu_black_24dp

<svg class='ic_menu_black_24dp'><use xlink:href='#ic_menu_black_24dp'/></svg>
<style>
.ic_menu_black_24dp{
height:48px;
width:48px;
fill:#333333;
}
</style>

ic_mode_comment_black_24dp

<svg class='ic_mode_comment_black_24dp'><use xlink:href='#ic_mode_comment_black_24dp'/></svg>
<style>
.ic_mode_comment_black_24dp{
height:48px;
width:48px;
fill:#ff9800;
}
</style>

ic_more_horiz_black_24dp

<svg class='ic_more_horiz_black_24dp'><use xlink:href='#ic_more_horiz_black_24dp'/></svg>
<style>
.ic_more_horiz_black_24dp{
height:48px;
width:48px;
fill:#333333;
}
</style>

ic_more_vert_black_24dp

<svg class='ic_more_vert_black_24dp'><use xlink:href='#ic_more_vert_black_24dp'/></svg>
<style>
.ic_more_vert_black_24dp{
height:48px;
width:48px;
fill:#333333;
}
</style>

ic_person_black_24dp

<svg class='ic_person_black_24dp'><use xlink:href='#ic_person_black_24dp'/></svg>
<style>
.ic_person_black_24dp{
height:48px;
width:48px;
fill:#ff9800;
}
</style>

ic_post_blogger_black_24dp

<svg class='ic_post_blogger_black_24dp'><use xlink:href='#ic_post_blogger_black_24dp'/></svg>
<style>
.ic_post_blogger_black_24dp{
height:48px;
width:48px;
fill:#ff9800;
}
</style>

ic_rss_feed_black_24dp

<svg class='ic_rss_feed_black_24dp'><use xlink:href='#ic_rss_feed_black_24dp'/></svg>
<style>
.ic_rss_feed_black_24dp{
height:48px;
width:48px;
fill:#ff9800;
}
</style>

ic_search_black_24dp

<svg class='ic_search_black_24dp'><use xlink:href='#ic_search_black_24dp'/></svg>
<style>
.ic_search_black_24dp{
height:48px;
width:48px;
fill:#333333;
}
</style>

ic_share_black_24dp

<svg class='ic_share_black_24dp'><use xlink:href='#ic_share_black_24dp'/></svg>
<style>
.ic_share_black_24dp{
height:48px;
width:48px;
fill:#0f9d58;
}
</style>

ic_24_twitter_dark（色を反転する。）

<svg class='ic_24_twitter_dark_color'><use xlink:href='#ic_24_twitter_dark'/></svg>
<style>
.ic_24_twitter_dark_color{
height:48px;
width:48px;
fill:#ffffff;
background:#1d9bf0;
}
</style>

ic_rss_feed_black_24dp（色を反転する。）

<svg class='ic_rss_feed_black_24dp_color'><use xlink:href='#ic_rss_feed_black_24dp'/></svg>
<style>
.ic_rss_feed_black_24dp_color{
height:48px;
width:48px;
fill:#ffffff;
background:#ff9800;
}
</style>

ic_chevron_left_black_24dp（背景の形を変えて色を反転する。）

<svg class='ic_chevron_left_black_24dp_back'><use xlink:href='#ic_chevron_left_black_24dp'/></svg>
<style>
.ic_chevron_left_black_24dp_back{
height:48px;
width:48px;
fill:#ffffff;
background:#1877f2;
border-radius:50%;
}
</style>

ic_check_box_outline_blank_black_24dpとic_close_black_24dp（複数のアイコンを重ねる。）

<svg class='ic_check_box_outline_blank_black_24dp'><use xlink:href='#ic_check_box_outline_blank_black_24dp'/><use xlink:href='#ic_close_black_24dp'/></svg>
<style>
.ic_check_box_outline_blank_black_24dp{
height:48px;
width:48px;
fill:#db4437;
}
</style>

ic_mode_comment_black_24dpとic_more_horiz_black_24dp（複数のアイコンを重ねる。）

<svg class='ic_check_box_black_24dp_plus'><use class='ic_1' xlink:href='#ic_check_box_black_24dp'/><use class='ic_2' xlink:href='#ic_check_box_outline_blank_black_24dp'/></svg>
<style>
.ic_check_box_black_24dp_plus{
height:48px;
width:48px;
background:#0f9d58;
}
.ic_1{
fill:#ffffff;
}
.ic_2{
fill:#333333;
}
</style>

ic_24_twitter_dark（文字と同じ大きさ）

<svg class='ic_24_twitter_dark_size1'><use xlink:href='#ic_24_twitter_dark'/></svg>
<style>
.ic_24_twitter_dark_size1{
height:1em;
width:1em;
fill:#1da1f2;
}
</style>

ic_24_twitter_dark（文字の2倍の大きさ）

<svg class='ic_24_twitter_dark_size2'><use xlink:href='#ic_24_twitter_dark'/></svg>
<style>
.ic_24_twitter_dark_size2{
height:2em;
width:2em;
fill:#1da1f2;
}
</style>

ic_24_twitter_dark（文字の10倍の大きさ）

<svg class='ic_24_twitter_dark_size10'><use xlink:href='#ic_24_twitter_dark'/></svg>
<style>
.ic_24_twitter_dark_size10{
height:10em;
width:10em;
fill:#1da1f2;
}
</style>

ic_24_twitter_dark（マウスが上に来ると、大きくなる。）

<svg class='ic_24_twitter_dark_big'><use xlink:href='#ic_24_twitter_dark'/></svg>
<style>
.ic_24_twitter_dark_big{
cursor:pointer;
height:48px;
width:48px;
fill:#1da1f2;
}
.ic_24_twitter_dark_big:hover{
height:60px;
width:60px;
}
</style>

ic_24_googlePlus_dark（マウスが上に来ると、色が反転する。）

<svg class='ic_24_googlePlus_dark2'><use xlink:href='#ic_24_googlePlus_dark'/></svg>
<style>
.ic_24_googlePlus_dark2{
height:48px;
width:48px;
fill:#dd5144;
background:#ffffff;
}
.ic_24_googlePlus_dark2:hover{
fill:#ffffff;
background:#dd5144;
}
</style>

ic_search_black_24dp（マウスが上に来ると、色が変わる。）

<svg class='ic_search_black_24dp2'><use xlink:href='#ic_search_black_24dp'/></svg>
<style>
.ic_search_black_24dp2{
cursor:pointer;
height:48px;
width:48px;
fill:#0000ff;
}
.ic_search_black_24dp2:hover{
fill:#ff0000;
}
</style>

ic_search_black_24dp（マウスが上に来ると、背景色が変わる。Bloggerの公式テンプレートと同じ方式。marginとpaddingで背景の大きさが変わります。）

<svg class='ic_emporio'><use xlink:href='#ic_search_black_24dp'/></svg>
<style>
.ic_emporio{
cursor:pointer;
height:48px;
width:48px;
fill:#666666;
margin:-3px;
padding:3px;
}
.ic_emporio:hover{
background-color:rgba(153,153,153,.4);
border-radius:50%;
}
</style>

ic_search_black_24dp（アイコンを回転させる。）

<svg class='ic_search_black_24dp_anime'><use xlink:href='#ic_search_black_24dp'/></svg>
<style>
.ic_search_black_24dp_anime{
height:48px;
width:48px;
fill:#666666;
animation:rotate-anime 3s linear infinite;
}
@keyframes rotate-anime {
0%{transform:rotate(0);}
100%{transform:rotate(360deg);}
}
</style>

ic_search_black_24dp（ボタンのアイコンとして使う）

<button><svg class='ic_search_black_24dp_button'><use xlink:href='#ic_search_black_24dp'/></svg></button>
<style>
.ic_search_black_24dp_button{
height:24px;
width:24px;
fill:#666666;
}
</style>

この記事のタイトルとURLをコピーする blogger

blogger