SVG

svg.png

何倍拡大しても美しいまま、なイケてる画像形式

Hello World

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="628" width="726">
<polygon points="723,314 543,625.769145 183,625.769145 3,314 183,2.230855 543,2.230855 723,314" fill="white" stroke="black" stroke-width="4"/>
</svg>

図形にリンクを貼る

<g id="node1" class="node"><title>ディスプレイリスト</title>
<g id="a_node1"><a xlink:href="/ja:opengl:displaylist" xlink:title="幾何形状を保持する。" xlink:show="new">
<polygon fill="yellowgreen" stroke="greenyellow" points="138.5,-145 73.5,-145 73.5,-109 138.5,-109 138.5,-145"/>
<text text-anchor="middle" x="106" y="-124.8" font-family="sans-serif" font-size="9.00">ディスプレイリスト</text>
</a>
</g>
</g>

xlink:show="new"

属性を加えれば、新しいタブに表示してくれる。

HTMLに外部SVGを埋め込む

<img src="yourfile.svg">

↑この方法は、外部CSSを読み込んでるSVGのスタイルが効かなくなります。
 <object type="image/svg+xml" data="context.svg"></object>

↑こっちの方法は外部CSSを見込んだSVGでの描画できるのがメリット。
Bibliography
3. 才色兼備なSVGが魅せるwebの未来….SVGでできることがわかりやすく説明してあります!

vector-graphics

サポートサイト Wikidot.com vector-graphics