SVGファイル大解剖 : Illustratorによる作成から、Web書き出しまで

svgrock_top

 

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フォーマットを検討してみましょう。イメージ写真など、色数の多いデザインには不向きですが、試してみる価値はあるかもしれません。

 

svg-crisp

 

アイコン素材

 

Webサイトやモバイルアプリなどの、インターフェースデザインにも利用されているアイコン素材は、言語に関係なく、視覚的にユーザーにわかりやすくつたえることができます。最近はWebフォントで対応するケースを増えていますが、特にアニメーションを加えたいときなどは、SVGフォーマットを利用してみましょう。

 

svg-icons

 

 

ロゴデザイン

 

会社やブランドの顔として、利用されるロゴデザインは、特に多くのデザイナーがこだわりを魅せるポイントです。デザイナーの思い通り、忠実に再現したいときには、SVGフォーマットを検討してみましょう。ただし読み込み速度など、インターネット環境に影響される点も、考えておく必要があります。

 

svg-tuts-logo

 

 

アニメーション

 

CSS3とJavaScriptを組み込むことで、Webサイトで表現できる可能性が、一気にひろがります。マウスをロールオーバーするとうごきだしたり、クリックしたらアイコンの形がかわったり、アイデアは無限です。

 

svg-animate-3

 

 

SVGファイルへの保存方法

 

新しいファイルを作成する

 

Illustratorをひらき、メインメニューより「ファイル」>「新規ファイルを開く」を選択し、ファイル名とドキュメントサイズを設定しましょう。今回は、ファイル名「SVGテスト」、ドキュメントサイズ「300x300px」としています。

 

step1

 

 

イメージを選択する 

 

メインメニューより「書式」>「字形」を選択しましょう。フォント名「Webdings」は、さまざまなアイコンデザインからえらぶことができます。「文字ツール」を選択し、お好みのフォントを、ダブルクリックすれば完了となります。

 

step2

 

 

アウトラインに変換する

 

SVGファイルは、テキストオブジェクトもサポートしていますが、今回は基本として、パスを選択する方法を採用しています。「選択ツール(V)」で、デザイン全体を選択します。

 

step3

 

 

メインメニューより「書式」>「アウトラインを作成」を適用しましょう。これでデザインが、アウトラインに変換されました。

 

step4

 

 

SVGファイルを保存する

 

SVGファイルを保存するには、メインメニューより「ファイル」>「保存 / 別名で保存」を選択しましょう。ダイアログ画面が表示されるので、保存場所と、ファイル形式「SVG(svg)」をえらびましょう。

 

step5

 

 

「保存」ボタンをクリックすると、SVGオプション用画面が表示されます。のちほど詳しい説明をしますので、ここではデフォルト設定のままOKボタンをクリックしましょう。

 

step6

 

 

これでSVGファイルを、作成することができました。

 

svg-file1

 

 

SVGオプションについて

 

SVGとSVGZのちがいは?

 

Illustratorで、ファイルの保存形式を選択するときに、SVG(svg) とは別に、SVG圧縮(svgz)を見かけたかと思います。SVGZファイルは、名前のとおり圧縮されているので、ファイルサイズがSVGファイルに比べ軽量となります。

 

追記 @rikuoさんよりご連絡いただいた、SVGファイルをより詳しく解説している、こちらのページも参考にどうぞ。ありがとうございました。

 

step7

 

 

SVGプロファイルについて

 

日々進化をつづけるWebデザインの世界同様、SVGファイルも定期的なアップデートが行われています。Illustratorでは、SVGファイルの保存形式を以下のようにえらぶことができます。

 

[list type=”star”] [li]SVG 1.0 : 2001年にはじめて実現したバージョン。[/li]

[li]SVG 1.1 : ほぼSVG 1.0と同じですが、さらにサブタイプに分割できます。[/li]

[li]SVG Tiny 1.1 : SVG 1.1のサブタイプで、モバイルウェブデザインを想定しています。シンプルなSVGフォームで、グラデーションや不透明度、クリッピング、マスク、シンボル、パターン、下線付テキスト、縦書き、SVGフィルターエフェクトには対応せず。[/li]

[li]SVG Tiny 1.1 + : SVG Tiny 1.1に加え、グラデーションと不透明度に対応しています。[/li]

[li]SVG Basic 1.1 : SVG 1.1の2番目のサブタイプで、特にスマートフォンをよりスタイリングできます。長方形以外のクリッピングと、いくつかのSVGフィルターエフェクト対応せず。[/li]

[li]SVG Tiny 1.2 : SVG Tiny 1.1のサブタイプとして作成され、今後よりアップデートされる可能性があるバージョン。[/li][/list]

 

もうすぐSVG 2.0が、このリストに追加される予定となっています。実際のところ、どんなデザインでも、扱うことができるSVGファイルは、初期設定のSVG 1.1で、特に問題はありません。

 

step8

 

 

フォントについて

 

SVGファイルは、ベクターパス以外にも、さまざまな機能を設定できます。「フォント」は、どのようにテキストオブジェクトを扱うのか、選択します。

 

[list type=”star”] [li]Adobe CEF : よりタイポグラフィーを忠実に表示しますが、SVGビューワーに対応せず。[/li]

[li]SVG : すべてのSVGビューワーにも対応した完全版ですが、Adobe CEFは表示不可。[/li]

