Bloggerで利用可能なSVGアイコンのインラインSVGによるマークアップ

Bloggerの2017年の新テーマから導入されているメニューや検索や共有などのSVGアイコンは全てのBloggerブログに追加されたSVGファイルから取得されている。

ブログアドレス/responsive/sprite_v1_6.css.svg

Bloggerの無料版の「blogspot.com」のサブドメインからでもカスタムドメインの有料版の独自ドメインからでもトップページのアドレスの末尾に「responsive/sprite_v1_6.css.svg」を付けるとSVGアイコンが用意されている。データだけなので、アクセスしても何も表示されないけれどもソースコードを調べたり、ダウンロードしてファイルを開けばSVGアイコンのデータが分かる。色んなものが含まれていて何れも公式のものとして全てのBloggerブログで利用できる。ブログで使用中の閉じるのBloggerのSVGアイコン

ブログでどのように表示するかは二つの方法があってBloggerの独自タグでマークアップを呼び出すか通常のインラインSVGで記述する。どちらも使う場合はHTMLのマークアップ（テンプレートならばHTML編集、ウィジェットならばHTML / JavaScript、投稿ならばHTMLビューなど）で行う。独自タグはテンプレートのxmlファイルでしか動作しないけれども通常のインラインSVGはテンプレートのxmlファイルでもその他でも大丈夫だ。本稿ではインラインSVGでブログに表示するマークアップの仕方について取り上げる。

関連ページ

Bloggerで利用可能なSVGアイコンの独自タグによるマークアップ

BloggerのSVGアイコンは外部のsvgファイルにid付きで用意されているので、インラインSVGではページ内のデータだけではなく、ページ外のものもURLを参照して扱える。

どんなSVGアイコンが用意されているか
アイコンの種類：アイコンIDとアイコンデータ
インラインSVGでアイコンを表示する
インラインSVG①外部ファイルを呼び出す
インラインSVG②内部データを呼び出す
インラインSVG③アイコンデータで描画
インラインSVGのマークアップの補足
SVGアイコンのデザインの変更について
色と大きさのCSSのサンプル

どんなSVGアイコンが用意されているか二十六種類がBloggerブログの「responsive/sprite_v1_6.css.svg」のアイコンファイルに用意されていて利用することができる。アイコンの種類：アイコンIDとアイコンデータSVGアイコンのインラインSVGのマークアップではアイコンを表示するためにアイコンIDとアイコンデータのどちらか一つか両方が必要になる。

Bloggerの公式のSVGアイコン

