SVG in HTML5

Abbreviation of SVG Scalable Vector Graphics and it is is used for 2D-graphics and graphical designed applications. SVG is commonly used to make diagrams like charts, Two-dimensional graphs in an X,Y coordinate system etc.

Circle using SVG

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="orange" stroke-width="4" fill="skyblue"/ >
</svg>

Explanation of above circle

to perform any action with SVG tag first of all put svg tag and then put other all code between svg tag.Here cx is for angal x-axes and cy is is for angal y-axes. while ry is for radius on angal y-axes.stroke is used for border and stroke width is for border width and fill is used for inner of svg shape.


Rectangle using SVG

<svg width="300" height="100">
<rect width="300" height="100" style="fill:lightgrey; stroke-width:5; stroke:blue"/>
</svg>

Explanation of above rectangle

As above example is given of a rectangle. Here first of all svg tag is used and between them width and height is used. There is special rect tag is used for rectangle.


Polygon using SVG

<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:brown;stroke:red;stroke-width:5;fill-rule:evenodd;" />
</svg>

Explanation of above polygon

As above example is given of a polygon. Here first of all svg tag is used and between them width and height is used. To show polygon there is polygon tag and in between this tag other all functions are performed.


Rounded Rectangle using SVG

<svg width="300" height="200">
<rect x="80" y="20" rx="20" ry="20" width="150" height="150" style="fill:lightgreen;stroke:black;stroke-width:2;opacity:0.5" />
</svg>










The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.


ads