Scribd
Upload
17 views3 pages

SVG Tags With Code

The document provides an overview of SVG (Scalable Vector Graphics), an XML-based format for two-dimensional graphics that supports interactivity and animation. It describes various SVG elements such as <circle>, <rect>, <line>, <ellipse>, <polygon>, <polyline>, and <path>, along with code examples for each. These elements are used to create different shapes and graphics in SVG images.

Uploaded by

Sumit Vanwani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views3 pages

SVG Tags With Code

The document provides an overview of SVG (Scalable Vector Graphics), an XML-based format for two-dimensional graphics that supports interactivity and animation. It describes various SVG elements such as <circle>, <rect>, <line>, <ellipse>, <polygon>, <polyline>, and <path>, along with code examples for each. These elements are used to create different shapes and graphics in SVG images.

Uploaded by

Sumit Vanwani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

SVG Tags Overview with Code

Introduction to SVG

SVG (Scalable Vector Graphics) is an XML-based vector image format for two-dimensional

graphics. It supports interactive and animated graphics, and the images can be scaled to any size

without losing quality.

SVG elements are used to draw various types of shapes, paths, text, and images.

1. <circle>

The <circle> element is used to draw a circle in an SVG image.

Example:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>

</svg>

2. <rect>

The <rect> element is used to draw a rectangle or square.

Example:

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">

<rect width="200" height="100" style="fill:blue;stroke:black;stroke-width:5;"/>

</svg>

3. <line>

The <line> element is used to draw a straight line.

Example:

<svg height="110" width="500" xmlns="http://www.w3.org/2000/svg">


<line x1="0" y1="0" x2="200" y2="100" style="stroke:rgb(255,0,0);stroke-width:2"/>

</svg>

4. <ellipse>

The <ellipse> element is used to draw an ellipse.

Example:

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">

<ellipse cx="100" cy="50" rx="80" ry="40" style="fill:yellow;stroke:purple;stroke-width:2"/>

</svg>

5. <polygon>

The <polygon> element is used to create a closed shape consisting of straight lines.

Example:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">

<polygon points="50,15 100,100 0,100" style="fill:lime;stroke:purple;stroke-width:1"/>

</svg>

6. <polyline>

The <polyline> element is used to create a series of connected lines.

Example:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">

<polyline points="0,0 50,50 50,100" style="fill:white;stroke:black;stroke-width:3"/>

</svg>

7. <path>

The <path> element is used to define complex shapes using a series of commands and points.
Example:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">

<path d="M10 10 H 90 V 90 H 10 Z" style="fill:none;stroke:black;stroke-width:2"/>

</svg>

You might also like