SVGクックシート(よく使うサンプル集)

SVG(Scalable Vector Graphics)はXMLをベースとした2次元ベクターイメージ用画像形式です。以前のWebにおいては外部ファイルに置いてObject要素で指定しなければいけないなど煩雑でしたが、近年においては大抵のXHTML/HTML5ブラウザでHTMLドキュメント内記述が可能になり気軽に利用できる様になりました。

ここではよく使うサンプルと出力結果を紹介します。

注意事項

SVGタグのネームスペースが省略してあります。実際には以下の様に指定します（HTML5では省略可能です)

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

viewboxとwidth/height属性が省略されています。実際の使用での表示範囲は以下の様に記述します。width/heightはボックスのサイズを、viewboxは表示する範囲(X,Y,WIDTH,HEIGHT)を指定します。特に範囲指定する必要がない場合はviewportは省略可能です。

<svg viewbox='0 0 200 100' width='100' height='100'>

また、属性値のクォートも省略してあります。

直線

<svg>
    <line x1=0 y1=10 x2=100 y2=30  stroke-width=3 stroke='black' />
</svg>

↓

四角形

<svg>
    <rect x=30 y=20 width=50 height=60 fill='blue' />
</svg>

↓

円

<svg>
    <circle cx=50 cy=50 r=30 fill='#ff0000' />
</svg>

↓

楕円

<svg>
    <ellipse cx=50 cy=50 rx=10 ry=30 fill='#FF0' />
</svg>

↓

連続線

<svg>
    <polyline points='0,0 50,10 50,60 80,80' stroke-width=4 fill='none' stroke='#00F' />
</svg>

↓

fillのnoneを指定しないと塗りつぶしが起こるので注意してください。

多角形

<svg>
    <polygon points='0,0 80,10 60,60 10,80' fill='#0FF' />
</svg>

↓

テキスト

<svg>
    <text x=10 y=20>テキスト</text>
</svg>

↓

テキスト(オプションと改行)

<svg>
    <text x=0 y=20 font-size=20 font-family='helvetica' font-weight='lighter' fill='gray' text-anchor='middle' >
        <tspan x=50 y=20>Kanazawa</tspan>
        <tspan x=50 y=40>System</tspan>
        <tspan x=50 y=60>Service</tspan>
    </text>
</svg>

↓

改行は上記の様にtspanを使って調整します。その他様々な指定が可能です。参考リンクを参照ください。

角丸四角形

<svg>
    <rect x=30 y=20 width=50 height=60 rx=10 ry=10 fill='blue' />
</svg>

↓

回転

<svg>
    <g transform='rotate(30,55,50)' >
        <rect x=30 y=20 width=50 height=60 rx=10 ry=10 fill='blue' />
    </g>
</svg>

↓

gはグループ化の要素でrotateは回転です。上記はx:55,y:50を中心に30度回転させるという指定です。

画像

<svg>
    <image xlink:href='new.png' x=10 y=10 width=50 height=50 />
</svg>

↓

アスペクトレシオの調整指定等も可能です。参考リンクを参照してください。

参考リンク

ここで挙げたサンプルはあくまでよく使う一例です。SVGには他にもマーカー/パス/グラデーション/マスク/フィルタ/HTML埋め込みなど様々な表現があります。さらに詳しく知りたい方は以下のリンクをご覧下さい。

この記事を見た人がよく読んでいる記事

節約テクノロジ >

トップページ

節約テクノロジ > SVGクックシート(よく使うサンプル集)