Webpixpro

Webpixproヘルプセンター

webpixproヘルプセンター > スタッフブログ > svgファイルの外部読み込み

svgファイルの外部読み込み

$.ajax(jQuery)使ってsvgを外部ファイルとして読み込む

webpixproのユーザーの皆様にはあまり知る必要のないことですが、webpixproのデザインテンプレートでもsvgアニメーションが実装されているテンプレートがございます。
svgをcss3のアニメーションで動かす場合、svgファイルのコードをインラインでbody内に入れる必要がありますが、これだとillustratorファイルをテキストエディターで間違って開いてしまったような数値コードばかりで、htmlソースの可読性が著しく下がってします。複雑なイラストの場合、どこまでスクロールしてもずっとsvgの記述なんてことも。スタッフ間でメンテナンスする際にも、うんざり感じてしまいます。

そこで、svgタグ部分を外部ファイル化しajaxを使って非同期通信で読み込むことにします。そうすれば、htmlソースも整理され、なおかつインラインの時と同じようにsvgをcssでコントロールすることができます。

<body>
<div id="mam">
<!--ここにajaxで読み込まれた外部svgデータが入ります-->
</div>
<script src="jquery.min.js"></script>
<script>
$.ajax({
url: 'mam.svg',
})
.then(
function(data){
	var svg = $(data).find('svg');
  $('#mam').append(svg);
},
function(){
	alert('読み込みが失敗しました');
});
</script>
</body>

webpixproのデザインテンプレート「Comic」ではsvgアニメーションでユーザー体験をアップさせたり、svgファイルを多用して極力読み込みサイズを小さくする工夫がされています。ページの読み込み時間が1〜3秒の場合、離脱率は32%、1〜5秒の場合は90%、1〜6秒の場合は106%、1〜10秒の場合は123%上昇することが報告されています。つまり読み込み時間が5秒以上になると、ユーザーの90％が離脱してしまうことになります。webpixproでは画像の容量はもちろん、遅延読み込みやjavascript、cssのminimam化などさまざまな最適化を施したデザインテンプレートになっています。ぜひ、あなたのビジネスにお役立てください。