学びプラス情報
【WEB】１秒でも早くサイトを表示しよう！SVGフォーマット
-
Web/動画
記事のカテゴリー
-
学習に役立つ豆知識・スキル
こんな方に読んでほしい
-
Web受講生で現場で使われている技術を知りたい方
記事から得られること
-
SVGフォーマットの画像の扱いについての知識
ホームページの表示に時間がかかると直帰率や離脱率が上がります。
結果、コンバージョン（Webサイトの目的）が達成できなくなります。
ホームページの表示が遅くなる原因の多くはWebサイトに使用している画像です。
今回は画像のフォーマットのひとつであるSVGフォーマットを紹介していきます。
Webの勉強をすると写真はjpgイラストはpngと覚えるでしょう。
ではアイコンは？例えばSNSのアイコン画像などはどうしますか？
FontAwesome等サービスを利用してアイコンフォントで表現も可能ですが、
イラストレーターで作ったデータをsvgフォーマットに書き出し使用することもできます。
イラストレーターのデータはベクターデータなので解像度に依存せず、数式で表現可能です。
svg画像は数式をhtmlに記述して表示できます。
例えば、イラストレーターで長方形ツールで長方形を描いて保存してみましょう。
（※アートボードのサイズは長方形と同じサイズに調整しておいてください。）
保存時にファイル形式をSVG(svg)を選んでください。
次に出てくる画面でSVGコードをクリックします。
するとsvgコードが出てくるのでそれをhtmlファイルの中にコピペしてください。
htmlファイルを保存してブラウザで確認すると長方形が表示されていると思います。
このようにsvg画像は数式で表示可能です。
【svg画像のメリットは？】
1. png画像と比較してとても軽い画像データになる
2. 数式で表示可能なので数式をカスタマイズして色を変えたり縁を付けたりできる
3. ベクターデータなので解像度に依存しない（cssで大きさを変えても画質は変わらない）
※先ほどコピペしたコードの中には表示に不要な部分があるので削除して、よりデータを軽くできます。
以下のサービスを使ってみてください。
https://ao-system.net/svgcompact/
(SVG最適化 コンパクト化)
このようにsvgフォーマットには多くのメリットがあります。
他にもsvg画像で写真をマスクして表示したり、アニメーションさせたりできます。
また紹介しますね。
Web受講生の皆さんも作品制作にsvg画像を使ってみてください。
参考サイトURL
直帰率・離脱率とは？違いをわかりやすく解説！
https://www.sunloft.co.jp/dx/blog/bouncerate-withdrawalrate/
SVG最適化 コンパクト化
https://ao-system.net/svgcompact/
杉浦 俊哉
-
Web/動画
担当
静岡校
所属
1999年4月からフリーランスのWebデザイナー ヒューマンアカデミーの非常勤講師は1997年から。使用しているPCはM1のMacbookAirとM2ProのMac miniです。
この講師の記事を見る