HTML - <svg> Tag

HTML <svg> tag is used to contain SVG graphics. SVG is mostly used for vector diagrams, such as pie charts and 2D graphs with an X, Y coordinate system etc.

XML text files can be used to define SVG images and their behaviors. An SVG image can therefore be created and edited as XML files, but generally speaking, drawing program like inkspace are preferred to generate it. It describes mixed vector and two-dimensional vector graphics in XML.

Syntax

<svg>
......
</svg>

Attribute

HTML svg tag supports Global and Event attributes of HTML. And some specific attributes as well which are listed bellow.

Attribute	Value	Description
baseProfile	string	This section outlines the minimum SVG language profile that the author thinks is required to render the content correctly. Not supported after SVG2.
height	length percentage	Indicates the vertical length of rect.
preserveAspectRatio	none xMinYMin xMidYMin xMaxYMin xMinYMid xMidYMid xMaxYMid xMinYMax xMidYMax xMaxYMax meet slice	Specifies the required deformation of the SVG fragment when it is inserted into a container with a different aspect ratio.
version	number	specifies the SVG version that was used to create the element's inner content.
viewbox	list-of-numbers	For the current SVG fragment, defines the bounds of the SVG viewport.
width	length percentage	indicates the width of the rect.
x	length percentage	determines the svg container's x coordinate. The outermost SVG elements are unaffected.
y	length percentage	determines the svg container's y coordinate. The outermost SVG elements are unaffected.

Examples of HTML svg Tag

Bellow examples will illustrate the usage of svg tag. Where, when and how to use svg tag and how we can manupulate svg element using CSS.

Creating rectangle SVG element

Let’s look at the following example, where we are going to draw a rectangle using the <svg> tag.

<!DOCTYPE html>
<html>
<body>
   <svg width="250" height="150">
      <rect width="200" height="100" style="fill:#DE3163;
         stroke-width:8;stroke:#D5F5E3" />
   </svg>
</body>
</html>

Creating square SVG element

Considering another scenario where we are going to draw a square with round corners.

<!DOCTYPE html>
<html>
<body>
   <svg width="400" height="400">
      <rect x="25" y="25" rx="20" ry="20" width="200" height="200" 
            style="fill:#58D68D;stroke:#7D3C98;
                   stroke-width:3;opacity:0.5" />
   </svg>
</body>
</html>

Creating logo using svg tag

Following is the example, where we are going to draw the SVG logo.

<!DOCTYPE html>
<html>
<body>
   <svg height="200" width="600">
      <defs>
         <linearGradient id="tutorial" x1="1%" y1="1%" x2="50%" y2="1%">
            <stop offset="0%" style="stop-color:white;
               stop-opacity: 1" />
            <stop offset="100%" style="stop-color: #52BE80;
               stop-opacity: 1" />
         </linearGradient>
      </defs>
      <ellipse cx="210" cy="100" rx="120" ry="81" fill="url(#tutorial)" />
      <text fill="#17202A" font-size="20" 
            font-family="verdana" x="121" y="111"> 
            TUTORIALSPOINT 
      </text>
   </svg>
</body>
</html>

Supported Browsers

Tag
svg	Yes 4.0	Yes 9.0	Yes 3.0	Yes 3.2	Yes 10.1

html_tags_reference.htm