SVG Shapes

01. Circle

<svg width="100" height="100">
  <circle cx="50" cy="50" r="48"
    stroke="red" stroke-width="2" fill="yellow" />
</svg>

02. Rectangle

<svg width="400" height="200">
  <rect width="400" height="200"
    style="fill:grey;stroke-width:3;stroke:blue;" />
</svg>

03. Circle

<svg width="120" height="120">
  <circle cx="60" cy="60" r="50"
    stroke="black" stoke-width="1" fill="violet" />
</svg>

04. Ellipse

<svg width="400" height="150">
  <ellipse cx="200" cy="75" rx="150" ry="70"
    style="fill:blue;stroke-width:5;stroke:grey;" />
</svg>

05. Line

<svg width="400" height="200">
  <line x1="0" y1="10" x2="300" y2="190"
    style="stroke:crimson;stroke-width:3" />
</svg>

06. Polygon

<svg width="400" height="240">
  <polygon points="10,20 200,30 150,200"
    style="fill:red;stroke:blue;stroke-width:1" />
</svg>

07. Polyline

<svg width="400" height="240">
  <polyline points="10,20 200,30 150,200 210,100"
    style="fill:gray;stroke:black;stroke-width:3" />
</svg>

08. Path

<svg width="300" height="200">
  <path d="M150 0 L75 190 L225 200 Z" />
</svg>

09. Text

<svg width="250" height="125">
  <text x="10" y="15" fill="red">Sample text</text>
</svg>

10. Stroke properties

<svg width="240" height="240" viewBox="0 0 6 6">
  <g fill="none" stroke="grey" stroke-width="2">
    <path d="M1 1 8 0" stroke-linecap="butt" />
    <path d="M1 3 8 0" stroke-linecap="round" />
    <path d="M1 5 8 0" stroke-linecap="square" />
  </g>
  <path d="M1 1 L8 0 M1 3 L8 0 M1 5 L8 0"
    stroke="red" stroke-width="0.05" />
</svg>

11. Blur effects

<svg height="120" width="120">
  <defs>
    <filter id="filter1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="100" height="90"
    stroke="green" stroke-width="4" fill="blue" filter="url(#filter1)" />
</svg>

12. Drop shadow

<svg height="160" width="160">
  <defs>
    <filter id="filter4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
        values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="100" height="100"
    stroke="blue" stroke-width="3" fill="red" filter="url(#filter4)" />
</svg>

13. Linear gradient

<svg height="140" width="300">
  <defs>
    <LinearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,255,255);stop-opacity:1" />
    </LinearGradient>
  </defs>
  <ellipse cx="150" cy="70" rx="90" ry="60" fill="url(#grad1)" />
</svg>

14. Radial gradient

<svg height="140" width="300">
  <defs>
    <RadialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </RadialGradient>
  </defs>
  <ellipse cx="150" cy="70" rx="90" ry="60" fill="url(#grad2)" />
</svg>