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

WEB制作、マーケティングに関する情報をお届けします。

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

2016.08.30

カテゴリ：WEB制作

タグ：

WEB制作に便利な小技

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

インデックス

1.読み込み先のsvg.htmlを作成
2.読み込み元のhtmlの書き方

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

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgicon">
<defs>
<symbol id="付けたいID名" viewBox="座標・サイズを貼付け">
ここにコードを貼付け
</symbol>
</defs>
</svg>

<defs>

ここにコードを貼付け

</symbol>

</defs>

</svg>

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

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgicon">
<defs>
<symbol id="shopping-cart" viewBox="0 0 64 51">
<path fill-rule="evenodd" clip-rule="evenodd" d="M63.211,11.634l0.004,0.002l-8.872,19.715c-0.438,0.972-1.384,1.662-2.499,1.736
	l-25.551,1.704l1.477,4.218h27.821c3.265,0,5.914,2.648,5.914,5.914c0,3.268-2.649,5.915-5.914,5.915
	c-3.268,0-5.915-2.647-5.915-5.915H22.074c0,3.268-2.649,5.915-5.915,5.915c-3.267,0-5.916-2.647-5.916-5.915
	c0-3.266,2.648-5.914,5.916-5.914h5.344L10.118,6.479H3.344c-1.633,0-2.957-1.323-2.957-2.957c0-1.633,1.324-2.958,2.957-2.958
	h8.873c1.291,0,2.376,0.833,2.78,1.985l0.011-0.004l1.722,4.919h43.79c1.633,0,2.957,1.325,2.957,2.958
	C63.477,10.855,63.378,11.264,63.211,11.634 M18.8,13.379L24.267,29l25.412-1.695l6.266-13.925H18.8z"/>
</symbol>
</defs>
</svg>

<defs>

<path fill-rule="evenodd" clip-rule="evenodd" d="M63.211,11.634l0.004,0.002l-8.872,19.715c-0.438,0.972-1.384,1.662-2.499,1.736

l-25.551,1.704l1.477,4.218h27.821c3.265,0,5.914,2.648,5.914,5.914c0,3.268-2.649,5.915-5.914,5.915

c-3.268,0-5.915-2.647-5.915-5.915H22.074c0,3.268-2.649,5.915-5.915,5.915c-3.267,0-5.916-2.647-5.916-5.915

c0-3.266,2.648-5.914,5.916-5.914h5.344L10.118,6.479H3.344c-1.633,0-2.957-1.323-2.957-2.957c0-1.633,1.324-2.958,2.957-2.958

h8.873c1.291,0,2.376,0.833,2.78,1.985l0.011-0.004l1.722,4.919h43.79c1.633,0,2.957,1.325,2.957,2.958

C63.477,10.855,63.378,11.264,63.211,11.634 M18.8,13.379L24.267,29l25.412-1.695l6.266-13.925H18.8z"/>

</symbol>

</defs>

