Vector Graphics Editor
Create and Edit SVG online - Scalable Vector Graphics
open janvas...
SVG - Rectangle
The SVG "rect" tag create a rectangle element
The location of the rectangle is determined by the x and y attributes.
The size of the rectangle is determined by the width and height attributes.

References: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect


   <rect x="136.36"
y="71.039"
width="300"
height="200"
stroke-width="4"
stroke="#000000"
stroke-opacity="0.5"
fill="#FF0000"
fill-opacity="1"
/>

SVG - Ellipse
The ellipse centered position is specified by "cx" and "cy" attributes.
The radius in the x and y directions are specified by "rx" and "ry" attributes.
Setting the "rx" and "ry" attributes the same value would result in a regular circle.



    <ellipse cx="0"
cy="0"
rx="90"
ry="90"
stroke="#000000"
stroke-width="10"
stroke-opacity="0.5"
fill="#FF0000"
fill-opacity="1.0"
/>

SVG - Line
The SVG "line" tag create a line element
The line begins at the point set by the x1 and y1 attributes.
The line ends at the point set by the x2 and y2 attributes.

References: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line


<line x1="-87.6924"
y1="-19.5677"
x2="87.6924"
y2="19.5677"
stroke-width="10"
stroke-opacity="0.5"
stroke="#000000"
/>
SVG - Path
The SVG "path" tag is used to draw shapes combined from lines, arcs, curves etc..
All drawing commands are specified inside the "d" attribute.

References: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path


   <path d="M -106.18 8.19
C -89.89 -27.20 -81.74 -44.89 -81.74 -44.89
C -81.74 -44.89 15.16 -42.08 25.282 0.60
Z"
stroke-width="10"
stroke-opacity="0.5"
stroke="#000000"
fill="#FF0000" />