SVGエッセンシャルズ 第2版

2章WebページでのSVGの使用

英国の詩人、ジョン・ダン（John Donne）は「no man is an island」（人は一人では生きていけない）と言いましたが、同じように、SVGも単独で存在するものではありません。もちろん、SVGの画像を、独立したファイルとしてWebブラウザーやSVGビューアーで表示することは可能ですし、本書の例の多くはそのように動作します。しかし、ときには、テキストのパラグラフ、フォーム、（SVGだけでは表示が難しい）その他の内容などを含んだ、より大きな文書の中にグラフィックスを組み込みたいと思う場合もあるでしょう。この章では、HTMLやその他の文書内にSVGを組み込むためのさまざまな方法について説明します。

図2-1は、前の章で作った猫の絵を、4種類の方法でHTMLページに挿入した結果を示しています。これらの結果はほとんど同じに見えますが、それぞれの方法にはメリットと制限があります。

2.1　画像としてのSVG

SVGは画像フォーマットの1つなので、ほかの種類の画像と同じようにしてHTMLページに含めることができます。

これには2つの方法があります。1つは、HTMLの<img>要素を使う方法です。これは、その画像がページの内容にとって欠かせないものである場合に推奨される方法です。もう1つは、別の要素のCSSスタイルプロパティとして画像を挿入する方法です。これは、その画像が主に装飾的なものである場合に推奨される方法です。

どちらの方法を使うにしろ、SVGを「画像」として含めることは、ある種の制限を課すことになります。画像は、メインのWebページとは別にレンダリングされます（SVGコードがラスター画像に変換されて表示されるという意味では、「描画される」と表現することもできます）。その2つの間で情報をやりとりする方法はありません。メインのWebページで定義されているスタイルは、SVGには影響がありません。SVGのグラフィックスがテキストを含んでいたり、フォントサイズに対して相対的に長さを定義していたりする場合には、SVGコードの中で個別にフォントサイズを指定するか、デフォルトのフォントサイズを定義する必要があります。また、メインのWebページで実行されているスクリプトから、SVGの文書構造を取得したり修正したりすることはできません。 ...