Scalable Vector Graphics
➔ SVG defines vector based graphics in XML format.
➔ SVG graphics do not loose image quality if zoom in or zoom out.
➔ XML file can be created using any text editor.
➔ It is a W3C recommendation.
SVG Line
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<h2>HTML SVG Example</h2>
<svg height="250" width="600">
<line x1="10" y1="10" x2="400" y2="100" style="stroke:rgb(255,0,0);stroke-width:3" />
</svg>
Click on the "See output" button to see how it works.
SVG Circle
Example
<h2>HTML SVG Circle Example</h2>
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey">
<circle cx="50" cy="50" r="40" />
<circle cx="150" cy="50" r="4" />
<svg viewBox="0 0 10 10" x="200" width="100">
<circle cx="5" cy="5" r="4" />
</svg>
</svg>
Click on the "See output" button to see how it works.
SVG Rectangle
Example
<h2>HTML SVG Rectangle Example</h2>
<svg width="200" height="100">
<rect width="200" height="100" stroke="red" stroke-width="4" fill="blue" />
</svg>
Click on the "See output" button to see how it works.
SVG Polygon
Example
<h2>HTML SVG Polygon Example</h2>
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:red;stroke:gray;stroke-width:5;fill-rule:nonzero;" />
</svg>
Click on the "See output" button to see how it works.