自作アイコンをSVGでの表示方法

自作アイコンをSVGでの表示方法

  • 2018-02-13  最終更新日:2018-02-13

そもそもSVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)で、拡大縮小、変形してもキレイなままでぼやけず荒れないXMLベースの画像のことです。Web上でSVGを使って表現することが出来ます。イラストレータのデータも同じベクターデータです。

最近はアイコンフォントよりもSVG化が主流になりつつあります。アイコンフォントは、元々はテキスト表示を改造してアイコンを表現していた物でしたが最近は直接アイコンを描画するSVG化に流れが向いています。

有名なアイコンフォントFont Awesomeもバージョンが5になってJSを使って描画していますがSVG推奨となっています。もちろん以前のアイコンフォントとしても使えます。

さて今回はオリジナルのアイコンを作ってSVGで表示させてみたいと思います。HTML版とWordPress版の2つのバージョンでお届け致します。


スポンサーリンク


準備編

まずSVGを用意します。イラストレータでアイコンを作ります。オブジェクトは単色でひとつが好ましいですがオブジェクトが複数あるとちょっと後の設定が面倒になるので出来るだけシンプルな作りにしておきましょう。

色は黒にして葉っぱのアイコンを作りました。

アイコン

これをSVGにして保存します。Mac用ですがイラストレータのファイルから別名で保存を選びます。

アイコン

保存を押すとSVGの設定画面が出ますがSVGプロファイルがSVG1.1になっていることを確認してそのまま保存にします。

アイコン

このファイルを以下のサイトで取り込みます。

サイトに入るとIcoMoon Appという右上に紫のアイコンをクリックします。そして次の画面にて左上に同じく紫色のImport Iconsというボタンを押してインポートをします。

アイコン

インポートされるとこのような表示になりました。ジェネレーターするアイコンをクリックしてハイライト表示になったら一番下のGenerate SVG & Moreをクリックします。

アイコン

ダウンロードして準備は完了です。解凍するといろいろなフォルダやファイルがありますが使うのはsymbol-defs.svgだけです。

⇒SVGサンプルダウンロード

HTML編

HTMLファイルのテンプレートを用意します。<body>直下もしくは</body>の直前にsymbol-defs.svgをテキストファイルで開いてコピーペーストします。

アイコン

こんな感じになりますね。

アイコン

H1にテキストを入れて以下のコードを記入します。

use要素はSVGドキュメントの中からノード取り出して、別の場所に複製する方法

<svg class="icon icon-leaf">
	<use xlink:href="#icon-leaf"/>
</svg>

SVGを直接記入する方法
<svg class="icon icon-leaf" viewBox="0 0 32 32">
 	<path d="M16.344 0.632c-0.169 0-0.327-0.011-0.497-0.011-8.443 0-15.283 0-15.283 0v15.295c0 1.987 0.384 3.894 1.072 5.632 2.122 5.35 7.168 9.211 13.161 9.617 0.35 0.023 0.7 0.034 1.050 0.034 8.443 0 15.283 0 15.283 0v-15.283c0-8.285-6.569-15.024-14.787-15.283zM29.844 30.916l-9.402-9.538-5 4.933-0.824-0.835 5-4.933-4.763-4.82-4.899 4.842-0.824-0.835 4.899-4.842-4.752-4.831-4.808 4.741-0.824-0.835 4.808-4.741-6.614-6.705 0.835-0.824 6.614 6.705 5.045-4.978 0.824 0.835-5.045 4.978 4.763 4.82 4.944-4.876 0.824 0.835-4.944 4.876 4.763 4.82 4.854-4.786 0.824 0.835-4.854 4.786 9.402 9.538-0.847 0.835z"></path>
</svg>

これでページを開くとアイコンが表示されますね。色とか大きさも変えたいですね。

head要素内にスタイルをつけます。cssでの色はbackground-colorではなくfillプロパティを使います。

<style>
.icon {
	display: inline-block;
	fill: currentColor;
	height: 1em;
	position: relative;
	top: -0.0625em;
	vertical-align: middle;
	width: 1em;
}
.icon-leaf{
	height: 5em;
	width: 5em;
	fill:#aadc8f;
}
</style>

アイコン

うまくキレイに表示されていますね。

WordPress編

ワードプレスの場合は読み込ませるだけで良いので楽です。functions.phpに以下のコードを記載すれば完了です。 変えるところと言えばsymbol-defs.svgの保存先のパスをSVGスプライトファイルを定義のところに入れてやることです。

functions.php

// svgファイルを読み込む関数
<?php

