DONT ADD ANYTHING HERE!

Code

HTML

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

SVG

// svg_example_one_path.svg

<svg version= "1.1" 

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

    <path d="M 0 0 H 300 V 150 H 0 Z" 
          fill="lightgoldenrodyellow" />

    <path d="M 10 10 H 160 V 110 H 10 Z" 
          fill="blue" />
    
    <path d="M 20 20 H 60 V 60 H 20 Z" 
          fill="lightgoldenrodyellow"/>

    <path d="M 240 90 H 280 V 130 H 240 Z" 
          fill="transparent" 
          stroke="red" 
          stroke-width="2" />

</svg>

Notes

  1. M
    1. Move To
    2. M x y
    3. M 20 20
  2. L
    1. Draw Line
    2. L x y
    3. Or: l dx dy
    4. L 20 20
  3. H
    1. Horizontal Line
    2. H x
    3. Or: h dx
    4. H 230
  4. V
    1. Vertical Line
    2. V x
    3. Or: v dx
    4. V 30
  5. Z
    1. Close path
    2. Z
    3. Or: z
    4. No difference between Z and z

References

MDN: Paths