HTML - <svg> Tag

Quiz

Introduction to <svg> Tag

The HTML <svg> tag is used to create a SVG in web pages. It is an XML-based format that helps to create the vector-based shapes, including the lines, circles and complex graphics like paths and text. Unlike raster images (JPEG, PNG), SVG graphics are resolution-independent and can scale without losing the quality.

Syntax

Following is the syntax of HTML <svg> tag −

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

Attributes

HTML svg tag supports Global and Event attributes of HTML. It also accepts some specific attributes as well which are listed below.

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.

Example : Creating a Rectangle

Lets look at the following example, where we are going to create 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>

Example : Creating a Square

Consider the following example, where we are going to draw the square using the <svg> tag.

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

Example : Creating a Logo

In the following example, we are going to create a 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

Print Page