コンピュータサイエンス入門・トップへ

SVG入門

[基本構造] [XML名前空間について] [基本的な図形] [CSSとの組み合わせ] [グループ化] [拡大縮小・移動・回転] [再利用] [画像の挿入] [SVGを作成するツール]

SVGとは

Scalable Vector Graphics の略。 XMLの一種。 図形を記述することができる。 現在はメジャーなブラウザでサポートされている。

基本構造

XHTMLの一部として埋め込む方法:

<!DOCTYPE html>
<html>
<body>
  <p> ふつうの文章。
  <svg xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink"
       version="1.1" width="300" height="120">
    <rect x="10" y="10" width="200" height="100" fill="none" stroke="black" />
    <text x="110" y="60" text-anchor="middle">よう</text>
  </svg>
</body>
</html>

出力例:

ふつうの文章。 よう

画像として使用する

SVGは、HTMLの <img src="..."> タグの画像として利用することもできる。 

<img src="octocat.svg" alt="オクトキャット" width="100" />

出力例:

オクトキャット

XML名前空間について

XMLでは、複数の異なる規格が、ひとつの文書中に混在することがある。

各タグや属性がどの規格に従って解釈されるべきかを区別するために、 タグ名や属性に「名前空間 (namespace)」がついている。

<html> ... (← XHTMLの規格で定義されている)
<svg> ... (← SVGの規格で定義されている)

名前空間の例:

注意:

名前空間は URL のように見えるが URL ではない。 実際には名前空間はどのような文字列でもよく、 ここでは全世界で一意であることを保証するために慣例としてURL 風の文字列を使っている。

例:

<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>
は、以下の例と同じ: 
<foo:svg xmlns:foo="http://www.w3.org/2000/svg">
...
</foo:svg>

基本的な図形

矩形 (rect)

<rect x="10" y="10" width="100" height="80" fill="none" stroke="black" stroke-width="2" />
<rect x="80" y="60" width="50" height="40" fill="yellow" stroke="blue" stroke-width="4" />

色の指定は HTML と同様に black、 #ffddff などとする。

直線 (line)

<line x1="10" y1="10" x2="100" y2="80" stroke="black" stroke-width="2" />

多角形 (polygon)

<polygon points="10,90 50,10 90,90" fill="green" stroke="black" stroke-width="2" />

円と楕円 (circle, ellipse)

<circle cx="50" cy="50" r="40" fill="none" stroke="black" stroke-width="2" />
<ellipse cx="200" cy="50" rx="80" ry="40" fill="red" stroke="black" stroke-width="2" />

文字の描画

<rect x="10" y="10" width="200" height="80" fill="none" stroke="black" />
<text x="10" y="40" text-anchor="start">左寄せ</text>
<text x="110" y="60" fill="red" text-anchor="middle">中央寄せ</text>
<text x="210" y="80" fill="white" stroke="black" text-anchor="end">右寄せ</text>
左寄せ 中央寄せ 右寄せ

注意: HTMLと違い、複数行にわたる文字は一度に書けない。

CSSとの組み合わせ

どの要素 (おもに <text>) も、 style="..." で CSS 属性をつけることができる。 

<text x="0" y="40" style="font-style: italic;">斜体</text>
<text x="100" y="80" style="font-size: 200%;">大きな文字</text>
斜体 大きな文字

グループ化

<g> 〜 </g> で囲んだ部分は、 同じ属性値が適用される。 

<g fill="none" stroke="blue" stroke-width="1">
  <rect x="10" y="10" width="50" height="30" />
  <line x1="35" y1="25" x2="100" y2="50" />
  <circle cx="100" cy="50" r="30" />
</g>

拡大縮小・移動・回転

要素に transform="..." 属性をつけると、 その図形を変形させることができる。 (グループ化した図形に対しても有効。) 

<g fill="none" stroke="black" stroke-width="2" transform="translate(100,50)">
  <circle cx="0" cy="0" r="40"/>
  <rect x="50" y="-50" width="80" height="40" transform="rotate(30)" />
</g>
<text x="0" y="20" transform="scale(4,2)">HELLO</text>
HELLO

ひとつの transform 属性の中に 複数の指定を空白で区切って入れることも可能。

再利用

すべての要素には id="..." 属性をつけておき、何度でも再利用できる。

一度定義した図形を利用するには <use /> タグを使う。 

<polygon id="star" points="25,90 90,40 10,40 75,90 50,10" 
         fill="none" stroke="black" stroke-width="3" />
<use xlink:href="#star" transform="translate(150,10)" />
<use xlink:href="#star" transform="translate(150,0) rotate(45) " />

矢印を描く

さらに応用として、<marker> タグがある。 これは線の終端で利用する図形を定義する。 

<marker id="arrow" viewBox="-5 -5 10 10" orient="auto">
  <polygon points="-5,-5 5,0 -5,5" fill="black" stroke="none" />
</marker>
<line x1="10" y1="20" x2="100" y2="20" 
      stroke="black" stroke-width="4" marker-end="url(#arrow)" />

画像の挿入

<image x="0" y="0" width="320" height="220" xlink:href="image.jpg" />
<text x="160" y="200" text-anchor="middle" fill="white"
      style="font-weight: bold; font-size: 24px;">
  United States Capitol Dome
</text>
United States Capitol Dome

SVGを作成するツール

手で全部入力するのが面倒くさいときは、 ツールで作成して貼りつければよい。

アプリケーション

オンライン

参考資料

Copyright (c) 2015 Yusuke Shinyama