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.