</svg>

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

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgicon">
<defs>
<symbol id="cloud" viewBox="0 0 64 51">
<path fill-rule="evenodd" clip-rule="evenodd" d="M49,46.666H15c-8.284,0-15-6.715-15-15c0-6.757,4.47-12.467,10.613-14.343
	C13.952,8.752,22.246,2.667,32,2.667c9.752,0,18.048,6.086,21.386,14.656C59.529,19.199,64,24.909,64,31.666
	C64,39.951,57.283,46.666,49,46.666 M54.963,24.939c-0.191-0.17-0.393-0.331-0.598-0.485c-0.014-0.01-0.026-0.02-0.039-0.029
	c-0.195-0.144-0.396-0.278-0.602-0.406c-0.031-0.021-0.064-0.039-0.096-0.059c-0.191-0.115-0.389-0.225-0.588-0.326
	c-0.055-0.027-0.112-0.054-0.167-0.08c-0.185-0.09-0.371-0.172-0.562-0.248c-0.082-0.033-0.168-0.062-0.253-0.094
	c-0.171-0.062-0.342-0.123-0.518-0.175c-0.117-0.034-0.236-0.062-0.354-0.091c-0.152-0.038-0.303-0.078-0.457-0.109
	c-0.162-0.03-0.328-0.052-0.492-0.074c-0.119-0.017-0.236-0.039-0.356-0.051c-0.291-0.028-0.585-0.045-0.882-0.045
	c-0.094,0-0.186,0.012-0.278,0.015c-0.091-0.514-0.207-1.017-0.343-1.513c-0.033-0.121-0.078-0.236-0.114-0.355
	c-0.11-0.375-0.226-0.749-0.362-1.112c-0.041-0.11-0.092-0.215-0.137-0.323c-0.148-0.371-0.3-0.737-0.473-1.094
	c-0.041-0.086-0.09-0.168-0.133-0.253c-0.188-0.373-0.385-0.741-0.598-1.097C43.594,11.985,38.191,8.667,32,8.667
	c-6.192,0-11.595,3.318-14.563,8.268c-0.214,0.355-0.41,0.724-0.598,1.097c-0.043,0.085-0.091,0.167-0.133,0.253
	c-0.172,0.356-0.325,0.723-0.473,1.094c-0.043,0.108-0.094,0.213-0.135,0.323c-0.137,0.363-0.252,0.737-0.364,1.112
	c-0.036,0.119-0.081,0.234-0.114,0.355c-0.136,0.496-0.251,0.999-0.342,1.513c-0.093-0.003-0.184-0.015-0.278-0.015
	c-0.298,0-0.592,0.017-0.882,0.045c-0.12,0.012-0.237,0.034-0.356,0.051c-0.165,0.022-0.331,0.044-0.493,0.074
	c-0.155,0.031-0.306,0.071-0.457,0.109c-0.119,0.029-0.238,0.057-0.354,0.091c-0.176,0.052-0.348,0.113-0.519,0.175
	c-0.084,0.031-0.169,0.061-0.252,0.094c-0.191,0.076-0.377,0.158-0.561,0.248c-0.056,0.026-0.112,0.053-0.167,0.08
	c-0.201,0.102-0.397,0.211-0.589,0.326c-0.032,0.02-0.064,0.038-0.096,0.059c-0.205,0.128-0.406,0.263-0.6,0.406
	c-0.014,0.01-0.027,0.02-0.04,0.029c-0.206,0.154-0.406,0.315-0.598,0.485C7.178,26.586,6,28.986,6,31.666c0,4.973,4.029,9,9,9h34
	c4.97,0,9-4.027,9-9C58,28.986,56.822,26.586,54.963,24.939"/>
</symbol>
<symbol id="shopping-cart" viewBox="0 0 64 51">
<path fill-rule="evenodd" clip-rule="evenodd" d="M63.211,11.634l0.004,0.002l-8.872,19.715c-0.438,0.972-1.384,1.662-2.499,1.736
	l-25.551,1.704l1.477,4.218h27.821c3.265,0,5.914,2.648,5.914,5.914c0,3.268-2.649,5.915-5.914,5.915
	c-3.268,0-5.915-2.647-5.915-5.915H22.074c0,3.268-2.649,5.915-5.915,5.915c-3.267,0-5.916-2.647-5.916-5.915
	c0-3.266,2.648-5.914,5.916-5.914h5.344L10.118,6.479H3.344c-1.633,0-2.957-1.323-2.957-2.957c0-1.633,1.324-2.958,2.957-2.958
	h8.873c1.291,0,2.376,0.833,2.78,1.985l0.011-0.004l1.722,4.919h43.79c1.633,0,2.957,1.325,2.957,2.958
	C63.477,10.855,63.378,11.264,63.211,11.634 M18.8,13.379L24.267,29l25.412-1.695l6.266-13.925H18.8z"/>
</symbol>
</defs>
</svg>

<defs>

<path fill-rule="evenodd" clip-rule="evenodd" d="M49,46.666H15c-8.284,0-15-6.715-15-15c0-6.757,4.47-12.467,10.613-14.343

C13.952,8.752,22.246,2.667,32,2.667c9.752,0,18.048,6.086,21.386,14.656C59.529,19.199,64,24.909,64,31.666

C64,39.951,57.283,46.666,49,46.666 M54.963,24.939c-0.191-0.17-0.393-0.331-0.598-0.485c-0.014-0.01-0.026-0.02-0.039-0.029

c-0.195-0.144-0.396-0.278-0.602-0.406c-0.031-0.021-0.064-0.039-0.096-0.059c-0.191-0.115-0.389-0.225-0.588-0.326

c-0.055-0.027-0.112-0.054-0.167-0.08c-0.185-0.09-0.371-0.172-0.562-0.248c-0.082-0.033-0.168-0.062-0.253-0.094

