SVG

svgを表示する方法で迷うた。利便性？表示速度？キャッシュ有効無効は？


↑PNG↓SVG


関連：SVGエディタ「Boxy SVG」ショートカットや使い方メモ

SVGを作って遊び始めたらWEBサイトに使いたくなるのは必然の話

WEBサイトでSVGを表示する方法はいっぱいあるみたい

SVGを表示する方法


  • HTMLにSVGタグを埋め込む
    • <svg> … </svg>
  • OBJECTタグを使って表示
    • <object type="image/svg+xml" data="xxx.svg" width="100" height="100"></object>
  • IMGタグを使って書く
    • <img src="xxx.svg" width="100" height="100">
  • CSSにpathを書く
    • clip-path: circle(100px at center);とかclip-path: url("xxx.svg");とかbackground-image:url(xxx.svg)とか？
  • CSSインラインでファイル指定して表示
    • <div style="background-image:url(xxx.svg); width:100px; height:100px;"></div>
  • javaScriptでごにょごにょする
    • <script>//ごにょごにょ</script>
などなど、選択肢がいっぱいなのですね


SVG関連のサイトなどをチェック

実際どれを利用するかは別としても、何が一般的なのか調べておきたいところ

codepenなどソースを確認できるSVG系のコードの殆どがHTMLにSVGタグを埋め込んでいますね
中にはOBJECTタグで外部SVGファイルを読み込んでいるものやシンプルなものはCSSに記述しているものもあります

codepenなんかは人にもソースを把握出来るようにとか編集も楽ですしね
そういう傾向なだけかも知れないので他も見ないとです

参考：https://blog.codecamp.jp/svg_animation_example

ふむふむ、まちまちですね
簡単なアイコンなんかはHTMLにSVGタグで書かれたものが多いですかね
svg.cssとしてキレイにまとめられたものもありますねー

今次の項目のテスト中ですが

大きなSVGなんかはHTMLにSVGタグで埋め込んだら凄い量のHTMLコードになってしまいますよね
今次の項目のテスト中ですが、HTMLファイルが重い！
表示速度とかのユーザビリティより、制作側のそゆ部分も考慮しつつ選択したいですね

SVG表示方法による表示速度の差

SVG埋め込みとOBJECTタグによるSVGファイル呼び出す方法に絞って、表示速度を確認中

それを考えると、先にキャッシュはどうなってる？って話になるのですが初回アクセス時と２回目以降のアクセス時でわけて検証しようかと

HTMLにSAGファイルを埋め込んだ場合
そのSVGデータはHTMLとは別でキャッシュされるのか、気になるところです

SVG表示方法による表示速度の差：簡単な検証

検証用に大きめのSVGが欲しかったので富士山の写真をsvgをInkscapeでsvgに変換したものを利用

それぞれ別のHTMLファイルに記述して初回アクセスとキャッシュ込みのアスセスのロード時間を検証
数値はGoogle Chromeのデロペッパーツール(F12)のネットワークで取得できるLoad(最下部)です

初回アクセス

<OBJECT> <svg>
1回目1.47s1.65s
2回目1.74s1.57s
3回目2.512.19s
※<OBJECT>はHTML名が違ってもsvgファイルはキャッシュされるのでsvgファイルに?V=xxxとして初回にしています


再読込（F5）

<OBJECT> <svg>
1回目0.22s0.24s
2回目0.24s0.24s
3回目0.23s0.23s

再読込（Ctrl + Shift + F5）

<OBJECT> <svg>
1回目1.71s1.33s
2回目0.97s1.25s
3回目0.81s0.87s

とりあえずHTMLに<svg>タグで埋め込んでもsvgデータはキャッシュ(memory cache)される事はわかった
これはHTMLファイルのキャッシュ設定に依存するのかな

.htaccessでhtml、svgともにキャッシュを有効にして試してみた

キャッシュ指定はどちらもしていない状態だったので今度は.htaccessで全部許可して試してみました
<OBJECT>のResponse Headerには「Cache-Control:max-age=604800」が追加されたけど、速度やら他の挙動は一緒だった
<svg>の方も指定していない時と同じような結果となった

逆に.htaccessでhtml、svgともにキャッシュを拒否して試してみた

再読込（F5）

<OBJECT> <svg>
1回目2.22s.25s
2回目1.75s0.76s
3回目1.32s1.15s
これは双方に変化が出てしまった
影響が出た制限がhtmlなのかsvgなのかみなくちゃいけなくなった

htaccessでhtmlのキャッシュを拒否して試してみた(svgは有効)

再読込（F5）

<OBJECT> <svg>
1回目0.27s1.16s
2回目0.31s0.55s
3回目0.25s0.48s

htaccessでsvgのキャッシュを拒否して試してみた(htmlは有効)

再読込（F5）

<OBJECT> <svg>
1回目1.05s1.22s
2回目1.11s0.23s
3回目0.82s0.23s

今のところの結論

読み込み対象として表示されるアイテムは<OBJECT>が

<svg>が

となにやらjpegの文字列のあるので念の為、jpegの拒否許可も試したけど影響はなさそうだった

いまのところ


  • <OBJECT>等で外部svgファイルを指定して書いた場合はsvgのキャッシュ設定に依存
  • <svg>で書いた場合はhtmlのキャッシュ設定に依存
  • 拒否指定がない場合はどちらも有効にしているのと一緒

これで合ってるのかな

htmlファイルが静的なものでキャッシュ有効でもOKなら<svg>で書いてもキャッシュは有効でいられるのかな
jsで動的にしている部分はhtmlのキャッシュ有効でも問題はずないです
phpなんかでページ情報を読み込んでいるページはキャッシュ有効にできない可能性もありますね

初回の読み込み時間も大差ないのなら<OBJECT>などでsvgファイルを読み込んだほうが何かと便利かもですね

ただ、何度もやってる感じだと初回アクセス時は<svg>より<OBJECT>の方が読み込み若干遅いかな思います

結論は、よくわからんです

テストに使ったsvg画像を<OBJECT><svg>両方貼ったページを置いておきます
左が<OBJECT>　右が<svg>です
svg表示速度テスト用


0 件のコメント :

コメントを投稿