DONT ADD ANYTHING HERE!

Notes

<rect x y width height rx ry />
  1. The rect element is a basic SVG shape that draws rectangles, defined by their position, width, and height
  2. The rectangles may have their corners rounded
  3. x
    1. The x coordinate of rect
    2. value type
      1. length
      2. percentage
    3. default value: 0
  4. y
    1. The y coordinate of rect
    2. value type
      1. length
      2. percentage
    3. default value: 0
  5. width
    1. The width of rect
    2. value type
      1. auto
      2. length
      3. percentage
    3. default value: auto
  6. height
    1. The height of rect
    2. value type
      1. auto
      2. length
      3. percentage
    3. default value: auto
  7. rx
    1. The horizontal corner radius of rect
    2. Defaults to ry if it is specified
    3. value type:
      1. auto
      2. length
      3. percentage
    4. default value: auto
  8. ry
    1. The vertical corner radius of the rectangle
    2. Defaults to rx if it is specified
    3. value type: auto, length or percentage
  9. pathLength
    1. The total length of the rectangle's perimeter, in user units
    2. value type: number
    3. default value: none
  10. Starting with SVG2, x, y, width, height, rx and ry are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.

Code

HTML

<div class="flex_container">
    <object 
        data="../svg/svg_example_one.svg" 
        type="image/svg+xml">
    </object>
</div>

SVG

// svg_example_one.svg

<svg version= "1.1" 

     width = "300"
     height = "150"
     xmlns = "http://www.w3.org/2000/svg">

    <rect  width="100%" 
           height="100%" 
           fill="lightgoldenrodyellow" />

    <rect  x="10" 
           y="10" 
           width="50%" 
           height="66.666%" 
           fill="blue" />

    <rect  x="20" 
           y="20" 
           width="13.333%" 
           height="26.666%" fill="lightgoldenrodyellow" />

    <rect  x="240" 
           y="90" 
           width="13.333%" 
           height="26.666%" 
           stroke="red" 
           stroke-width="2" 
           fill="none" />

</svg>

References

MDN rect
W3C: Scalable Vector Graphics (SVG) 2 W3C Editor's Draft 08 March 2023