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