SVGチュートリアル

SVG要素

SVGウェブ上で表示

Webブラウザ（例えばChrome、Firefox、Internet Explorer）でSVGを表示する方法は以下の通りです：ブラウザがSVGファイルのURLを指し示し、SVGをHTMLページに埋め込む、iframe要素を使用する、img要素を使用するなどです。

Webブラウザ（例えばChrome、Firefox、Internet Explorer）でSVGを表示する方法は以下の通りです：

ブラウザがSVGファイルのURLを指し示す
SVGをHTMLページに埋め込む

SVG画像をHTMLファイルに埋め込む方法は以下の通りです：

iframe要素を使用して
img要素を使用して
SVG画像を背景画像として使用します。
svg要素を使用して
埋め込み要素を使用して

iframeフレーム

SVG画像のURLを入力するとき、ブラウザがSVG画像を表示できるため、HTMLページのiframe内にSVG画像を含めることもできます。以下はその例です：

<iframe　src="mySvgImage.svg"　width="200"　height="200"　>

img

imgを使用する場合と同様に、要素にSVG画像を埋め込む方法も同じです。img要素のsrc属性にSVG画像のURLを記述できます。以下のようにです：

<img　src="/svg/circle-element-1.jsp">

SVG画像は他の画像と同じようにHTMLページに表示されます。

SVGとしての背景画像

ブラウザはSVG画像をビットマップ画像と同じように扱うため、CSSを使用してSVG画像を背景画像として使用することができます。以下はその例です:

div　{
　　　　background-image:　url('my-svg-image.svg');
　　　　background-size　:　100px　100px;
}

SVG画像の背景サイズを設定する必要がある場合があります。ブラウザがどのようにスケーリングするかを教えるためにです。私のCSS背景画像チュートリアルについても詳しく学ぶことができます。

HTML内のsvg要素

SVG要素を使用してSVG画像を埋め込む方法は以下の通りです:

<div><svg>
　　　　<circle　cx="40"　cy="40"　r="24"　style="stroke:#006600;　fill:#00cc00"/>
　　　　</svg></div>

ここでのdiv要素は、svg要素がHTMLに直接埋め込まれることができることを説明するためにのみ使用されています。ただし、svg要素はdiv要素に埋め込まれる必要はありません。

SVG要素を使用すると、SVGをHTMLページに直接埋め込むことができます。SVG画像を独自のファイルに配置する代わりに、SVG要素に幅widthおよび高さheight属性を追加してSVG画像の幅と高さを設定できます。

svg要素を使用することで、ブラウザ内でJavaScriptを使用してSVGを直接生成することもできます。3 JavaScript APIはこれに非常に適しています。jQuery JavaScript APIもこれを行うことができます。

svg要素を使用すると、CSSでsvgおよびその子要素のスタイルを設定することもできます。HTMLの他の要素に対して行うようにです。ただし、SVG要素の一部のCSS属性の名前はHTML要素の名前と異なる場合があります。

embed

SVGの初期段階では、embed要素を使用してSVG画像を埋め込むことができます。その時、すべてのブラウザがSVGをサポートしていませんでした。今日、imgやsvg要素を使用することをお勧めします。以下は、埋め込む要素の歴史的な理由の例です:

<embed　src="/svg/simple-example-1.jsp"
　　　　　　　width="300"　height="220"
　　　　　　　type="image"/svg+xml"
　　　　　　　pluginspage="http://www.adobe.com/svg/viewer/install/"　/>

この要素をHTMLファイル内でSVG画像が表示される場所に配置します。src属性はSVG画像のURLを指すべきです。

pluginspage属性に注意してください。SVGをネイティブに表示できない旧ブラウザでは必要です。これらのブラウザは、画像を表示するためにAdobeのSVGブラウザプラグインが必要です。Internet Explorerでは、 7およびFirefox 3.0.5中で、この属性は必要ではありませんが、含めても問題ありません。

WidthおよびHeight属性

img、svg、embed要素を使用してSVG画像を埋め込む場合でも、widthおよびheight属性を使用して画像の幅と高さを設定できます。SVGファイル内の画像がこれらの数字よりも幅広いまたは高ければ、SVG画像の一部のみが表示されます。完全なSVG画像（または表示したい幅）を表示するために、設定した幅と高さが十分に大きいことを確認してください。

SVGを使用してHTML要素の背景画像として

CSS backgroundを使用して-image属性はSVG画像をHTML要素の背景画像として使用します。SVG画像ファイルを他の画像ファイルと同様に指し示すだけで十分です。すべてのブラウザがこれを完全にサポートしているわけではありませんので、サポートする予定のブラウザでテストしてください。以下は一例です:

.myCSSClass {
　　　　background: url(/mySvgImage.svg);
}

ブラウザの互換性サポート

Internet Explorer 9以降のバージョンでは、SVGをネイティブに表示できます。この記事を書いている時点で、Firefox、Chrome、Safari、Opera、Androidブラウザは既にSVGをネイティブに表示できる期間があります。iOS版のSafari、Operaのミニおよびモバイルブラウザ、Android版のChromeも同様です。

Content Type

ブラウザのURLが.svgで終わる場合、ブラウザはSVGファイルのMIMEタイプを推測できます。しかし、servlet、JSP、PHP、ASP.NETページ、または他のWebアプリケーションコンポーネントからSVGを生成する場合、URLの終わりが常に.svgでないことがあります。
ブラウザがファイルをSVGファイルとして解釈し続けるようにするには、応答のContentを設定する必要があります。-Type HTTPヘッダ

image/svg+xml

前の<embed>要素を確認すると、type属性でも同様に行われています。<embed>要素内で内容タイプを設定することはInternet Explorerでは十分ですが、Firefoxではまだ十分ではありません。HTTP応答の内容タイプでも設定する必要があります。

また、ブラウザが直接サーバー上のSVGファイルを指す場合、<embed>タグはあなたにこの操作を実行するために利用できません。その場合、HTTPレスポンスで内容タイプを自分で設定する必要があります。
これはJSPで完了する方法:

<%　response.setContentType("image/svg+xml");%>
<svg　...　>

これはservletで実行するのと非常に似ています。Javaとは異なる技術を使用している場合、HTTPレスポンスで内容タイプを設定する方法についてグーグルを検索してください。多くの例があります。

SVGアイコン SVG簡単な例