svg rect

predefined shapes Link to heading

There are at least seven predefined SVG shape elements that can be used, which are rectangle, circle, ellipse, line, polyline, polygon, and path (W3Schools, 2023). Here the first shape element is presented, rectangle rect element.

svg Link to heading

• Default values
  • width="300"
  • height="150"

rect, width, height Link to heading

• Code

  {{< html >}}
  <svg style="background: #eee;">
    <rect width="50" height="50"></rect>
  </svg>
  {{< /html >}}
  

• Result

rect, x, y Link to heading

• Code

  {{< html >}}
  <svg style="background: #eee;">
    <rect x="80" y="40" width="50" height="50"></rect>
  </svg>
  {{< /html >}}
  

• Result

rect, stroke, color, opacity (fill: none) Link to heading

• Code

  {{< html >}}
  <svg style="background: #eee;">
    <rect x="40" y="25" width="100" height="60"
    style="
      stroke: blue;
      stroke-width: 2px;
      fill: none;">
    </rect>
    <rect x="70" y="45" width="100" height="60"
    style="
      stroke: blue;
      stroke-width: 2px;
      fill: none;">
    </rect>
    <rect x="120" y="65" width="100" height="60"
    style="
      stroke: blue;
      stroke-width: 2px;
      stroke-opacity: 0.5;
      fill: none;">
    </rect>
  {{< /html >}}
  

• Result

rect, fill, color, opacity Link to heading

• Code

  {{< html >}}
    <rect x="40" y="25" width="100" height="60"
    style="
      fill: lightblue;">
    </rect>
    <rect x="70" y="45" width="100" height="60"
    style="
      fill: blue;
      fill-opacity: 0.2;">
    </rect>
    <rect x="120" y="65" width="100" height="60"
    style="
      fill: blue;
      fill-opacity: 0.5;">
    </rect>
  {{< /html >}}
  

• Result

rect, animate Link to heading

• Code

  {{< html >}}
  <svg style="background: #eee;">
    <rect x="0" y="50" width="50" height="50">
      <animate
        attributeName="x"
        from="0" to="300"
        begin="0s" dur="2s"
        repeatCount="indefinite" />
    </rect>
  </svg>
  {{< /html >}}
  

• Result

rect, rotate Link to heading

• Code

  {{< html >}}
  <svg style="background: #eee;">
    <rect x="150" y="75" width="50" height="50">
      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 150 75" to="360 150 75"
        begin="0s" dur="3s"
        repeatCount="indefinite" />
    </rect>
  </svg>
  {{< /html >}}
  

• Result

rect, scale Link to heading

• Code

  {{< html >}}
  <svg style="background: #eee;">
    <rect x="0" y="0" width="50" height="50">
      <animateTransform
        attributeName="transform"
        type="scale"
        from="1 1" to="6 3"
        begin="0s" dur="3s"
        repeatCount="indefinite" />
    </rect>
  </svg>
  {{< /html >}}
  

• Result