HTML - SVG
HTML - SVG
HTML SVG Graphics
HTML SVG (Scalable Vector Graphics) is used to define vector graphics in XML that can be embedded into HTML pages. SVG is different from normal images because it retains its quality even when zoomed in.
XML is an abbreviation that stands for Extensible Markup Language, and it is a data description language. It does not have any predefined tags; hence, the users are required to define their own tags depending on the need.
What is SVG?
-
SVG stands for Scalable Vector Graphics.
-
SVG helps us to draw any type of images using XML coding.
-
Zooming an XML vector does not lose its quality.
-
It is mostly useful for vector-type diagrams like pie charts and two-dimensional graphs in an X, Y coordinate system.
-
SVG became a W3C Recommendation on 14 January 2003.
Bitmap vs. Scalable Vector Graphics
The PNG, GIF, and JPG files are bitmap graphics and SVG files are vector graphics. The main difference between these two is that bitmap graphics are made up of a grid of tiny pixels but, vector graphics are defined by coding hence vector graphics does not lose quality after zooming.
How to Use SVG in HTML?
You can use (embed) SVG graphics in two ways:
-
Using
<img>tag -
Using
<svg>tag
1. Embedding SVG in HTML Using <img> Tag
You can embed an SVG file in the HTML document using the <img> tag by specifying the file name along with the path in the src attribute. You can also define a direct URL to the SVG image.
Example
An SVG file can be embedded as follows:
<img src = "svg_file_name.svg" alt="Alternate Text" />2. Embedding SVG in HTML Using <svg> Tag
HTML allows embedding SVG directly by using the <svg>…</svg> tag, which has the following syntax:
Syntax
Predefined SVG Elements for Drawing Shapes
There are some predefined SVG elements that are used to draw various shapes like circles, rectangles, lines, and so on. They are as follows:
| Tags | Description |
|---|---|
<rect> | Used to define a rectangle in vector graphics for a given width and height as attributes. |
<circle> | Used to define a circle for given coordinates of the top-left corner and radius as an attribute. |
<ellipse> | Used to define an ellipse for given coordinates of the top-left corner, the length of the major axis, and the length of the minor axis as attributes. |
<line> | Used to draw a line for the given two coordinates as an attribute. |
<polyline> | Used to define a polyline for given coordinates of a series of connected points. |
<polygon> | Used to define a polygon for given coordinates that joins in a straight line. |
The <svg> tag is the top-level (root) element of the abovementioned tags. They are defined inside the SVG element.
Common Attributes of SVG Elements
The following table contains a list of attributes of SVG elements:
| Attribute | Description |
|---|---|
| X | The top-left x-axis coordinate. |
| Y | The top-left y-axis coordinate. |
| width | The width of the rectangle figure. |
| height | The height of the rectangle figure. |
| rx | The x-axis’ roundness of the ellipse. |
| ry | The y-axis’ roundness of the ellipse. |
| style | Indicate an inline style. |
Draw a Circle in SVG Using <circle> Tag
The following SVG example demonstrates how to draw a circle using the <circle> tag inside an SVG element. Here, cx represents the x-coordinate of the top-left corner of the circle, and cy represents the y-coordinate of the top-right corner of the circle.
Example
Draw a Rectangle in SVG Using <rect> Tag
The following SVG example demonstrates how to draw a rectangle using the <rect> tag. The height and width attributes are used to define the dimensions of the rectangle.
Example
Draw a Line in SVG Using <line> Tag
The following SVG example demonstrates how to draw a line using the <line> tag with the provided coordinates of two points ( x1, y1 and x2, y2 ). The style attribute can also be used to set additional styling, such as stroke color, fill color, stroke width, and more.
Example
Draw an Ellipse in SVG Using <ellipse> Tag
The following SVG example demonstrates how to draw an ellipse using the <ellipse> tag. Here, cx and cy represent the coordinates of the center of the ellipse, while rx and ry define the radii along the x-axis and y-axis, respectively.
Example
Draw a Polygon in SVG Using <polygon> Tag
The following SVG example demonstrates how to draw an ellipse using the <ellipse> tag. Here, cx and cy represent the coordinates of the center of the ellipse, while rx and ry define the radii along the x-axis and y-axis, respectively.
Example
Draw a Polyline in SVG Using <polyline> Tag
The following SVG example demonstrates how to draw a polyline using the <polyline> tag. The coordinates of the connected points are provided in the points attribute of the <polyline> tag.
Example
Apply Fill Color Gradient to Shapes in SVG
The following SVG example demonstrates how to draw an ellipse using the <ellipse> tag and use the <radialGradient> tag to define an SVG radial gradient.
Similarly, you can use the <linearGradient> tag to create an SVG linear gradient.
Example
Draw a Star in SVG Using <polygon> Tag
The following SVG example demonstrates how to draw a polygon using the <polygon> tag. The coordinates of the polygon’s vertices are provided in the points attribute of the <polygon> tag. Each point is defined by an (x, y) pair, and the points are connected to form the shape.