HTML SVG: Guide to Scalable Vector Graphics
HTML SVG is a combination of two technologies:
- HTML – HTML stands for Hypertext Markup Language, which is the standard markup language used for creating web pages.
- SVG – SVG is a markup language used for creating vector graphics.
By combining both, it is possible to create web pages with scalable vector graphics that are displayed in a browser.
In this article, we will explore the basics of HTML SVG and how to create scalable vector graphics using examples.
HTML SVG: What is it?
Scalable Vector Graphics, or SVG, is a popular file format used for creating vector graphics that can be scaled up or down without any loss of quality.
SVG is an XML-based markup language, and it is used to create vector-based images that can be displayed on the web.
SVG images are different from other image formats like JPEG or PNG, which are raster-based.
Raster-based images are made up of individual pixels, and when you scale them up, they become pixelated.
SVG images, on the other hand, are made up of vector shapes, which can be scaled up or down without losing any quality.
HTML SVG – Getting Started
To use SVG in HTML, you need to add the <svg> tag to your code.
The <svg> tag is used to define a container for SVG graphics. Inside the <svg> tag, you can add various shapes and elements using other SVG tags, such as <rect>, <circle>, <line>, and <path>.
Here is an example of a basic SVG code:
<svg width="100" height="100"> <rect x="10" y="10" width="80" height="80" /> </svg>
Above code will create a 100×100 SVG container and add a rectangle to it. The rectangle has an x-coordinate of 10, a y-coordinate of 10, a width of 80, and a height of 80.
HTML SVG Attributes
HTML SVG elements can have various attributes that define their appearance and behavior.
Below are some of the most common attributes used in SVG:
| Attributes | Overview |
| width and height | These attributes define the size of the SVG container. |
| fill and stroke | The fill attribute sets the color of the interior of the element, while the stroke attribute sets the color of the element’s outline. |
| opacity | This attribute sets the transparency level of the element, with a value of 0 being completely transparent and 1 being completely opaque. |
| transform | This attribute is used to apply transformations to the element, such as scaling, rotating, and translating. |
Creating Shapes with HTML SVG
SVG provides several tags that can be used to create various shapes, including rectangles, circles, ellipses, lines, and polygons.
Below are some examples of how to create these shapes using SVG:
SVG Circle
Use the tag to create a circle. You can set the center coordinates and radius of the circle using the cx, cy, and r attributes.
Example
SVG Rectangle
Use the <rect> tag to create a rectangle. You can set the x and y coordinates, width, and height of the rectangle using the corresponding attributes.
Example
SVG Polygon
Use the <polygon> tag to create a polygon. You can define the vertices of the polygon using the points attribute, which consists of a series of x,y pairs separated by spaces.
Example:
SVG Star
Sorry, your browser does not support inline SVG.
We’re sorry, but your browser doesn’t support inline SVG.
Example
SVG Rounded Rectangle
Sorry, your browser does not support inline SVG.
We’re sorry, but your browser doesn’t support inline SVG.
Example
SVG Animations
Example:
SVG Logo
The SVG logo can be defined in the following way:
Example
Browser Compatibility
The table below indicates which browser version fully assists HTML <svg>.
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <svg> | 10.0 | 14.5 | 10.0 | 16.0 | 92.0 |
Differences Between SVG and Canvas
JavaScript draws 2D graphics on the canvas.
Each element in SVG is accessible in the DOM, which you can even attach JavaScript handlers to.
When you draw shapes in HTML SVG stores them as objects, SVG objects can automatically redraw if their attributes are changed.
Pixels are generated one by one on the canvas. As soon as a canvas graphic is drawn, the browser forgets about it. Any object covered by graphics must be removed again if its position needs to be changed.
