WEB制作、マーケティングに関する情報をお届けします。ホームページ制作会社、テラのブログ

svgデータを外部にまとめてajaxで読み込む方法

svg画像をライブラリでまとめてajaxで読み込み

svgファイルを外部htmlにライブラリの様な感じで集めてidで呼び出す方法です。
日頃からよく使うsvgファイルのテキストデータをhtmlにまとめておいてajaxでsvgのシンボルidを指定して読み込む方法でメンテナンス性も抜群です。

1.読み込み先のsvg.htmlを作成

svg.htmlの書き方についてです。




ここにコードを貼付け



symbol idの部分が任意の名前で、例えばショッピングカートのアイコンだったらID名はshopping-cartでロゴであればlogoなどで良いです。
viewBoxは座標やサイズを指定出来ます。
<symbol>〜</symbol>の間にコードを貼付けます。
実際にやってみます。まず、svgファイルをテキストで開いて各コードを抽出します。

svgのテキスト取得

上記の箇所をコピペしてID名を付けます。








あとはimgフォルダなどにhtmlで名前をつけて保存したらオッケーです。
今回はimgフォルダにsvg.htmlと名前を付けて保存しました。

<symbol> を増やしていけばたくさんのファイルを登録出来ます。
例えば下記のように。











2.読み込み元のhtmlの書き方

まず、htmlのどこかに下記を記入します。

次に画像を配置したい場所に下記を記入してhrefに呼び出したい画像のIDを指定します。


    

これでsymbol ID名との紐付けが出来ます。
最後にスクリプトを記入してajaxで読み込みさせます。


urlの部分はsvgファイルのある場所を指定してください。

コレで完了です。
※ローカル環境で静的ファイルのchromeやsafariではajaxが動作しないのでアップロードしてサーバーで見るかfirefox等を使って動作を確認しましょう。

テラ合同会社(東京都)

テラは2014年に東京都でスタートアップしたホームページ制作会社です。ホームページ制作以外にも広告運用、マーケティング、ブランディング、印刷物など幅広い領域をサポートしています。
コーポレートサイトはこちらをご覧ください。