アイコンの種類アイコン: アイコン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 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/><path d="M0 0h24v24H0z" fill="none"/>
フェイスブック: ic_24_facebook_dark; <g transform="translate(-312 -104)"><g transform="translate(312 104)"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 2v3h-2c-.5 0-1 .4-1 1v2h3v3h-3v7h-3v-7h-2v-3h2V7.5C13 5.6 14.6 4 16.5 4H19z"/></g></g>
グーグルプラス: ic_24_googlePlus_dark; <g transform="translate(-344 -136)"><g transform="translate(344 136)"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M22.5 11h-2V9H19v2h-2v1.5h2v2h1.5v-2h2V11z"/><path fill="none" d="M1.5 5h14v14h-14V5z"/><path d="M8.5 10.7v2.7h3.8c-.3 1.6-1.7 2.8-3.8 2.8-2.3 0-4.2-1.9-4.2-4.2s1.9-4.2 4.2-4.2c1 0 2 .4 2.7 1.1l2-2C12 5.7 10.4 5 8.5 5c-3.9 0-7 3.1-7 7s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-1-.1-1.4H8.5v-.1z"/></g></g>
リンク: ic_24_link_dark; <path d="M0 0h24v24H0z" fill="none"/><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>
ピンタレスト: ic_24_pinterest_dark; <g transform="translate(-312 -136)"><g transform="translate(312 136)"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 14.2c-.8 0-1.6-.3-2.1-.9l-.9 3.2-.1.2c-.2.3-.5.5-.9.5-.6 0-1.1-.5-1.1-1.1V17.8l1.8-5.6c-9.6-12.2-.2-.6-.2-1.5 0-1.7.9-2.2 1.7-2.2s1.4.3 1.4 1.3c0 1.3-.9 2-.9 3 0 .7.6 1.3 1.3 1.3 2.3 0 3.2-1.8 3.2-3.4 0-2.2-1.9-3.9-4.2-3.9s-4.2 1.8-4.2 3.9c0 .7.2 1.3.5 1.9.1.2.1.3.1.5 0 .6-.4 1-1 1-.4 0-.7-.2-.9-.5-.5-.9-.8-1.9-.8-3 0-3.3 2.8-5.9 6.2-5.9s6.2 2.7 6.2 5.9c.1 2.8-1.5 5.6-5.1 5.6z"/></g></g>
ツイッター: ic_24_twitter_dark; <g transform="translate(-344 -104)"><g transform="translate(344 104)"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2.3 7.3c-.1 4.6-3 7.8-7.4 8-1.8.1-3.1-.5-4.3-1.2 1.3.2 3-.3 3.9-1.1-1.3-.1-2.1-.8-2.5-1.9.4.1.8.1 1.1 0-1.2-.4-2-1.1-2.1-2.7.3.2.7.3 1.1.3-.9-.5-1.6-2.3-.8-3.6C8 8.5 9.6 9.7 12.2 9.9c-.6-2.8 3.1-4.3 4.6-2.4.7-.1 1.2-.4 1.7-.7-.2.7-.6 1.1-1.1 1.5.5-.1 1-.2 1.4-.4 0 .5-.6 1-1.1 1.4z"/></g></g>
追加ボックス: ic_add_box_black_24dp; <path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/><path d="M0 0h24v24H0z" fill="none"/>
戻り矢印: ic_arrow_back_black_24dp; <path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
進み矢印: ic_arrow_forward_black_24dp; <path d="M0 0h24v24H0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
チャット吹き出し: ic_chat_bubble_black_24dp; <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/><path d="M0 0h24v24H0z" fill="none"/>
チェックボックス: ic_check_box_black_24dp; <path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
チェックボックスの外形: ic_check_box_outline_blank_black_24dp; <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><path d="M0 0h24v24H0z" fill="none"/>
左山形紋: ic_chevron_left_black_24dp; <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/><path d="M0 0h24v24H0z" fill="none"/>
右山形紋: ic_chevron_right_black_24dp; <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/>
閉じる: ic_close_black_24dp; <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/>
簡略へ縮める: ic_expand_less_black_24dp; <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/><path d="M0 0h24v24H0z" fill="none"/>
詳細へ伸ばす: ic_expand_more_black_24dp; <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/><path d="M0 0h24v24H0z" fill="none"/>
メニュー: ic_menu_black_24dp; <path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
コメント状態: ic_mode_comment_black_24dp; <path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"/><path d="M0 0h24v24H0z" fill="none"/>
水平の詳細: ic_more_horiz_black_24dp; <path d="M0 0h24v24H0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
垂直の詳細: ic_more_vert_black_24dp; <path d="M0 0h24v24H0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
人物: ic_person_black_24dp; <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/><path d="M0 0h24v24H0z" fill="none"/>
Blogger投稿: ic_post_blogger_black_24dp; <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 20c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4 7v1c0 .55.45 1 1 1s1 .45 1 1v3c0 1.66-1.34 3-3 3H9c-1.66 0-3-1.34-3-3V8c0-1.66 1.34-3 3-3h4c1.66 0 3 1.34 3 3v1zm-6.05 1h2.6c.55 0 1-.45 1-1s-.45-1-1-1h-2.6c-.55 0-1 .45-1 1s.45 1 1 1zM14 13H9.95c-.55 0-1 .45-1 1s.45 1 1 1H14c.55 0 1-.45 1-1s-.45-1-1-1z"/><path d="M0 0h24v24H0z" fill="none"/>
RSSフィード: ic_rss_feed_black_24dp; <path fill="none" d="M0 0h24v24H0z"/><circle cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/>
検索: 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"/>
共有: ic_share_black_24dp; <path d="M0 0h24v24H0z" fill="none"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>

