自作アイコンを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

サイト内検索

最近の投稿

アイキャッチ
正規表現はじめの一歩

今回は正規表現です。たまにしか使わないのですぐに忘れてしまいますのでまとめておきます。 文字列の検索時にある条件にマッチしたものを表示させるものです。 エディターにも検索条件に正規表現という検...

07 Oct 2018

アイキャッチ
ワードプレス記事一括削除する方法

ワードプレスで記事を一括削除する方法が意外と簡単なことに気がつきました。記事を大量に削除する場合はあまりなかったのですが、調べてみたら簡単なことでした。 大量のデータをインポートする時に失敗し...

30 Sep 2018

アイキャッチ
メールはGmailに限る

大分間が空きました。。。さて今回はGmailをご紹介します。最近ではチャット系アプリが主流ですが、それでもやはりメールはなんだかんだで使います。いつも悩まされるのはスパムメールですが、Gmail...

25 Sep 2018

アイキャッチ
大山の大献灯・和傘灯りに行った感想

大山の大献灯・和傘灯りに初めて行って参りました。13日の夜に行ってきましたがこんなイベントをやっていることを知らなかったのでご紹介します。和傘のライトアップで日本の夏の雰囲気が良いですね。 大...

23 Aug 2018

アイキャッチ
出雲神話祭り・花火大会

お盆休み中に出雲の花火大会に行って参りました、今年は8月12日(日)でした、開催日は毎年違いますので確認しておきましょう。だいたいこのあたりだった気がします。8,000発の花火で例年13万人が来...

21 Aug 2018

著者

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

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

タグクラウド

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