function include_svg_icons() {
	// SVGスプライトファイルを定義、各パスに変更
	$svg_icons = get_parent_theme_file_path( '/path/to/symbol-defs.svg' );

	//存在する場合は、それを要求する
	if ( file_exists( $svg_icons ) ) {
		require_once( $svg_icons );
	}
}
add_action( 'wp_footer', 'include_svg_icons', 9999 );
}

// SVGを表示させる関数
function get_svg( $args = array() ) {
	// $argsが配列であることを確認する
	if ( empty( $args ) ) {
		return  'デフォルトのパラメータを配列の形で定義してください';
	}

	// アイコンを定義します
	if ( false === array_key_exists( 'icon', $args ) ) {
		return 'SVGアイコンのファイル名を定義してください';
	}

	// Set defaults.
	$defaults = array(
		'icon'        => '',
		'title'       => '',
		'desc'        => '',
		'fallback'    => false,
	);

	// $argsを解析します
	$args = wp_parse_args( $args, $defaults );

	// ariaを隠しておく
	$aria_hidden = ' aria-hidden="true"';

	// Set ARIA.
	$aria_labelledby = '';

	if ( $args['title'] ) {
		$aria_hidden     = '';
		$unique_id       = uniqid();
		$aria_labelledby = ' aria-labelledby="title-' . $unique_id . '"';

		if ( $args['desc'] ) {
			$aria_labelledby = ' aria-labelledby="title-' . $unique_id . ' desc-' . $unique_id . '"';
		}
	}

	// SVGマークアップを開始します
	$svg = '<svg class="icon icon-' . esc_attr( $args['icon'] ) . '"' . $aria_hidden . $aria_labelledby . ' role="img">';

	// タイトル表示
	if ( $args['title'] ) {
		$svg .= '<title id="title-' . $unique_id . '">' . esc_html( $args['title'] ) . '</title>';

		// Display the desc only if the title is already set.
		if ( $args['desc'] ) {
			$svg .= '<desc id="desc-' . $unique_id . '">' . esc_html( $args['desc'] ) . '</desc>';
		}
	}

	// アイコンを表示します
	$svg .= ' <use href="#icon-' . esc_html( $args['icon'] ) . '" xlink:href="#icon-' . esc_html( $args['icon'] ) . '"></use> ';

	// SVGをサポートしていないブラウザのフォールバックとして使用するマークアップを追加する
	if ( $args['fallback'] ) {
		$svg .= '<span class="svg-fallback icon-' . esc_attr( $args['icon'] ) . '"></span>';
	}

	$svg .= '</svg>';

	return $svg;
}
;?>

PHPのテンプレートファイルなどに簡単に使い回すことが出来ます。

<?php echo get_svg( array( 'icon' => 'leaf' ) );?>

上記のように記載すれば表示されます。もちろん普通に記載しても表示されます。

<svg class="icon icon-leaf">
	<use xlink:href="#icon-leaf"/>
</svg>

ワードプレスのエディターのテキストモードで記載する際には改行が入らないように記載しないと表示されないので注意が必要です。

参考になれば幸いです。


∞Tadashi Suyama∞

icon svg font js
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
bootstrap4でのtable-responsiveをレスポンシブにする

最近はCSSフレームワークはBootstrap3からBootstrap4をメインにして作業しております。かなり使いやすいです。ほぼこのフレームワークだけで完結できる仕様になってきました。 さて...

16 Jun 2018

アイキャッチ
CSSでの画像ホバー効果ライブラリのご紹介

今回は純粋なCSS画像ホバー効果ライブラリをご紹介します。画像をマウスオーバーするとテキストが表示されるCSSライブラリになります。実装も簡単でクラス指定をすることで40種類以上の効果を体験でき...

10 Jun 2018

アイキャッチ
ワードプレスで特定のページにnoindex,nofollow

ワードプレスに特定のページにmeta name="robots" content="noindex,nofollow"をつける場合はプラグインを利用するかヘッダーに条件分岐でいれるかだと思います...

03 Jun 2018

アイキャッチ
Vagrantのアンインストール方法-Mac版

さて今回は簡単にご紹介、そもそもそんなにvagrantをアンインストールしないのですがそういう機会があったので覚書で記載しておきます。 Mac版のvagrantってアンインストールってなぜか手...

26 May 2018

アイキャッチ
超絶・超速のnode-sassでsassコンパイルのすすめ

さて今回はsassを取り上げてみます。sassといったらcompassが出てくるほど有名ですが、すでに開発終了してから4年以上たっているわけでしてしかもコンパイラとしての機能しか使っておらず、他...

12 May 2018

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

icon svg font js
フッターイメージ