インラインSVGでアイコンを表示するHTMLのsvgタグとuseタグを使ってブログにSVGアイコンを表示する。インラインSVG①外部ファイルを呼び出すuseタグのhref属性のアドレスに外部ファイルのURLを入力する。HTML<svg class="svg-icon-24"> <use href="/responsive/sprite_v1_6.css.svg#アイコンID" xmlns:xlink="http://www.w3.org/1999/xlink"/> </svg>※svgタグの「class="svg-icon-24"」は任意。Bloggerブログの外部ファイルからデータを呼び出してSVGアイコンを表示するマークアップだ。useタグのhref属性に使用するアドレスは必ずBloggerで決められたものでなくてはならない。変更すると外部ファイルのアイコンデータを参照できず、SVGアイコンは表示されない。外部ファイルから呼び出すインラインSVGら最も簡単にSVGアイコンを表示する方法で、非常に使い易い。インラインSVG②内部データを呼び出すuseタグのhref属性のアドレスに内部データのアイコンIDを入力する。表示用のHTML<svg class="svg-icon-24" xmlns="http://www.w3.org/2000/svg"> <use href="#アイコンID" xmlns:xlink="http://www.w3.org/1999/xlink"/> </svg>格納用のHTML<svg class="hidden" xmlns="http://www.w3.org/2000/svg"> <symbol id="アイコンID" viewBox="0 0 24 24"> アイコンデータ </symbol> </svg>CSS.hidden {display:none}※svgタグの「class="svg-icon-24"」と「class="hidden"」とCSSのマークアップは任意。Bloggerブログの内部データを呼び出してSVGアイコンを表示するマークアップだ。SVGアイコンを使いたいところに表示用のHTMLを記載してもう一つテンプレートのbody内のどこかにアイコンデータの格納用のHTMLを記載してアイコンIDで呼び出せるようにする。アイコンデータがブログに含まれることになるので、使用するアイコンIDは表示用と格納用のHTMLで一致していればアイコンの表示に支障はなく、Bloggerで決められたものでなくても構わない。格納用のHTMLはアイコンデータがあるだけで、アイコンが表示されるわけではないけれどもマークアップの分だけ隙間ができてしまう。消すためにはsvgタグにCSSの「display:none」などを記載して指定する必要があり、サンプルでは指定先として「hidden」というclass属性もsvgタグに追加している。Bloggerの2017年の公式テーマでは同じCSSが記載されているから何かのタグに「hidden」というclass属性を付けるだけで、消すことができたり、テンプレートによってCSSのマークアップは省略できる場合もある。内部データから呼び出すインラインSVGはマークアップが増えるけれどもサーバーを介さず、処理にも優れるから多くのSVGアイコンを表示するのには本当に適している。インラインSVG③アイコンデータで描画描画用のタグが含まれるアイコンデータをそのままで使用する。HTML<svg class="svg-icon-24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> アイコンデータ </svg>※svgタグの「class="svg-icon-24"」は任意。Bloggerブログのアイコンデータで描画してSVGアイコンを表示するマークアップだ。実際にアイコン表示する位置にどんな内容かのデータを置くからインラインSVGとしては最も分かり易くて基本的なマークアップといえる。同じものを繰り返して使う場合は他のところに記載したアイコンデータを呼び出す方がブログ全体のソースコードを簡略化させられるけど、そうでなければアイコンデータで描画するマークアップでも十分だろう。インラインSVGの表示速度などのパフォーマンスは画像が一つの場合でも内部データから呼び出す方がデータで描画するよりも良いらしいけれどもアイコンのように非常に小さな画像では実用上の大きな差が付くものではない。インラインSVGのマークアップの補足三つのインラインSVGのどれでもアイコンを表示するHTMLのsvgタグにwidth属性で横幅、height属性で縦幅を指定してアイコンの大きさを変えられる。HTML<svg width="36" height="36" xmlns="http://www.w3.org/2000/svg"> <use href="/responsive/sprite_v1_6.css.svg#ic_check_box_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"/> </svg>大きさの単位はpxか%で、単位を省略するとpxとして扱われる。svgタグの「xmlns='http://www.w3.org/2000/svg'」やuseタグの「xmlns:xlink='http://www.w3.org/1999/xlink'」は大抵のブラウザがあるものと判断して適切に処理する状況だから省略してもアイコンの表示に支障はない。Bloggerの2017年の公式テーマではSVGアイコンを表示するsvgタグに「svg-icon-24」というclass属性が付いていて色や大きさなどのデザインを指定するために使われている。svgタグに「svg-icon-24」などのclass属性を追加すればデザインのCSSやプログラムのJavaScriptの指定先として使える。

コメント