[li]アウトラインに変換 : すべての編集機能はありませんが、テキストをどのビューワーでも、問題なく表示します。ファイル容量が、大きくなる点に注意が必要。[/li][/list]

 

step9

 

 

サブセットは、「アウトラインに変換」のときだけ、選択可能となります。 文字詳細を、SVGファイルに埋め込み、ユーザー環境に対応していない状況でも、問題なく表示します。すべての文字を選択すると、ファイル容量が大きくなりますが、字体数をえらぶこともできます。

 

step10

 

 

オプションについて

 

SVGファイルに、Illustratorの編集機能を追加してくれます。こちらもファイル容量が、大きくなりますので、デザインの最終段階や、ファイルサイズが限られている場合には、チェックを外しておきましょう。

 

step11

 

 

その他ボタンについて

 

SVGオプションページの最後に表示されている、ボタンについてまとめています。

 

[list type=”star”] [li]詳細オプション : 今回は特にスルーということで、。[/li]

[li]SVGコード : お使いのテキストエディタを使い、XMLコードを表示します。[/li]

[li]地球儀マーク : SVGファイルを、直接ブラウザで表示します。[/li][/list]

 

step12

 

 

SVGファイルをWebサイトで使ってみよう

 

Webブラウザ表示について

 

SVGファイルは、Internet Explorer 8のような、古いブラウザには対応していませんが、モダンブラウザ全般で、問題なく対応するようになりました。

 

step15

 

 

モダンブラウザであれば、下記のように、問題なくSVGファイルを表示することができます。

step13

 

 

まず気づくのが、作成したオリジナルサイズ(300x300px)のまま表示される、という点です。

step14

 

 

WebページにSVGファイルを埋め込もう 

 

では、実際にSVGファイルを、HTMLページ内に埋め込んでみましょう。ここからは多少コーディング技術が必要となります。はじめてのかたは、ドットインストールなどで、あらかじめ学習しておくことをオススメします。

step16

 

 

<img>タグをつかう方法

 

JPEGやPNG、GIFファイルを読み込むのと同様に、<img>タグを利用します。SVGファイルのパスを選択することで、以下のように表示されます。

 

[crayon]

[/crayon]

step17

 

 

SVGファイルをWebページで直接開いた状態と変わりませんが、ここからwidth=””アトリビュートを設定すると、以下のようにサイズを自由に変更できます。

 

<img>タグを利用するのが、もっとも簡単な埋め込み方法です。しかしいくつかのブラウザでは、セキュリティの問題で、SVGファイルで実現できることが制限されてしまいます。

 

[crayon]

[/crayon]

step18

 

 

<object>タグをつかう方法

 

<object>タグの使い方は、<img>タグにも似ていますが、SVGフィルのパスの記述方法が以下のようになります。

[crayon]

[/crayon]

 

SVGファイルをサポートしていないブラウザにには、注意書きを表示することもできます。

[crayon]
こちらのブラウザはSVGファイルに対応していません。
[/crayon]

step19

 

 

インラインによるアプローチ

 

Illustratorで作成したSVGファイルを、テキストエディタでひらくと、以下のような文字の羅列になっているかと思います。しかしSVGファイルのXML構造での扱い方になれることで、HTMLファイルに直接ペーストすることができます。

 

step20

HTMLテンプレートに挿入するには、以下の部分のみが必要となります。

[crayon]

[/crayon]

 

 

今回作成したSVGファイルは、以下のようになります。

[crayon]

[/crayon]

 

 

 

CSS Backgroundによるアプローチ

 

CSSでスタイリングすることで、SVGファイルをWebページの背景イメージとして、活用する方法もあります。

[crayon]
html { background-image: url(SVG-Test.svg); }
[/crayon]

 

 

SVG関連リソース

 

SVGファイルを使った、ユニークなチュートリアルをいくつかまとめています。活用される機会が増えるであろうSVGファイル、これからがとてもたのしみです。

 

SVG Drawing Animation

アウトラインをアニメーションで描き、ベクターデザインがふわりと出現します。

SVGDrawingAnimation

 

 

Animated SVG Icons with Snap.svg

Adobe社が公開したスクリプトSnap.svgを使った、アニメーション付アイコンの作り方。

AnimatedSVGIcons(2)

 

 

Animated Checkboxes and Radio Buttons with SVG

アニメーションを加えることで、何気ないチェックボックスをダイナミックにデザインします。

AnimatedCheckboxes

 

 

NEW Shape Hover Effect with SVG

Snap.svgスクリプトを使用し、サムネイルホバーエフェクトに、ユニークなシェイプデザインを加えます。

ShapeHoverEffect

 

 

[list type=”star”] [li]Snap.svg – Home : SVGを使ったアニメーションを実現するスクリプト[/li]

[li]Polygon feature design: SVG Animation for Fun and Profit – Vox Product : アウトラインアニメーションの詳しいチュートリアル[/li]

[li]Animated Line Drawing in SVG – JakeArchibald.com : サンプル付きでアウトラインアニメーションの仕組みを解説。[/li]

[li]Animating Vector swith SVG – 24 ways : どんなベクター素材も、アウトラインからアニメーションを使って描きます。[/li][/list]

 

SVGファイルのすべてをまとめてご紹介しましたが、いかがでしたでしょう。いちど意味を理解してしまえば、Webページ制作などにも、積極的に取り入れることができますね。

 

 

参照元リンク : SVG FIles: From Illustrator to the Web – Vectortuts+