スケーラブルベクターグラフィックス（SVG）は、XMLで表され、Webページ上の画像に結合される円、長方形、およびパスで構成されます。 塗りつぶし、グラデーション、およびいくつかのSVGフィルターを適用できます-すべてのブラウザーがすべてのタイプのフィルターをサポートしているわけではありません。 テキスト、画像を含めることができ、必要なだけSVGをコピーできます。 ほとんどの場合、SVGは図、イラスト、アニメーションを作成するためにグラフィックプログラムで使用されます。 ただし、WebサイトのデザインにSVGを使用することを妨げるものは何もありません。これは、使用するのが楽しい驚くほど多用途のWebデザイン機能を提供します。 この入門記事では、ブラウザーのサポートなど、SVGの操作に関するいくつかの重要なポイントについて説明します。 第2部では、Webで見つけることができるSVGを見つけて適応させる方法、または自分でSVG画像を作成してページに追加する方法を見ていきます。
ワイルドsvg
一部の人々は、通常はトピックアイコンにWebサイトのデザインにSVGを使用します。 たとえば、HTML5ワーキンググループの共同議長であるSam Ruby は、ブログ投稿でSVGを使用しています 。 OperaのErik DahlstromはCodedreadの Jeff Schiller と同じことをしています 。
JeffはSVGをアイコンだけでなく、メニューにも埋め込み、Webサイト全体でベクターグラフィックスを使用しています。 Mac OS X用のEmacsサイトは、主にSVGを使用して、SVGの実際のスケーリングを確認し、ページのサイズを変更します。
私（つまり、記事の作成者-およそPer）は、 SVGを使用して、現在表示されている写真からグラデーションカラーを取得します （ページを数回再読み込みして、効果を確認します）。
SVGを使用できる場合と使用できない場合
GIF、JPEG、またはPNGを使用する場合はいつでもSVGを使用できます。 SVGを使用して、ラスタではなくレンダリング命令を提供します。
SVGはベクターグラフィックスであるため、ページサイズに合わせて拡大縮小できますが、JPEGまたはGIFはこれをまったく行えないか、少なくともきれいに行うことができません。 このスケーラビリティは、ユーザーがiPhoneなどの小型デバイスと大型32インチモニターの両方でページを表示する場合に特に役立ちます。 以下のスクリーンショットは、OS XのEMACSサイトを全画面表示し、垂直方向に絞り込んだブラウザーを示しています。 画像は、比率に違反することなくブラウザウィンドウに収まるように縮小されることに注意してください。 ページがどれほど大きくても、画像は正しくスケーリングされます。
Mac OS X用のEMACSのスクリーンショット
同じサイトですが、より小さいブラウザウィンドウ内
また、SVGはチャネルに大きな負荷をかけません。 クライアントに送信されるグラフィックの数に関係なく、それらはXMLを使用して記述されます。 SVGは、要素を繰り返さずにグラフィックでページの背景を塗りつぶす必要がある場合に役立ちます。
SVGがどれほど優れていても、使用しないほうがよい場合があります。 たとえば、写真をSVGに変換できますが、変換は正確ではありません。 さらに、そのような画像を描画するには、クライアントリソースが十分でない場合があります。 テストのために、かなり洗練されたJPEGをSVGに変換しました。 その結果、SVGの処理中にChromeの最初のベータ版だけでなく、コンピューターも同様に。
そのため、SVGは写真や複雑な画像を置き換えることはできませんが、他のすべての場合には非常に適しています。 この記事の第2部で手を塗る前に、ブラウザーでのSVGサポートについて学ぶことが重要です。
ブラウザのサポート
主なブラウザ-Firefox、Chrome、Safari、Operaは、オブジェクトにロードされたファイルの形式で、またはXHTMLコードに直接埋め込まれたSVGをサポートします。 前述のJeff Schillerは、さまざまなブラウザーでのSVGサポートを示すグラフをサポートしています。
グラフに示すように、ほとんどの主要なブラウザーはSVGの基本機能をサポートしています。 これには、フォント、画像、円やパスなどのグラフィック要素、グラデーション、およびいくつかのフィルターのサポートが含まれます。 よりエキゾチックな機能のみがサポートされていません。
ただし、ページの背景に複雑なSVG画像を使用することはお勧めしません。ブラウザーがレンダリングに多くの時間を費やしてしまうためです。
アニメーション化された背景を使用する前に、もう一度考える価値があります。 ページの動き、特にJavaScriptを無効にすることで取り除くことができないものに人々は悩まされます。
前述のように、ほとんどの主要なブラウザーはSVGのコア機能をサポートしています。 いつものように、重要な例外はInternet Explorerです。
Internet ExplorerおよびSVG
私はSVGの使用を承認していますが、前述のように、メインブラウザーの1つはSVGをサポートしておらず、このブラウザーはInternet Explorerです。 幸いなことに、IEでSVGがサポートされていないことは、もはや障害ではありません。
VGWeb 、 Ample SDK 、およびRaphaelなどのライブラリは、IEの現在および以前のバージョンでSVGサポートを実装しています。 さらに、HTML5仕様にはHTMLにSVGを埋め込むことが含まれていますが 、それ以前はXHTMLでのみサポートされていました。 これによりdoctypeのサポートが拡張され、MicrosoftがW3C SVGワーキンググループに参加したという最近のニュースにより、IEが引き続きバージョン9でSVGのサポートを開始することが期待されています。
一方、Web上のモバイルデバイスの数は増加しており、IEに依存する人気のあるデバイスはありません。 さらに、ミニマリズムデザインの人気の高まりを利用して、サイトにSVGを効果的に導入できます。 サイトが魅力的でありながらミニマルなデザインである場合、SVGは楽しいイノベーションとして追加でき、表示されるかどうかは関係ありません。 ブラウザーからのサポートがない場合、SVGを使用した前述のサイトは、代替グラフィックスを提供するか、SVGをサポートするブラウザーを使用するようにリーダーに提供します。 （そして、最後の選択肢で作者を負かさないでください-このアプローチはIEで10年以上ブラウザ戦争で働いてきました）。
可用性はどうですか？
SVGは、画像の代わりに短いテキストと長いテキストを使用する機能を提供します。 なぜなら マークアップ言語に基づいているため、以下に示すように、title要素とdesc要素を使用して簡単にタイトルと説明を追加できます。
残念ながら、画面から読み取るためのこれらの要素のサポートは十分ではなく、アクセシビリティが必須のサイトで問題が発生します。
< svg xmlns:xlink ="http://www.w3.org/1999/xlink" version ="1.0" xmlns ="http://www.w3.org/2000/svg" >
< title > Chimp on a tightrope </ title >
< desc > Older chimp walking across a tightrope between two trees at the St. Louis Zoo </ desc >
< image xlink:href ="chimp.jpg" x ="0" y ="0" height ="402" width ="600" />
</ svg >
* This source code was highlighted with Source Code Highlighter .
Title
通常、スタンドアロンSVGのドキュメントのタイトルとして使用されます。
title
と
desc
は、他の名前空間のより複雑なマークアップでも使用できます。 さらに、より複雑なメタデータには、著作権情報や著者情報などのRDF / XMLを含むことができる
metadata
要素があります。
画面読み取りのSVGサポートは少ないため、サーバー側の処理またはXSLTを使用して、組み込みのSVGページの情報にアクセスし、
title
、
desc
、および
metadata.
要素からHTMLを生成できます
metadata.
デザイン要素として使用される背景と画像については、必要に
desc
て
title
要素と
desc
要素を削除できます。
アクセシビリティとSVGの詳細については、次のリンクをご覧ください。