Drawing a Circle using SVG

attr-cx
attr-cy
r
fill

The circle element is an SVG basic shape, used to create circles based on a center point and a radius

<svg width="300" height="200">
	<circle cx="{{model.cx}}" cy="{{model.cy}}" r="{{model.r}}" fill="{{model.fill}}" />
</svg>
				

Drawing a Rectangle using SVG

attr-x
attr-y
attr-width
attr-height
fill

The rect element is an SVG basic shape, used to create rectangles based on the position of a corner and their width and height. It may also be used to create rectangles with rounded corners.

<svg width="300" height="200">
 <rect x="{{model.x}}" y="{{model.y}}" width="{{model.width}}" height="{{model.height}}" fill="{{model.fill}}"/>
</svg>

Drawing an Ellipse with Svg

attr-cx
attr-cy
attr-rx
attr-ry
fill

The ellipse element is an SVG basic shape, used to create ellipses based on a center coordinate, and both their x and y radius.

<svg width="300" height="200">
 <ellipse cx="{{model.cx}}" cy="{{model.cy}}" rx="{{model.rx}}" ry="{{model.ry}}" fill="{{model.fill}}" />
</svg>

Drawing an Line with Svg

attr-x1
attr-y1
attr-x2
attr-y2
attr-y2
stroke

The line element is an SVG basic shape, used to create a line connecting two points.

<svg width="300" height="200">
 <line x1="{{model.x1}}" y1="{{model.y1}}" x2="{{model.x2}}" y2="{{model.y2}}" stroke="{{model.stroke}}" stroke-width="{{model.strokeWidth}}"/>
</svg>