How to insert SVG Element in HTML?

The SVG element in HTML is a container for Scalable Vector Graphics (SVG). SVG is an XML-based language used for describing 2D vector graphics. SVG graphics are defined in XML format, making them scalable without loss of quality. SVG can be embedded directly into HTML using the <svg> tag (inline SVG) or referenced as external files using the <img> or <object> elements. Inline SVG can be styled with CSS.

SVG Elements in HTML5

The root element for both embedded and inline SVG images is the <svg> element. It is crucial to set the width and height attributes of the <svg> root element to absolute values (e.g., pixels). Using relative units like percentages might cause rendering issues in some browsers.

<circle>

Defines a circle. The cx and cy attributes specify the coordinates of the center, and the r attribute defines the radius. The fill attribute sets the fill color.

<!DOCTYPE html>
<html>
<head>
<title>SVG Circle</title>
<meta charset="utf-8" />
</head>
<body>
<h3>HTML5 SVG Circle Example</h3>
<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>

HTML5 SVG Circle Example

<rect>

Defines a rectangle. The x and y attributes define the coordinates of the top-left corner, while width and height specify the dimensions. The fill attribute sets the fill color, and stroke and stroke-width can be used for the border.

<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h3>HTML5 SVG Rectangle Example</h3>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect id="redrect" x="10" y="10" width="300" height="100" fill="red" />
</svg>
</body>
</html>

HTML5 SVG Rectangle Example

<line>

Defines a straight line. The x1, y1 attributes define the starting point, and x2, y2 define the ending point. The style attribute can be used to set properties like stroke color and stroke-width.

<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h3>HTML5 SVG Line Example</h3>
<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>

HTML5 SVG Line Example

<ellipse>

Defines an ellipse. The cx and cy attributes specify the coordinates of the center, and rx and ry define the horizontal and vertical radii, respectively. The fill attribute sets the fill color.

<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h3>HTML5 SVG Ellipse Example</h3>
<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>

HTML5 SVG Ellipse Example

<polygon>

Defines a closed shape with straight sides. The points attribute lists the x and y coordinates of each vertex, separated by commas and/or spaces. The fill attribute sets the fill color.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h3>HTML5 SVG Polygon Example</h3>
<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>

HTML5 SVG Polygon Example

<polyline>

Defines a series of connected straight lines. Similar to <polygon>, the points attribute specifies the vertices, but the shape is not automatically closed. The fill attribute, if present, applies to the enclosed area (even if not closed), and stroke can be used for the lines.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h3>HTML5 SVG Polyline Example</h3>
<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>

HTML5 SVG Polyline Example

<defs>

This element is used to contain definitions of reusable graphical objects, such as gradients.

<linearGradient>: Defines a linear gradient that can be applied to other SVG elements.
<radialGradient>: Defines a radial gradient. The example below from source shows a radial gradient applied to an <ellipse>:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h3>HTML5 SVG Gradient Ellipse Example</h3>
<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>

HTML5 SVG Gradient Ellipse Example

<text>

The <text> element is used to add text to SVG graphics. You can specify the position and style of the text.

<svg xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="25" style="font-family:Verdana; font-size:20">
    My Text
  </text>
</svg>

Text Attributes in SVG

x	The x position of the start of the text.
y	The y position of the start of the text.
dx	The horizontal shift position for text (from previous text position)
dy	The vertical shift position for text (from previous text position)
rotate	The rotation (in degrees)
textLength	The width
lengthAdjust	How the text should be compressed or stretched
Fill	Color
Stroke	It is also used for color

Examples:

<svg height="40" width="200" xmlns="http://www.w3.org/2000/svg">
  <text x="5" y="30" fill="blue" stroke="red" font-size="35" rotate="45" lengthAdjust="stretched">GOVINDHTECH!</text>
</svg>

Animated elements in html5

SVG provides several elements to animate graphical elements without scripting. These include:

<animate>: This element animates an attribute of an SVG element over a specified duration.

Example:

<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" style="fill:pink;">
    <animate
      attributeName="cx"
      begin="0s"
      dur="8s"
      from="50"
      to="90%"
      fill="freeze" />
  </circle>
</svg>
<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" style="fill:green;">
    <animate
      attributeName="cx"
      begin="0s"
      dur="8s"
      from="50"
      to="90%"
      repeatCount="indefinite" />
  </circle>
</svg>

<animateMotion>: This element moves an element along a motion path.

<svg width="100%" height="150" xmlns="http://www.w3.org/2000/svg">
  <rect x="45" y="18" width="155" height="45" style="stroke:green;fill:none;">
    <animateMotion
      path="M0,0 q60,100 100,0 q60,-20 100,0"
      begin="0s"
      dur="10s"
      repeatCount="indefinite" />
  </rect>
  <text x="50" y="50" style="font-family:Verdana;font-size:32">It's SVG!
    <animateMotion
      path="M0,0 q60,100 100,0 q60,-20 100,0"
      begin="0s"
      dur="10s"
      repeatCount="indefinite" />
</text>
</svg>

<animateTransform>: This element animates a transformation attribute applied to an SVG element.

<svg width="200" height="180" xmlns="http://www.w3.org/2000/svg">
  <rect x="30" y="30" height="110" width="110" style="stroke:red;fill:green">
    <animateTransform
      attributeName="transform"
      begin="0s"
      dur="10s"
      type="rotate"
      from="0 85 85"
      to="360 85 85"
      repeatCount="indefinite" />
  </rect>
</svg>

<set>: This element sets the value of an attribute for a specified duration.

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="70" cy="30" r="20" style="fill:green;">
  <set attributeName="r" to="50" begin="3s" />
</svg>

HTML5 Topics

Page Content

Posts