Basic SVG Shapes rect circle path

SVG uses a coordinate system where (0,0) is the top-left corner. X increases rightward; Y increases downward. The viewport is defined by the width and height attributes; the coordinate space is defined by the viewBox attribute.

Draw rectangles with <rect x="10" y="10" width="200" height="100" rx="8" ry="8">. rx and ry round the corners. Fill and stroke are controlled by fill and stroke attributes or CSS. Omitting x and y defaults to 0,0.