HTML with SVG concept

Scalable Vector Graphics (SVG) is a 2D vector image format based on an XML syntax.

The W3C began work on SVG in the late 1990s, but SVG only became popular when Internet Explorer 9 came out with SVG support. All major browsers now support SVG.

Based on an XML syntax, SVG can be styled with CSS and made interactive using JavaScript. HTML5 now allows direct embedding of SVG tags in an HTML document.

As a vector image format, SVG graphics can scale infinitely, making them invaluable in responsive design, since you can create interface elements and graphics that scale to any screen size. SVG also provides a useful set of tools, such as clipping, masking, filters, and animations.(Source:https://developer.mozilla.org/en-US/docs/Glossary/SVG)

----------------------------------------------------------------------------------------------------------------

Let's understand SVG with the help of following examples.

-------------------------------------------------------------------------------------------

1)HTML with SVG to draw circle.

                                                                            click the solution

2)HTML with SVG to draw rectangle

                                                                           click the solution

3)HTML with SVG to draw rectangle

                                                                            click the solution

4)HTML with SVG to draw ellipse.

                                                                            click the solution

5)HTML with SVG to draw line

                                                                            click the solution

6)HTML with SVG to draw polygon.

                                                                            click the solution

7)HTML with SVG to draw polyline

                                                                            click the solution

8)HTML with SVG to draw path

                                                                            click the solution

9)HTML with SVG to draw text

                                                                            click the solution

10)HTML with SVG to draw text.

                                                                            click the solution

11)HTML with SVG to animate object.

                                                                             click the solution

12)HTML with SVG to animate the circle.

                                                                              click the solution