c-0.171-0.062-0.342-0.123-0.518-0.175c-0.117-0.034-0.236-0.062-0.354-0.091c-0.152-0.038-0.303-0.078-0.457-0.109

c-0.162-0.03-0.328-0.052-0.492-0.074c-0.119-0.017-0.236-0.039-0.356-0.051c-0.291-0.028-0.585-0.045-0.882-0.045

c-0.094,0-0.186,0.012-0.278,0.015c-0.091-0.514-0.207-1.017-0.343-1.513c-0.033-0.121-0.078-0.236-0.114-0.355

c-0.11-0.375-0.226-0.749-0.362-1.112c-0.041-0.11-0.092-0.215-0.137-0.323c-0.148-0.371-0.3-0.737-0.473-1.094

c-0.041-0.086-0.09-0.168-0.133-0.253c-0.188-0.373-0.385-0.741-0.598-1.097C43.594,11.985,38.191,8.667,32,8.667

c-6.192,0-11.595,3.318-14.563,8.268c-0.214,0.355-0.41,0.724-0.598,1.097c-0.043,0.085-0.091,0.167-0.133,0.253

c-0.172,0.356-0.325,0.723-0.473,1.094c-0.043,0.108-0.094,0.213-0.135,0.323c-0.137,0.363-0.252,0.737-0.364,1.112

c-0.036,0.119-0.081,0.234-0.114,0.355c-0.136,0.496-0.251,0.999-0.342,1.513c-0.093-0.003-0.184-0.015-0.278-0.015

c-0.298,0-0.592,0.017-0.882,0.045c-0.12,0.012-0.237,0.034-0.356,0.051c-0.165,0.022-0.331,0.044-0.493,0.074

c-0.155,0.031-0.306,0.071-0.457,0.109c-0.119,0.029-0.238,0.057-0.354,0.091c-0.176,0.052-0.348,0.113-0.519,0.175

c-0.084,0.031-0.169,0.061-0.252,0.094c-0.191,0.076-0.377,0.158-0.561,0.248c-0.056,0.026-0.112,0.053-0.167,0.08

c-0.201,0.102-0.397,0.211-0.589,0.326c-0.032,0.02-0.064,0.038-0.096,0.059c-0.205,0.128-0.406,0.263-0.6,0.406

c-0.014,0.01-0.027,0.02-0.04,0.029c-0.206,0.154-0.406,0.315-0.598,0.485C7.178,26.586,6,28.986,6,31.666c0,4.973,4.029,9,9,9h34

c4.97,0,9-4.027,9-9C58,28.986,56.822,26.586,54.963,24.939"/>

</symbol>

<path fill-rule="evenodd" clip-rule="evenodd" d="M63.211,11.634l0.004,0.002l-8.872,19.715c-0.438,0.972-1.384,1.662-2.499,1.736

l-25.551,1.704l1.477,4.218h27.821c3.265,0,5.914,2.648,5.914,5.914c0,3.268-2.649,5.915-5.914,5.915

c-3.268,0-5.915-2.647-5.915-5.915H22.074c0,3.268-2.649,5.915-5.915,5.915c-3.267,0-5.916-2.647-5.916-5.915

c0-3.266,2.648-5.914,5.916-5.914h5.344L10.118,6.479H3.344c-1.633,0-2.957-1.323-2.957-2.957c0-1.633,1.324-2.958,2.957-2.958

h8.873c1.291,0,2.376,0.833,2.78,1.985l0.011-0.004l1.722,4.919h43.79c1.633,0,2.957,1.325,2.957,2.958

C63.477,10.855,63.378,11.264,63.211,11.634 M18.8,13.379L24.267,29l25.412-1.695l6.266-13.925H18.8z"/>

</symbol>

</defs>

</svg>

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

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

<div id="svg-library"></div>

1	<div id="svg-library"></div>

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

<svg>
    <use xlink:href="#shopping-cart"/>
</svg>

<svg>

</svg>

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

<script type="text/javascript">
$(function() {
    $(document).ready(function() {
        $.ajax({
               type: 'GET',
               url: 'img/svg.html',
               dataType: 'html',
               success: function(data) {
                   $('#svg-library').append(data);
               }
        });
    });
});
</script>

$(function() {

$(document).ready(function() {

$.ajax({

type: 'GET',

url: 'img/svg.html',

dataType: 'html',

success: function(data) {

$('#svg-library').append(data);

}

});

</script>

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

WEB制作、マーケティングに関する情報をお届けします。