メニュー

WP版キャラチョコブック

Chocobanditz ONLINE

ページトップ

ページボトム

メニュー

Chocobanditz ONLINE

閉じる

DESIGN JavaScript TIPS Webデザイン

SVG Morpheusカスタマイズ後編-オリジナルのSVGアイコンに差し替える方法

投稿日:2015年7月4日 更新日:

SVG Morpheusカスタマイズ後編-オリジナルのSVGアイコンに差し替える方法
SVG Morpheusは、複数のSVGアイコン間でモーフィングを生成するJavaScriptライブラリです。

SVG Morpheusカスタマイズでは、
SVG Morpheusのdemoデータを編集してオリジナルのSVGアイコンに差し替える方法を記します。

SVG Morpheusカスタマイズ前編では
SVG Morpheusのスクリプトをダウンロードして、demoデータを確認しました。

後編では
demosフォルダの中身を編集してオリジナルのSVGアイコンに差し替える手順を記します。

スポンサーリンク

オリジナルのSVGアイコンに差し替える手順

目次

  1. 手順1 iconset.svgの編集
  2. 手順2 inline.htmlの編集
  3. 手順3 demo.jsの編集
  4. inline.htmlの動作確認
  5. 応用例
  6. まとめ

手順1 iconset.svgの編集

ここではiconset.svgの編集に、Inkscapeを使用します。
※説明画像はInkscape 0.48.2を使用

Inkscape(インクスケープ)はオープンソースで開発されているベクターグラフィックエディターです。

Illustratorとかに比べると扱えるファイル形式が少なかったりしますが、軽くて慣れると使い易いですよ。

Inkscapeは下記サイトからダウンロードできます。
https://inkscape.org/ja/

Inkscapeでiconset.svgを開いてみます。
最初は何も表示されていません。(゚Д゚)

img06

[編集]→[XMLエディタ]を選択して、XMLエディタを開き

img07

[svg:g=”3d_rotation”]→[style display:none]を選択して、
display:noneをdisplay:blockに書き換えて、[Ctr+Enter]で変更を反映すると

img08

3D Rotationアイコンが表示されます。

img09

display:noneが表示しない
display:blockが表示する
です。

次に差し替え用のSVGアイコンを用意しましょう。例えばThemify IconsのようなフリーのSVGアイコン素材を使ってもよいし、InkscapeでオリジナルのSVGアイコンを作ってみるのもありですネ。

今回は説明のために、単純なマルとシカクのアイコンを使用します。

img10

rootレイヤーに図形作成してXMLエディタを確認してみると

img11

配置したアイコンのデータが追加されています。

※フリーのSVGアイコン素材などを使う場合は、Inkscapeで開いてコピペで配置してください。

さて、
iconset.svgには、3d_rotation~receiptの計33個のアイコンデータが収納されていますが、今回は、上二つ3d_rotationとaccessibilityをマルとシカクのアイコンに差し替えてみましょう。

先にマルのアイコンを任意の位置に配置した後に

img12

XMLエディタに追加したマルのアイコンデータを選択&ドラッグして、svg:g=”3d_rotation”の中に移動します。

img13

次に、もとの3d_rotationアイコンデータは不要なので、選択&ノードの削除ボタン押下で削除します。

img14

同じ要領でシカクのアイコンの位置も調整した後、シカクのアイコンデータをsvg:g=”accessibility”の中に移動し、不要なデータを削除します。

img15

最後に、id名を任意の名前に変更して保存します。

img16

ふぅ、これでiconset.svgの編集は完了です。
編集済みのサンプルiconset.svgは↓からどうぞ

手順2 inline.htmlの編集

Inkscapeを閉じ、inline.htmlをエディタやメモ帳で開きます。

<g id="3d_rotation" style="display:none">~</g>

の部分が3D Rotationアイコンのデータ

<g id="accessibility" style="display:none">~</g>

の部分がAccessibilityアイコンのデータです。

img17

こいつを、マルとシカクのアイコンのデータに置き換えます。

マルとシカクのアイコンのデータはどこにあるかというと・・・
手順1で保存したiconset.svgをエディタやメモ帳で開いてみてください。

手順1で編集したマルとシカクのアイコンのデータが記述されています。

img18

Inkscapeで編集したデータにはInkscape固有の情報も記述されているので、必要なパスデータのみをコピーします。

img19

これをinline.html内の

<g id="3d_rotation" style="display:none">~</g>
<g id="accessibility" style="display:none">~</g>

の対応する箇所にそれぞれペーストして置き換え、id名も手順1で名付けた名前に変更して保存します。

img20

はい、これでinline.htmlの編集は完了です。

手順3 demo.jsの編集

demo.jsをエディタやメモ帳で開き、”3d_rotation”と”accessibility”のid名部分を手順1で名付けた名前に変更して編集完了です。

img21

inline.htmlの動作確認

inline.htmlをブラウザで開いて動作確認してみましょう。
注※古いバージョンのブラウザだと未対応で動かない場合があります(ie9以前など)

応用例

マルとシカクのアイコン部分をオリジナルのSVGアイコンで作ったDEMOです。

これを応用してローディング画面をつくってみました。

まとめ

SVG Morpheusを紹介したサイトはあるのだけど、SVG Morpheusの使い方を解説してある日本語サイトが見当たらなかったので、自己流でアレンジしてみました。

SVG Morpheusはアイデア次第で面白いことできそうなので、興味あるかたは触ってみてください(*゚ー゚*)

以上

この記事では、
SVG Morpheusのdemoデータを編集してオリジナルのSVGアイコンに差し替える方法をご紹介しました。

スポンサーリンク

-DESIGN, JavaScript, TIPS, Webデザイン

執筆者:


comment

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

MadiaMarkerメディアマーカー

Maerchen_Diverグッズ