
画像フォーマット「SVG」を使いこなすために知っておきたいこと
SVGとは
SVGは「Scalable Vector Graphics」の略称です。
簡潔に言えばWeb上で使うことができる拡大縮小が可能なベクター画像のことを言います。
それでは、SVGはほかのフォーマットに比べどのようなメリットがあるのでしょうか。
SVGの強み
1. 1つのファイルでスマホ画面やRetina画面に対応
同じ画像・同じデザインであれば、スマホ画面の解像度用、hoverした時の画像…などいくつも画像を用意する必要がありましたが、SVGファイルであれば1つのファイルで対応できます。
結果的に画像サイズも軽減され、HTTPリクエスト数の削減につながり、結果としてページの表示スピードがあがり、SEOの効果も期待できます。
2. あとから色の変更やサイズ調整が可能
SVGは画像ファイルということもできますが、数式や文字を用いたデータファイルという側面も持ち合わせています。そのため、あとから色やサイズの変更が必要になったときに専用の画像ソフトを開いて編集しなくても、CSS上でサイズや色を変更できます。
3. アニメーションや透過も
これまでは、アニメーションといえばGIF、透過画像といえばPNGでしたが、SVGはアニメーションも透過もどちらも扱えます。
CSSやJavaScriptを使って動きをつけることも可能です。
SVGを使うべきとき・使うべきではないとき
JPG画像がイメージサイズを軽量にできる反面、PNGやSVGフォーマットはともに透過背景・アルファ透過を扱うことができます。
それでは、透過色を使いたいときにはどちらを使えばいいのでしょうか。
SVGを使うべき場面
高画質の画像を縮小して通常画質のスクリーンにエクスポートすると、画像サイズが非常に大きくなってしまいます。
それを避けるためには、PNGよりもSVGを使ったほうがいい場合があります。
形が複雑でなければファイルサイズはビットマップ画像よりも小さくなり、拡大してもぼやけずに綺麗な状態で表示できます。
色やサイズの変更も簡単に行えます。
SVGを使うべきではない場面
SVGは数学的に計算して表示するベクター形式の画像フォーマットなので、形や色を効率良く表現することはできますが、写真のようにたくさんの画素を持つ写真には不向きです。
また、現在ではほとんどのブラウザでサポートしていますが、まれに未対応ブラウザも存在します。
その場合は未対応ブラウザでも対応できる「Modernizr.js」を使ってPNGの代替画像に置き換えるなど、一工夫必要な場合があります。
参考:
Modernizr.js
SVG画像を作成する方法
1. Illustratorなどのソフトを利用する
PhotoshopやIllustratorなどのソフトを使えば、簡単にSVG画像を作成できます。
アイコンなどに使う場合は、「100px × 100px」のように正方形で作成したほうがよいでしょう。
パスを使って作成していきますが、できるだけ高さがいっぱいになるように作成したほうがよいでしょう。これは、高さがバラバラだと、思ったような表示にならないからです。
また、テキストデータなどを使っていたり、さまざまなオブジェクトが混在している場合は、必ずすべてをアウトライン化します。
色を変える場合にはのちほどCSSで変更しやすいように一色のオブジェクトにしておきましょう。
画像は最終の状態を一度保存しておき、「別名で保存」を選択して「SVG形式」で書き出せば完了です。
2. オンラインエディタを利用する
IllustratorやPhotoshopのようなソフトは高額で手が出ない、という場合にはオンラインエディタを利用するのもオススメです。
「Vecteezy」はIllustratorでベクターを扱うのと同じように扱うことができます。
また、「ZorroSVG」のように、透過のPNGやGIFファイルをアップロードすれば、それよりも軽量な透過SVGファイルを作成してくれるような便利なWebサービスもあります。
3. SVGライブラリをダウンロードする
Simple IconsやIcoMoonのようなホームページでは、すでに作成されたSVG画像をダウンロードできます。
のちほどテキストエディタで着色もできるので便利です。
- HTTP
- HTTPとは、HTMLで記述されたWebページなどの情報を、WebサーバーとPCなどのクライアント端末間でやり取りする方法を定めた通信手順のことです。Hyper Text Transfer Protocolの略です。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- SEO
- SEO(Search Engine Optimization)とは、GoogleやYahoo!などのサーチエンジン(検索エンジン)で、特定キーワードで検索が実行されたとき、ホームページが表示される順位を上げるためのさまざまな施策のことです。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- ファイルサイズ
- ファイルサイズとは、コンピューターで扱うファイルの容量のことをいいます。 ハードディスクなどにファイルを転送する際などは、この容量をしっかりチェックしておく必要があります。その数値に応じてデータをコンピューターに保存することができます。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- オンライン
- オンラインとは、通信回線などを使ってネットワークやコンピューターに接続されている状態のことをいいます。対義語は「オフライン」(offline)です。 現在では、オンラインゲームやオンラインショップなどで、インターネットなどのネットワークに接続され、遠隔からサービスや情報などを利用できる状態のことを言う場合が多いです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析・広告効果測定
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
●課題
●その他
