SVGでオリンピックのマークを描く

SVGファイルとは？

SVG = Scalable Vector Graphics
画像フォーマットの一種で、ベクタ形式のデータ。
XMLに準拠、テキストエディタで編集可能。
JPEG、PNG画像形式は、点（pixel）で表現されたラスタ形式の画像。

SVG描画の基本

path要素
pathは複数の直線、曲線、弧を組み合わせて複雑な形状を作る。
path要素は、引数 d によって定義される。

<path d="M 10 10 H 90 V 90 H 10 V 10"/>

10,10が開始位置、x座標90、y座標90、x座標10、y座標10の位置へ。

g要素
SVG要素をグループ化。
g要素に適用された変形はその全ての子要素に対して実行される。

<g fill="blue" stroke="green" stroke-width="5">

Zコマンド
現在の位置からパスの始点である最初の点へ戻る直線を描画。

円柱

<svg xmlns="http://www.w3.org/2000/svg">
    <svg width="400" height="400">
        <ellipse cx="60" cy="135" rx="50" ry="25" fill="#111188" />
		<rect x="10" y="35" width="100" height="100" fill="#111188" />
        <ellipse cx="60" cy="35" rx="50" ry="25" fill="#2222DD" />
    </svg>
</svg>

オリンピックの五輪のマーク

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600">
	<path fill="#fff" d="M0 0h900v600H0z"></path>
	<g fill="none" stroke="#000" stroke-width="17.7">
		<circle cx="232.3" cy="253.5" r="91.6" stroke="#0081C8"></circle>
		<circle cx="450" cy="253.5" r="91.6"></circle>
		<circle cx="667.7" cy="253.5" r="91.6" stroke="#EE334E"></circle>
		<circle cx="341.2" cy="346.5" r="91.6" stroke="#FCB131"></circle>
		<circle cx="558.8" cy="346.5" r="91.6" stroke="#00a651"></circle>

		<path d="M305.6 198.5a91.6 91.6 0 0 1 0 109.9" stroke="#0081C8"></path>
		<path d="M523.3 198.5a91.6 91.6 0 0 1 0 109.9M450 345a91.6 91.6 0 0 1-55-18.3"></path>
		<path d="M667.7 345a91.6 91.6 0 0 1-55-18.3" stroke="#EE334E"></path>

	</g>
</svg>