What is SVG?
SVG stands for Scalable Vector Graphics and it is an XML-based markup language used for creating scalable 2D graphics and graphical applications. It is mostly useful for vector-type diagrams like Pie charts, and two-dimensional graphs in an X, Y coordinate system.
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.
Remember, 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 not.
SVG became a W3C Recommendation on 14 January 2003 and we can check latest version of SVG specification at SVG Specification. If you want to learn more about SVG, you can check out our dedicated SVG tutorial.
How to use SVG in HTML?
There are two ways of embedding the SVG files in HTML −
- Using <img> tag
- Using <svg> tag
Using <img> tag
We can directly embed the SVG files inside our web page using the src attribute of <img> tag as shown below. We can pass either the path or an online link to the svg image.
<img src = "yourfilename.svg" height = "100px" width = "200px" />Using <svg> tag
HTML allows embedding SVG directly using <svg>…</svg> tag which has the following syntax −
<svg><!-- code to create graphics --></svg>There are some predefined SVG elements that are used to draw various shapes like circles, rectangles, lines and so on. They are as follows −
- <rect>
- <circle>
- <ellipse>
- <line>
- <polyline>
- <polygon>
- <path>
The <svg> tag is the top level (root) element of the above mentioned tags. They are defined inside the svg element.
Some Common Attributes of SVG Elements
The following table contains a list of attributes of SVG Elements −
| S.No. | Attribute & Description |
|---|---|
| 1 | XThe top-left x-axis coordinate. |
| 2 | YThe top-left y-axis coordinate. |
| 3 | widthThe width of figure. |
| 4 | heightThe height of figure. |
| 5 | rxThe x-axis’ roundness. |
| 6 | ryThe y-axis’ roundness. |
| 7 | styleIndicate an inline style. |
HTML − SVG Circle
Following is the SVG example which would draw a circle using <circle> tag −
Example
<!DOCTYPE html><html><head><title>SVG</title><meta charset="utf-8" /></head><body><h2>HTML SVG Circle</h2><svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"><circle id="redcircle" cx="50" cy="50" r="50" fill="red" /></svg></body></html>HTML − SVG Rectangle
Following is the SVG example which would draw a rectangle using <rect> tag −
Example
<!DOCTYPE html><html><head><style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
</style><title>SVG</title><meta charset = "utf-8" /></head><body><h2 align = "center">HTML SVG Rectangle</h2><svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg"><rect id = "redrect" width = "300" height = "100" fill = "red" /></svg></body></html>HTML − SVG Line
Following is the SVG example which would draw a line using <line> tag. We can also use the style attribute which allows us to set additional style information like stroke and fill colors, width of the stroke, etc.
Example
<!DOCTYPE html><html><head><title>SVG</title><meta charset="utf-8" /></head><body><h2>HTML SVG Line</h2><svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="200" y2="100" style="stroke:red;stroke-width:2"/></svg></body></html>HTML − SVG Ellipse
Following is the SVG example which would draw an ellipse using <ellipse> tag −
Example
<!DOCTYPE html><html><head><title>SVG</title><meta charset="utf-8" /></head><body><h2>HTML SVG Ellipse</h2><svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"><ellipse cx="100" cy="50" rx="100" ry="50" fill="red" /></svg></body></html>HTML − SVG Polygon
Following is the SVG example which would draw a polygon using <polygon> tag −
<!DOCTYPE html><html><head><title>SVG</title><meta charset="utf-8" /></head><body><h2>HTML SVG Polygon</h2><svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"><polygon points="20,10 300,20, 170,50" fill="red" /></svg></body></html>HTML − SVG Polyline
Following is the SVG example which would draw a polyline using <polyline> tag −
Example
<!DOCTYPE html><html><head><title>SVG</title><meta charset="utf-8" /></head><body><h2>HTML SVG Polyline</h2><svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"><polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" /></svg></body></html>HTML − SVG Gradients
Following is the SVG example which would draw an ellipse using <ellipse> tag and would use <radialGradient> tag to define an SVG radial gradient.
Similarly, you can use <linearGradient> tag to create SVG linear gradient.
Example
<!DOCTYPE html><html><head><title>SVG</title><meta charset="utf-8" /></head><body><h2>HTML SVG Gradient Ellipse</h2><svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"><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-opacity:0"/><stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/></radialGradient></defs><ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" /></svg></body></html>HTML − SVG Star
Following is the SVG example which would draw a star using <polygon> tag.
Example
<!DOCTYPE html><html><head><style>
#svgelem{
position: relative;
left: 50%;
-webkit-transform: translateX(-40%);
-ms-transform: translateX(-40%);
transform: translateX(-40%);
}
</style><title>SVG</title><meta charset="utf-8" /></head><body><h2>HTML SVG Star</h2><svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"><polygon points="100,10 40,180 190,60 10,60 160,180" fill="red"/></svg></body></html>
Leave a Reply