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" />

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:

width and heightThese attributes define the size of the SVG container.
fill and strokeThe fill attribute sets the color of the interior of the element, while the stroke attribute sets the color of the element’s outline.
opacityThis attribute sets the transparency level of the element, with a value of 0 being completely transparent and 1 being completely opaque.
transformThis 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.


<!DOCTYPE html> <html> <body> <svg width="200" height="200"> <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="6" fill="red"></circle> </svg> </body> </html>

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.


<!DOCTYPE html> <html> <body><svg width="300" height="80"> <rect width="300" height="80" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"></rect> </svg></body> </html>

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.


<!DOCTYPE html> <html> <body> <svg width="300" height="300"> <polygon points="5,37 50,5 95,37 20,99 80,99" style="fill:green;stroke:#333;stroke-width:2;fill-rule:evenodd;"></polygon> </svg> </body> </html>

SVG Star

Sorry, your browser does not support inline SVG.

We’re sorry, but your browser doesn’t support inline SVG.


<!DOCTYPE html> <html> <body><svg width="400" height="180"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"></polygon> </svg></body> </html>

SVG Rounded Rectangle

Sorry, your browser does not support inline SVG.

We’re sorry, but your browser doesn’t support inline SVG.


<!DOCTYPE html> <html> <body><svg width="500" height="200"> <rect x="50" y="20" rx="20" ry="20" width="180" height="180" style="fill:red;stroke:black;stroke-width:5;opacity:0.3"></rect> </svg></body> </html>

SVG Animations


<!DOCTYPE html> <html> <head> <style> .circle { animation-name: circleOrigin; animation-duration: 2s; animation-iteration-count: infinite; } @keyframes circleOrigin { from { transform: rotate(270deg); } to { transform: rotate(360deg); } } </style> </head> <body> <svg width="150" height="150"> <circle cx="80" cy="80" r="50" stroke="#000" stroke-width="1" fill="green" class="circle"></circle> </svg> </body> </html>

The SVG logo can be defined in the following way:


<!DOCTYPE html> <html> <body><svg height="150" width="600"> <defs> <lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"></stop> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"></stop> </lineargradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)"></ellipse> <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text> Sorry, your browser does not support inline SVG. </svg></body> </html>

Browser Compatibility

The table below indicates which browser version fully assists HTML <svg>.


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.

If this article somehow fulfilled your educational desires, do share this meaningful information with your friends by clicking on the links below.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *