Inline SVG

The following shapes are drawn with inline SVG.

Inline-SVG Code Snippet

<html>
    <svg id="svg-area" width="600" height="140" viewBox="0 0 2000 450">
        <rect x="100" y="20" width="100" height="335" fill="orange" stroke="blue" stroke-width="4" />
        <rect x="220" y="80" width="300" height="335" fill="blue" stroke="orange" stroke-width="8" />
        <rect x="-50" y="300" width="300" height="75" fill="red" stroke="#4B0082" stroke-width="4" transform="rotate(-30)"  />
        <circle id="myCircle1" class="important" cx="50%" cy="50%" r="200" fill="orange"/>
        <circle id="myCircle2" class="important" cx="58%" cy="50%" r="200" opacity="0.5" fill="blue" />
        <circle id="myCircle2" class="important" cx="70%" cy="50%" r="200" opacity="0.3" fill="red" />
    </svg>
    </html>