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 define 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.

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.

Output:

 

List of browsers Supported:

A

ayushcoding100

Follow

Improve

Article Tags :

• HTML
• Web Technologies
• SVG-Element