svgデータを外部にまとめてajaxで読み込む方法
2016.08.30
カテゴリ：WEB制作
タグ：
日頃からよく使うsvgファイルのテキストデータをhtmlにまとめておいてajaxでsvgのシンボルidを指定して読み込む方法でメンテナンス性も抜群です。
1.読み込み先のsvg.htmlを作成
svg.htmlの書き方についてです。|
1 2 3 4 5 6 7 |
<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> |
viewBoxは座標やサイズを指定出来ます。
<symbol>〜</symbol>の間にコードを貼付けます。
実際にやってみます。まず、svgファイルをテキストで開いて各コードを抽出します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
今回はimgフォルダにsvg.htmlと名前を付けて保存しました。
<symbol> を増やしていけばたくさんのファイルを登録出来ます。
例えば下記のように。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<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> |
2.読み込み元のhtmlの書き方
まず、htmlのどこかに下記を記入します。|
1 |
<div id="svg-library"></div> |
|
1 2 3 |
<svg> <use xlink:href="#shopping-cart"/> </svg> |
最後にスクリプトを記入してajaxで読み込みさせます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
コレで完了です。
※ローカル環境で静的ファイルのchromeやsafariではajaxが動作しないのでアップロードしてサーバーで見るかfirefox等を使って動作を確認しましょう。
