Flag of Hungary

• Using path based on the version on the Wikipedia

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600">
   <path d="M0   0 H1200 V200 H0" fill="#ce2939"/>
   <path d="M0 200 H1200 V400 H0" fill="#fff"/>
   <path d="M0 400 H1200 V600 H0" fill="#477050"/>
</svg>

A path can be used to define complex shapes, but in this case the shapes are rather simple. 3 rectangles. In the path element we can provide commands.

• M means move to (x,y) coordinates. So the first line say Move to coordinates (0, 0).
• H means move horizontally to the x coordinate. So H1200 means move to (1200, 0).
• V means move vertically to the y coordinate So V200 means to move (1200, 200).
• H0 means move to the x=0 coordinate.

Each path element also has a color associated with it in the fill attribute.

• Using rect In this solution we draw 3 rectangles of the appropriate width, height placing them at various y coordinates (x defaults to 0) and filling them with the appropriate color.

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600">
    <rect width="1200" height="200" y="0"   fill="#ce2939" />
    <rect width="1200" height="200" y="200" fill="#fff" />
    <rect width="1200" height="200" y="400" fill="#477050" />
</svg>