HTML Graphics With SVG

• The main challenging drawing program for SVG is FLASH.
• Flash depends on other technologies like XSL and DOM. In that case, SVG plays a role like an open source drawing program.
• SVG images are scalable, zoomable and can be printed with high quality at any resolution.
• SVG files are complete XML files, so it can be easily developed with the help of HTML and Basic XML knowledge.
• SVG can be created with any text editor, but Inkscape is a more convenient drawing program for it.

How to Code SVG?

An SVG image begins with <svg> tag and closing with </svg> tag. Make sure all the elements in SVG can be closed properly because it is written in XML.

Example 1 - DRAW A CIRCLE

Let’s draw a circle with SVG element,

Firstly, to draw any shape we need to create an SVG element with two attributes: width and height.

Still there is nothing going to be applied on an output screen.

In SVG file there is every element and any attribute can be animated.

In this code, there are a few attributes which are new for us,

With the use of<ellipse> element, we can create an oval shape.

In this example, we will see two more attributes of the rectangle shape: width and height. It defines the width and height of the rectangle.

Let’s draw a rectangle with SVG element,

In the previous example, we have seen attributes of rectangle shapes: width and height. It defines the width and height of the rectangle. Now, we will see two more attributes: rx: horizontal radius and ry: vertical radius, to draw rounded corners of the rectangle.

Let’s draw a rounded rectangle with SVG element,