自作アイコンを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になっていることを確認してそのまま保存にします。

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

Icon Font & SVG Icon Sets ❍ IcoMoon

サイトに入ると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>

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

参考になれば幸いです。

SVGエッセンシャルズ第2版

posted with ヨメレバ

J. David Eisenberg,Amelia Bellamy-Royds オライリージャパン 2017-05-17

Amazon

楽天ブックス

∞Tadashi Suyama∞

icon svg font js