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
<svg><!-- code to create graphics --></svg>
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
Open Compiler
<!DOCTYPE html><html><head><title>SVG-Circle</title></head><body><h2>HTML SVG Circle</h2><svg height="500" ><circle cx="50"cy="50" r="50" fill="red" /></svg></body></html></pre>Draw a Rectangle in SVG Using <rect> Tag
The following SVG example demonstrates how to draw a rectangle using the
<rect>tag. Theheightandwidthattributes are used to define the dimensions of the rectangle.Example
Open Compiler
<!DOCTYPE html><html><head><title>SVG Rectangle</title></head><body><h2>HTML SVG Rectangle</h2><svg height = "200"><rect width = "300"height = "100" fill = "red" /></svg></body></html></pre>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, y1andx2, y2). Thestyleattribute can also be used to set additional styling, such as stroke color, fill color, stroke width, and more.Example
Open Compiler
<!DOCTYPE html><html><head><title>SVG Line</title></head><body><h2>HTML SVG Line</h2><svg height="200"><line x1="0" y1="0"x2="200" y2="100" style="stroke:red;stroke-width:2"/></svg></body></html></pre>Draw an Ellipse in SVG Using <ellipse> Tag
The following SVG example demonstrates how to draw an ellipse using the
<ellipse>tag. Here,cxandcyrepresent the coordinates of the center of the ellipse, whilerxandrydefine the radii along the x-axis and y-axis, respectively.Example
Open Compiler
<!DOCTYPE html><html><head><title>SVG Ellipse</title></head><body><h2>HTML SVG Ellipse</h2><svg height="200"><ellipse cx="100" cy="50"rx="100" ry="50" fill="red" /></svg></body></html></pre>Draw a Polygon in SVG Using <polygon> Tag
The following SVG example demonstrates how to draw an ellipse using the
<ellipse>tag. Here,cxandcyrepresent the coordinates of the center of the ellipse, whilerxandrydefine the radii along the x-axis and y-axis, respectively.Example
Open Compiler
<!DOCTYPE html><html><head><title>SVG</title></head><body><h2>HTML SVG Polygon</h2><svg height="200"><polygon points="20,10, 300,20, 170,50, 130,70"fill="red" /></svg></body></html></pre>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 thepointsattribute of the<polyline>tag.Example
Open Compiler
<!DOCTYPE html><html><head><title>SVG Polyline</title></head><body><h2>HTML SVG Polyline</h2><svg height="200"><polyline points="0,0 0,30 30,30 30,60 60,60"fill="red" /></svg></body></html></pre>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
Open Compiler
<!DOCTYPE html><html><head><title>SVG</title></head><body><h2>HTML SVG Gradient Ellipse</h2><svg height="200"><defs><radialGradient id="gradient"cx="50%" cy="50%" r="50%" fx="50%" fy="50%"><stop offset="0%" style="stop-color:rgb(200,200,200);"/><stop offset="100%" style="stop-color:rgb(0,0,255);"/></radialGradient></defs><ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" /></svg></body></html></pre>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 thepointsattribute of the<polygon>tag. Each point is defined by an (x, y) pair, and the points are connected to form the shape.Example
Open Compiler
<!DOCTYPE html><html><head><title>SVG star</title></head><body><h2>HTML SVG Star</h2><svg height="200"><polygon points="100,5 40,180 190,60 10,60 160,180"fill="red"/></svg></body></html></pre>
