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,

With the help of <rect> element we can also draw a square shape.

To draw a line on a screen we have to focus on the coordinates of the screen with the measurements: (x1,y1) these are the start coordinates of the line, and (x2,y2) are the end coordinates of the line.

Let’s draw a line with <line> SVG element,

Polyline is a shape that is built from multiple lines. Polyline seems like a check sign. In this element, we will introduce an attribute point: which is polyline’s coordinates.

Let’s draw a polyline with <polyline> SVG element,

As we saw in the previous SVG <ployline> element, with the help of Points of the <polygon> element we can create a star shape according to our assumptions and requirements of choices. Again Points are the coordinates of the star.

Let’s draw a star with <polylgon> SVG element,

Summary

In this article, we learned about the HTML Graphics: SVG with different shapes using the different elements of SVG.