WEB制作

超簡単!オリジナルのSVGアイコンの作り方

投稿日:

SVGファイルから簡単にアイコンフォントが作れるサービス、「IconMoon」は超有名ですね。

時々使っているのですが、書き出しから実装まで、いざとなると「あれ?どうだっけ。。。」って忘れてしまうことが多いので、手順を簡単にメモしておきます。

まずは、SVGファイルを用意

まずはアイコンデータを用意します。
イラストレータで作って、「別名保存」し、「SVG」ファイルとして保存します。

 

 

SVGファイルをインポートする

IconMoonにログインし、右上の「IconMoon App」をクリックします。
すると、下のような画面になります。

(1)のボタンをクリックして、先ほど制作したSVGファイルをインポートします。
(2)インポートしたアイコンを選択。
(3)「Generate SVG & More」をクリック

 

「font」と「SVG」のどちらを使うのか

アイコンフォントは、CSSで変更ができるテキストファイル。
フォントなので、サイズを大きくしても品質が低下することなく、滑らかなラインで表示することができます。
しかし、正しく表示するためには、ブラウザがサーバーに余計な要求を行う必要があり、その間はテキストが表示されなかったり、ブラウザがフォントを解釈できない場合は空の文字が表示されてしまうといったアクシデントが起こります。
そこで、最近ではアクシデントのない「SVG」が新しい標準となりつつあります。

(4)左下のタブ「SGV」をダウンロードします。

 

サイトへの実装

ダウンロードしたファイルを解凍します。

生成されたフォルダーの中の「symbol-defs.svg」と「svgxuse.js」というファイルを使うので、サイト内に移動しておきます。

PHPの場合、単純に 「symbol-defs.svg」ファイルをinclude_once で読みこめばOK。記述場所は <body> 直下です。ここで読み込まないとChromeでエラーがでるのだとか。

 

HTMLの場合は <body> 直下に「symbol-defs.svg」に記述されているコードをコピペします。

 

コードが乱れるのが嫌な場合は、SVGスプライトファイルから使用するアイコンを呼び出すようにします。SVGスプライトといのは、SVGの長いコードをひとつにまとめたファイル。使用するアイコンデータをその都度呼び出します。IconMoonで生成される「symbol-defs.svg」がそれにあたります。

ブラウザ上で「Get Code」をクリックすると、HTMLに記入するべきサンプルコードを取得できます。一番上の「HTML(SVG<use>)」をコピーして貼り付けます。

 

SVGを呼び出す

アイコンを表示したい箇所に以下のコードを記述します。use タグでは「#icon-アートワーク名」を記述。IcoMoonでSVGスプライトファイルを生成した際に自動で「icon-」が付与されたわけです。必要であればsvgタグにクラスを付けて、CSSで装飾できるようにしましょう。

HTMLに貼り付けるとき、SVGスプライトファイルまでのパスを追加しておくこと!
また、表示確認するときは、サーバーにアップした状態で確認しないとうまく表示されません。ローカルでブラウザでプレビューしても表示されないことがありますでご注意。
私はここで躓きました。。。(涙)

 

CSSで装飾

あとはお好みに装飾するだけ。塗りつぶすときは colorbackground-color ではなく、fill を使います。

 

 





-WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

リストマークと字下げインデントのまとめ

画像なしで表現するリストマークのサンプルいろいろ 行頭記号やリストマークなどの装飾を、画像なしで実現する方法を紹介しています。 リストアップの条件は、 先頭に何かしら装飾をつける 2行目以降の先頭を1 …

サイトの文章や画像を簡単にコピーできないようにするには?

  Devanath / Pixabay 作ったサイトの文章や画像を簡単にコピーできないようにする方法です。 画像の保存を完全に防ぐことはできません。 でも、コピーにひと手間かかることが抑止 …

no image

HTML特殊文字—ちょっと使いたい時に

 よく使う記号、使われる記号、いざという時の… < &lt; &#60; > &gt; &#62; 左の二つは、HTMLなどのマークアップ言語で …

HTML共通部分を部品化して読み込ませる方法

今回はHTMLでサイトを作って欲しいとの要望。 ナビやヘッダー、フッター部分は全ページ共通なので、修正や後々のメンテナンスも考えて、それらを部品化して1箇所で管理したい。 HTMLには、他のページを読 …

『IcoMoon』のWeb-FontをWebページに実装する方法

オリジナルのアイコンフォントを簡単につくれる『IcoMoon』。 自作のSVGアイコンづくりで活用していたけど、 Web-fontも使えるので実装の方法を確認しておく。 『IcoMoon』へアクセスし …