HTML - SVG

Previous
Quiz
Next

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

<!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>

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

<!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>

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

<!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>

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

<!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>

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

<!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>

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

<!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>

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

<!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>

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.

Example

<!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>
Print Page
Previous
Next
Advertisements