SVGで四角形、正方形、長方形を描くときのサンプルを紹介します。
rectタグが用意されており、簡単にかけます。
<svg width="100" height="100">
<rect width="100" height="100" style="fill:red"/>
</svg>
枠線ありの場合
<svg width="70" height="100">
<rect width="70" height="100" style="fill:#00F;stroke:black;stroke-width:3"/>
</svg>
影をつけたい場合は、SVGで計算して複雑な記述を描くより、CSS3を使うほうが実用的です。
<svg width="100" height="70">
<rect width="100" height="70" style="fill:#0F0;" id="MyRect"/>
</svg>
<style>
#MyRect{
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}
</style>
