SVG <svg> Element

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.

SVG graphics are supported by the <svg> element in HTML. SVG graphics feature a container in which we can create a variety of shapes such as boxes, pathways, text, graphic images, and circles.

Syntax:

<svg width="x" height="y"> shape_tags... </svg>

Attributes:

viewBox attribute indicates the center of the coordinate on which the elements of the image are positioned.
stroke attribute represents the color to be used to paint the outline of the shape.
fill attribute denotes the color to be used to paint the element.
stroke-width represents the width of the color to use for the shape.
rgb(x,y,z): This is a triplet of red, green, and blue (RGB) values to deﬁne how much of each primary color is used to generate the desired color.
width & height in the rectangle represents the height and width of the rectangle.
baseProfile attribute represents the minimum SVG language profile that the author deems necessary to correctly render content..
contentScriptType attribute specifies a default scripting language for the given document fragment on the <svg> element.
contentStyleType attribute represents the style sheet language for the given document fragment.
preserveAspectRatio attribute denotes how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio.
version attribute is used to indicate the specification of a document type SVG.
viewBox attribute denotes the dimension of an SVG viewport.

Example 1: Making a circle with an outline of green and fill colored black.

HTML

<!DOCTYPE html>
<html lang="en">
<body>
    <svg viewBox="0 0 300 100" stroke="green" 
        fill="dark green">
        <circle cx="50" cy="50" r="40" />
    </svg>
</body>
</html>

cx represents the width of the circle and cy represents the height of the circle, and r represents the radius of the circle.

        <circle cx="50" cy="50" r="40"/>

Output:

Example 2: Making a rectangle with an outline of dark green and fill colored light green.

HTML

<!DOCTYPE html>
<html lang="en">
<h1>GeeksForGeeks</h1>
<body>
    <svg width="400" height="100">
        <rect width="400" height="100" 
            style="fill:rgb(20, 204, 20);
                stroke-width:10;stroke:rgb(14, 180, 89)"/>
    </svg>
</body>
</html>

Output:

List of browsers Supported:

Explore