Loading Please Wait...
HTML SVG (Scalable Vector Graphics) is used to draw vector based 2d graphics on the HTML documents.
<svg> element is the main container for SVG graphics. It has various elements (method) to define different types of graphics like, path, circle, rectangle, etc.
<line> element creates a line.
<svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:#a3dea6;stroke-width:2" />
</svg>
<rect> element creates a rectangle and square.
<svg width="300" height="200">
<rect width="250" height="150" style="fill:#dea4fe;stroke-width:3;stroke:#fa4233" />
</svg>
<br/>
<svg height="100" width="100">
<rect width="100" height="100" style="fill:#fa4233;stroke-width:3;stroke:#dea4fe" />
</svg>
<circle> element creates a circle.
<ellipse> element creates a ellipse.
<svg height="300" width="300">
<circle cx="150" cy="150" r="100" stroke="black" stroke-width="4" fill="red" />
</svg>
<br/>
<svg height="300" width="300">
<ellipse cx="150" cy="150" rx="100" ry="75" stroke="black" stroke-width="4" fill="red" />
</svg>
<svg height="200" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#7f00ff;stop-opacity:1" />
<stop offset="100%" style="stop-color:#e100ff;stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="75" rx="150" ry="75" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="122" y="88">Lynxsia</text>
</svg>
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved