For example, SVG graphics are created using mathematical formulas. This requires much less data to be processed since you do not have to store data for each individual pixel. In addition, vector images scale much better. Distortion of an image can occur when scaling raster-based graphics. SVG images can also be changed dynamically, making them especially suited for data-driven applications, such as charts.

Support for SVG

Most of the web browsers that are in use today have support for displaying SVG images. Internet Explorer 9, Firefox, Opera, Chrome, and Safari support SVG. For Internet Explorer earlier than version 9, users may have to install the Adobe SVG Viewer to be able to view SVG in the browser.

SVG viewBox

The SVG viewBox is used when creating SVG shapes. The view box is part of the canvas you want the viewer to see. Do not confuse the width and height of the view box with the width and height you set for the SVG document. The width and height of the SVG element sets the size of the drawing canvas. The viewBox attributes uses four parameters: beginning x coordinate, beginning y coordinate, width of the view box, and height of the view box.

Basic Shapes

SVG images are generally created using an XML-based language. In HTML5, you can embed SVG elements directly into your HTML page. In this tutorial, we will show HTML of some basic shapes using the SVG and other related elements.

Circle

The element defines a circle based on a center point and a radius.

Ellipse

The element is nothing more than a circle that is defined with two radii.

Rectangle

The element defines a rectangle which is axis-aligned with the current user coordinate system. Rounded rectangles can be achieved by setting appropriate values for attributes rx and ry.

Line

The element defines a line segment that starts at one point and ends at another.

Polyline

The element allows you to create a drawing of multiple line definitions.

Polygon

The element defines a closed shape consisting of a set of connected straight line segments.

Example

The following example of code will draw various lines to form an interesting image. We can use the element to group the elements.