SVG（Scalable Vector Graphics）とは、1998年に誕生した、ベクターイメージフォーマットです。これまであまり利用されている、ケースは少なかったのですが、Internet Explorer 9を含む、主要モダンブラウザが、SVGファイルに対応したのをきっかけに、ユニークなデザインを再現するのに、利用されはじめています。
海外デザインブログVectortuts+で、Illustratorをつかい、SVGファイルをWeb用に書き出す方法をまとめたエントリー「SVG Files : From Illustrator to the Web」が公開されていたので、今回はご紹介します。
詳細は以下から。
なぜSVGファイルは便利？
SVGフォーマットは、W3C（World Wide Web Consortium）によって開発、メンテナンスされています。特にさまざまスクリーンサイズへの、対応が必要となっている、最近のWebデザイン制作にも適しています。デスクトップでも、スマートフォンのモバイル画面でも、問題なく表示される、ベクター形式です。またSVGファイルは、余計なパーツが取り除かれているので、ファイルが軽量で、ページ読み込み速度も期待できます。
さいごに、XMLベースでのWebページ作成が可能で、ほかのパーツ同様にスタイリングすることができます。SVGファイルとCSSファイル、JavaScriptを採用することで、デザインを切り抜いたり、色を変えたり、境界線の太さを変更したり、ぼかしエフェクトなども適用できてしまいます。また最近注目をあつめている、CSSアニメーションとも相性もばっちりです。
いつSVGファイルを利用？
ピクセル単位で表示される、デザインパーツは、どれも思いどおりに、忠実に描きます。ではどのようなときに、SVGファイルを利用するとよいのでしょう。いくつかのポイントを、まとめてみました。
グラフィックデザイン全般
Webサイト制作に、グラフィックイメージを利用しているときは、SVGフォーマットを検討してみましょう。イメージ写真など、色数の多いデザインには不向きですが、試してみる価値はあるかもしれません。
アイコン素材
Webサイトやモバイルアプリなどの、インターフェースデザインにも利用されているアイコン素材は、言語に関係なく、視覚的にユーザーにわかりやすくつたえることができます。最近はWebフォントで対応するケースを増えていますが、特にアニメーションを加えたいときなどは、SVGフォーマットを利用してみましょう。
ロゴデザイン
会社やブランドの顔として、利用されるロゴデザインは、特に多くのデザイナーがこだわりを魅せるポイントです。デザイナーの思い通り、忠実に再現したいときには、SVGフォーマットを検討してみましょう。ただし読み込み速度など、インターネット環境に影響される点も、考えておく必要があります。
アニメーション
CSS3とJavaScriptを組み込むことで、Webサイトで表現できる可能性が、一気にひろがります。マウスをロールオーバーするとうごきだしたり、クリックしたらアイコンの形がかわったり、アイデアは無限です。
SVGファイルへの保存方法
新しいファイルを作成する
Illustratorをひらき、メインメニューより「ファイル」>「新規ファイルを開く」を選択し、ファイル名とドキュメントサイズを設定しましょう。今回は、ファイル名「SVGテスト」、ドキュメントサイズ「300x300px」としています。
イメージを選択する
メインメニューより「書式」>「字形」を選択しましょう。フォント名「Webdings」は、さまざまなアイコンデザインからえらぶことができます。「文字ツール」を選択し、お好みのフォントを、ダブルクリックすれば完了となります。
アウトラインに変換する
SVGファイルは、テキストオブジェクトもサポートしていますが、今回は基本として、パスを選択する方法を採用しています。「選択ツール（V）」で、デザイン全体を選択します。
メインメニューより「書式」>「アウトラインを作成」を適用しましょう。これでデザインが、アウトラインに変換されました。
SVGファイルを保存する
SVGファイルを保存するには、メインメニューより「ファイル」>「保存 / 別名で保存」を選択しましょう。ダイアログ画面が表示されるので、保存場所と、ファイル形式「SVG（svg）」をえらびましょう。
「保存」ボタンをクリックすると、SVGオプション用画面が表示されます。のちほど詳しい説明をしますので、ここではデフォルト設定のままOKボタンをクリックしましょう。
これでSVGファイルを、作成することができました。
SVGオプションについて
SVGとSVGZのちがいは？
Illustratorで、ファイルの保存形式を選択するときに、SVG(svg) とは別に、SVG圧縮(svgz)を見かけたかと思います。SVGZファイルは、名前のとおり圧縮されているので、ファイルサイズがSVGファイルに比べ軽量となります。しかしXML上では、まったくちんぷんかんぷんな文字の羅列となってしまいます。CSSやJavaScriptファイルから、ベクターデザインを盗まれるのを防止してくれます。
SVGプロファイルについて
日々進化をつづけるWebデザインの世界同様、SVGファイルも定期的なアップデートが行われています。Illustratorでは、SVGファイルの保存形式を以下のようにえらぶことができます。
- SVG 1.0 : 2001年にはじめて実現したバージョン。
- SVG 1.1 : ほぼSVG 1.0と同じですが、さらにサブタイプに分割できます。
- SVG Tiny 1.1 : SVG 1.1のサブタイプで、モバイルウェブデザインを想定しています。シンプルなSVGフォームで、グラデーションや不透明度、クリッピング、マスク、シンボル、パターン、下線付テキスト、縦書き、SVGフィルターエフェクトには対応せず。
- SVG Tiny 1.1 + : SVG Tiny 1.1に加え、グラデーションと不透明度に対応しています。
- SVG Basic 1.1 : SVG 1.1の2番目のサブタイプで、特にスマートフォンをよりスタイリングできます。長方形以外のクリッピングと、いくつかのSVGフィルターエフェクト対応せず。
- SVG Tiny 1.2 : SVG Tiny 1.1のサブタイプとして作成され、今後よりアップデートされる可能性があるバージョン。
もうすぐSVG 2.0が、このリストに追加される予定となっています。実際のところ、どんなデザインでも、扱うことができるSVGファイルは、初期設定のSVG 1.1で、特に問題はありません。
フォントについて
SVGファイルは、ベクターパス以外にも、さまざまな機能を設定できます。「フォント」は、どのようにテキストオブジェクトを扱うのか、選択します。
- Adobe CEF : よりタイポグラフィーを忠実に表示しますが、SVGビューワーに対応せず。
- SVG : すべてのSVGビューワーにも対応した完全版ですが、Adobe CEFは表示不可。
- アウトラインに変換 : すべての編集機能はありませんが、テキストをどのビューワーでも、問題なく表示します。ファイル容量が、大きくなる点に注意が必要。
サブセットは、「アウトラインに変換」のときだけ、選択可能となります。 文字詳細を、SVGファイルに埋め込み、ユーザー環境に対応していない状況でも、問題なく表示します。すべての文字を選択すると、ファイル容量が大きくなりますが、字体数をえらぶこともできます。
オプションについて
SVGファイルに、Illustratorの編集機能を追加してくれます。こちらもファイル容量が、大きくなりますので、デザインの最終段階や、ファイルサイズが限られている場合には、チェックを外しておきましょう。
その他ボタンについて
SVGオプションページの最後に表示されている、ボタンについてまとめています。
- 詳細オプション : 今回は特にスルーということで、。
- SVGコード : お使いのテキストエディタを使い、XMLコードを表示します。
- 地球儀マーク : SVGファイルを、直接ブラウザで表示します。
SVGファイルをWebサイトで使ってみよう
Webブラウザ表示について
SVGファイルは、Internet Explorer 8のような、古いブラウザには対応していませんが、モダンブラウザ全般で、問題なく対応するようになりました。
モダンブラウザであれば、下記のように、問題なくSVGファイルを表示することができます。
まず気づくのが、作成したオリジナルサイズ（300x300px）のまま表示される、という点です。
WebページにSVGファイルを埋め込もう
では、実際にSVGファイルを、HTMLページ内に埋め込んでみましょう。ここからは多少コーディング技術が必要となります。はじめてのかたは、ドットインストールなどで、あらかじめ学習しておくことをオススメします。
<img>タグをつかう方法
JPEGやPNG、GIFファイルを読み込むのと同様に、<img>タグを利用します。SVGファイルのパスを選択することで、以下のように表示されます。
<img src="SVG-Test.svg" />
SVGファイルをWebページで直接開いた状態と変わりませんが、ここからwidth=”"アトリビュートを設定すると、以下のようにサイズを自由に変更できます。
<img>タグを利用するのが、もっとも簡単な埋め込み方法です。しかしいくつかのブラウザでは、セキュリティの問題で、SVGファイルで実現できることが制限されてしまいます。
<img src="SVG-Test.svg" width="900" />
<object>タグをつかう方法
<object>タグの使い方は、<img>タグにも似ていますが、SVGフィルのパスの記述方法が以下のようになります。
<object type="image/svg+xml" data="SVG-Test.svg"></object>
SVGファイルをサポートしていないブラウザにには、注意書きを表示することもできます。
<object type="image/svg+xml" data="SVG-Test.svg">こちらのブラウザはSVGファイルに対応していません。</object>
インラインによるアプローチ
Illustratorで作成したSVGファイルを、テキストエディタでひらくと、以下のような文字の羅列になっているかと思います。しかしSVGファイルのXML構造での扱い方になれることで、HTMLファイルに直接ペーストすることができます。
HTMLテンプレートに挿入するには、以下の部分のみが必要となります。
<svg>
<path/>
</svg>
今回作成したSVGファイルは、以下のようになります。
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<path d="M220.784,150c0,19.533-6.914,36.214-20.742,50.042c-13.828,13.829-30.51,20.743-50.042,20.743
c-19.533,0-36.213-6.914-50.042-20.743C86.13,186.214,79.216,169.533,79.216,150c0-19.533,6.914-36.213,20.743-50.042
C113.787,86.129,130.468,79.215,150,79.215c19.532,0,36.214,6.914,50.042,20.742C213.87,113.786,220.784,130.467,220.784,150z
M209.463,150c0-16.421-5.806-30.436-17.416-42.047C180.437,96.343,166.421,90.537,150,90.537c-14.693,0-27.6,4.753-38.72,14.261
l11.149,11.148l-7.865,8.644l-11.322-11.409c-8.47,10.775-12.705,23.048-12.705,36.819c0,16.422,5.804,30.438,17.415,42.048
c11.61,11.609,25.626,17.415,42.047,17.415c13.712,0,25.957-4.265,36.732-12.791l-10.199-10.112l7.778-8.643l10.804,10.717
C204.68,177.514,209.463,164.636,209.463,150z M175.756,177.744c0,7.145-2.521,13.224-7.562,18.236
c-5.043,5.013-11.106,7.52-18.193,7.52c-7.145,0-13.253-2.507-18.323-7.52c-5.071-5.013-7.605-11.092-7.605-18.236v-15.212
c-2.882-0.114-5.315-1.18-7.303-3.197c-1.988-2.017-2.982-4.408-2.982-7.174c0-2.708,0.994-5.069,2.982-7.087
c1.988-2.017,4.421-3.082,7.303-3.198v-38.114c17.861,0,31.315,3.197,40.362,9.593c7.548,5.302,11.322,12.044,11.322,20.225
V177.744z M124.072,158.729v-13.051c-4.207,0.346-6.31,2.507-6.31,6.483C117.762,156.195,119.865,158.384,124.072,158.729z
M152.333,111.28l-17.977-4.148h-5.963v6.31L152.333,111.28z M165.384,119.663l-7-5.186l-29.991,3.284v6.31L165.384,119.663z
M170.311,128.824l-2.247-4.84l-39.67,4.754v5.186L170.311,128.824z M171.435,138.418v-4.84l-43.042,4.84H171.435z
M171.435,177.744v-35.869h-3.458c0,6.167-0.691,10.473-2.074,12.921c-1.383,2.45-3.774,3.674-7.173,3.674
c-6.108,0-9.162-5.532-9.162-16.595h-21.175v35.869H171.435z M146.802,173.681h-3.198v-24.027h-12.187v-2.938h15.384V173.681z
M138.678,151.728l-2.939,3.112l-2.506-3.112H138.678z M159.68,186.559v-3.371h-19.532v3.371H159.68z"/>
</svg>
CSS Backgroundによるアプローチ
CSSでスタイリングすることで、SVGファイルをWebページの背景イメージとして、活用する方法もあります。
html { background-image: url(SVG-Test.svg); }
SVG関連リソース
SVGファイルを使った、ユニークなチュートリアルをいくつかまとめています。活用される機会が増えるであろうSVGファイル、これからがとてもたのしみです。
アウトラインをアニメーションで描き、ベクターデザインがふわりと出現します。
Animated SVG Icons with Snap.svg
Adobe社が公開したスクリプトSnap.svgを使った、アニメーション付アイコンの作り方。
Animated Checkboxes and Radio Buttons with SVG
アニメーションを加えることで、何気ないチェックボックスをダイナミックにデザインします。
- Snap.svg – Home : SVGを使ったアニメーションを実現するスクリプト
- Polygon feature design: SVG Animation for Fun and Profit – Vox Product : アウトラインアニメーションの詳しいチュートリアル
- Animated Line Drawing in SVG – JakeArchibald.com : サンプル付きでアウトラインアニメーションの仕組みを解説。
- Animating Vector swith SVG – 24 ways : どんなベクター素材も、アウトラインからアニメーションを使って描きます。
SVGファイルのすべてをまとめてご紹介しましたが、いかがでしたでしょう。いちど意味を理解してしまえば、Webページ制作などにも、積極的に取り入れることができますね。
参照元リンク : SVG FIles: From Illustrator to the Web – Vectortuts+