SVGをウェブで表現でするにあたり、何点かあるがどれが一番早いのかメリデメなどを調査した。
postcss-inline-svgとは
GitHub - TrySound/postcss-inline-svg: PostCSS plugin to reference an SVG file and control its attributes with CSS syntax
https://github.com/TrySound/postcss-inline-svg
今回の実験を行う方法
- HTMLに直書きSVG
-
SVGの色変更がCSSでできる -
装飾をhtmlに記述するのはマークアップ構造的にどうなのか（ここはただの思想なのか...）
-
- CSSの背景にinline-svg
-
色変更し辛い、変更する場合SVG画像を色数分生成する必要がある
-
ビルドがinline-svg記述ファイル → scss → css 2回になる。
-
- CSSの背景にサーバーからパスで読み込む
-
サーバのキャッシュで実験よりかは少し早くなる見込み
-
IE11でたまにバグあるから気をつける
-
サーバにいちいちデータを置かなければならない
-
- ウェブフォント
-
色変更が容易
-
表示が遅いイメージ、一旦四角の〼見たいのが出て表現される感じ
-
条件
とりあえず差がわかりやすいようにSVGを100個作る。
キャッシュを消して計測し、10回計測の平均を表に記入する
自社のヘッダーとフッターがあるので、数値は少し多いが、差に注目する。
表現するSVG
数字を計測する方法
ChromeのデベロッパーツールのNetworkで確認する
結果
デベロッパーツールのFinishの時間を記入する。
| htmlに直書きSVG | CSSの背景にinline-svg | サーバーからパスで読み込む | ウェブフォント |
|---|---|---|---|
| 391ms | 387ms | 393ms | 512ms |
post-css-inline-svgが１番早い結果となった。
懸念点
前述でも話したように色変更が難しいので、容易にはできないがうまいやり方がみつかればとてもいい方法だと感じました。
ロゴなど色変更がなかなかないものであれば最適であると思います！