HTMLにSVGを埋め込む方法

スケーラブル・ベクター・グラフィックス（Scalable Vector Graphics）は、コンピュータ・グラフィックスのための非常に強力で便利なファイルタイプです。 他のラスタライズされたファイルタイプとは異なり、SVGは品質を損なうことなく拡大縮小することができます。 そのため、ロゴのような特定のグラフィックに最適です。あなたのウェブサイトでSVGを使用するには、HTMLに埋め込む必要があります。

1

ベクターベースのグラフィックソフトを使ってグラフィックを作成する

• SVGとしてドキュメントを保存する機能があれば、どんなベクターベースのグラフィックソフトでも構いません。
• ページ上に表示することを想定したサイズでグラフィックをデザインすると便利ですが、後でCSSを使って動的にサイズを変更することができます。

2

グラフィックのグループとレイヤーを整理します。

• グラフィックエディターの中で、画像をうまく整理しておくととても便利です。そうすることで、後の作業がずっと楽になります。
• Adobe Illustratorでは、シフトを押しながら複数のパスを選択し、グループ化します。次に、右クリックして "グループ化 "を選択します。レイヤーウィンドウに新しいグループが表示されます。

3

グラフィックをSVGとして保存します。

• ベクターベースのグラフィックエディターであれば、グラフィックをSVGとして保存できるはずです。
• イラストレーターでは、ファイルタブから「名前を付けて保存」を選択します。ダイアログボックスのドロップダウンリストからSVGを選択し、保存をクリックします。
• SVGオプション」ダイアログボックスが表示される場合があります。SVGファイル形式にはいくつかのバージョンがありますが、一般的にはバージョン1.1で問題ありません。OKを選択して次に進みます。

4

テキスト編集ソフトでSVGを開きます。

• ファイルエクスプローラで新しいSVGファイルを右クリックし、リストから「Open with」を選択します。
• 利用可能なプログラムから、任意のテキストエディタを選択します。目的のテキストエディタがリストにない場合は、"More Apps "または "Choose another app "を選択する必要があるかもしれません。
• メモ帳でも構いませんが、Visual StudioなどのIDEでSVGを開くこともできます。

5

SVGタグをコピーします。

• 一度開いたら、カーソルを使って<svg>タグの中身だけを選択します。
• ファイルの先頭には"<?xml ... "で始まる行がある。この行と、ドキュメントの先頭にある追加のコメント行は無視してください。
• <svg>タグ内はすべて有効なHTMLマークアップであり、HTMLページ内に配置することができます。

6

SVGをHTMLページに貼り付ける。

• テキストエディタでHTMLページを開き、最後のステップでコピーしたコードのブロックをウェブページに貼り付けます。
• SVG タグは HTML マークアップの本文のどこにでも置くことができます。

7

ウェブブラウザで結果をチェックする

• ブラウザでウェブページを開くと、グラフィックがページに表示されます。
• グラフィックのサイズがすでに適切で、希望通りに表示される場合は、このステップで終了してかまいません。

8

SVGにclass属性を与える

• SVGにスタイリングのための説明的なclassを与えると便利です。
• SVGタグにすでにclass属性が存在する場合もあります。その場合は、既存の属性に class を追加するだけでよい。
• 例えば <svg ...

9

グラフィックのサイズが適切でない場合は調整する。

• ページ上でグラフィックが大きすぎたり小さすぎたりする場合は、CSSやHTML属性を使ってサイズを調整できます。
• SVGフォーマットの利点の一つは、品質を損なうことなくどんなサイズにも拡大縮小できることです。
• 例えば width="150" height="200" のように。引用符の中の値はグラフィックのピクセル寸法を示します。
• 別の方法として、SVGに割り当てたクラスをターゲットにしてCSSを使って寸法を設定することもできる。

10

SVG のマークアップを整理する。このステップにより、CSSを使ったスタイリングがより簡単になる。

• SVGのマークアップ内の各<g>タグは、あなたがグラフィックソフトで作成したグループを表している。
• SVGのタグにコメントするか、カスタムクラスを追加して、CSSでターゲットにできるようにする。

11

CSSを使ってSVGを修正する

• SVG は他の HTML 要素のように振る舞う様々なタグで構成されています。 スタイル付けのために style 属性と class 属性を与えることができます。
• SVG 内のパスや図形は、CSS で fill、stroke、stroke-width、その他多くのスタイルを編集できます。
• 例えば： .IceCream{ fill: blue; }.

12

結果をウェブブラウザで見てみましょう。

• 新しいスタイルはすべてウェブ・ブラウザで表示できるはずです。
• グラフィックに必要なスタイルがすべて揃うまで、ステップ10と11を繰り返してください。

この記事は、CC BY-NC-SAの下で公開されている「 How to Embeded an SVG in HTML 」を改変して作成した。特に断りのない限り、CC BY-NC-SAの下で利用可能です。