Hello Readers,

Today's topic is how to create a SVG?- Every shapes in SVG are based on coordinates (x and y axis). So if you want to edit ,create and script, you have to know about coordinates.

SVG has pre define shape like,

1) Circle
2) Rectangle
3) Polyline
4) Polygon
5) Ellipse
6) Line
7) Path

For example:-

<svg height="" width="">
    <rect x="" y="" width="" height="" fill="" stroke="" stroke-width=""/>
    <circle r="" cx="" cy="" fill="" stroke="" stroke-width=""/>
    <ellipse rx="" ry="" cx="" cy="" fill="" stroke="" stroke-width=""/>
    <polygon points="" fill="" stroke="" stroke-width=""/>
    <line x1="" y1="" x2="" y2="" stroke="" stroke-width=""/>
    <path d="" stroke-width="" stroke="" fill=""/>
</svg>

Here X = is the value of x axis and y= is the value of y axis
fill = is work like css's background-color mean to fill color on background
stroke define the object strock
stroke-width = for thickness of stroke.
stroke-opacity = stroke opacity

Circle have not height and width so height and width define is by,
r = Radius, cx and cy same as x and y
rx = for horizontal radius and ry = vertically radius
points = is depands on your shape its write like (points="0,90 10,140 90,120")
Its a path for triangle the and every point is show x and y axis distance (points="x,y x,y x,y")
and for line x1 and y1 are start point of their coordinates and x2,y2 are end points.

Path

I think it's an important tag of SVG because you can make every type of shape using this

<path d="" stroke-width="" stroke="" fill=""/>

d= Its show the path direction L = for start next direction, M = start point, H = horizontal lineto, V = vertical lineto, C = curveto, S = smooth curveto, Q = for quadraticurve T = smooth quadratic Bzier curveto, A = ellipse arc, Z = end point

Note:- SVG has about 270 type of attributes.

An example of shapes: