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

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

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

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

タグクラウド

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