Blog

jQueryを使った外部SVGファイルの読み込み

2015.03.10Cat:html5 jQuery SVG デザイナー

HTML5ではSVGをHTML内の要素として書き込むことができますが、

サイトの運用の都合などで、外部ファイルとして存在するSVGを読み込んで操作したい場合も多くあると思います。

外部SVGファイルの読み込み方法はいろいろありますが、jQueryのload()を使うと、簡単に読み込むことができます。

 

↓こちらがその方法で読み込んでみたもの

DEMO

 

方法

方法はとても簡単です。

HTML

まず HTMLのhead内でjQueryを読み込み、

HTMLのbody内にSVGを配置するdivに適当なIDを設定して配置します。

 

jQuery

 

次にjQueryで「$(“[SVGを読み込む要素]”).load(“SVGファイルのパス svg”)」を実行すれば読み込み完了です。

さらに読み込んだSVGを操作する場合は、「$(“[SVGを読み込む要素]”).load(“SVGファイルのパス svg”, function(){ … 操作するプログラム … })」

という風にload()でコールバック関数をつけると、操作が可能になります。

 

SVGでは色の変更など、通常の画像ではできないことができ、

Webフォントを使った方法より運用がしやすいというメリットもあるので、

どんどん活用していきたいです。

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