SVG Example

Simple SVG Example

SVG files are recommended to use .svg (all lowercase) as the file extension for this type of file.

A simple SVG graphic example:

test.svg File

<svg version="1.1"
   baseProfile="full"
   width="300" height="200"
   xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" stroke="red" stroke-width="4" fill="yellow" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="115" font-size="16" text-anchor="middle" fill="white">tutorialpro SVG TEST</text>

</svg>

The display result is as follows:

SVG Code Analysis:

The SVG code starts with the <svg> element, including the opening tag <svg> and the closing tag </svg>. This is the root element. The width and height attributes set the width and height of the SVG document. The version attribute defines the SVG version used, and the xmlns attribute defines the SVG namespace.

The <rect> in SVG is used to create a rectangle, with the background color set to yellow by the fill attribute.

The <circle> in SVG is used to create a circle. The cx and cy attributes define the x and y coordinates of the circle's center. If these two attributes are omitted, the circle's center is set to (0, 0), and the r attribute defines the radius of the circle. A green circle with a radius of 80px <circle> is drawn in the center of the red rectangle (offset 150px to the right and 115px down).

The stroke and stroke-width attributes control how the shape's outline is displayed. We set the circle's outline to a 4px wide red border.

The fill attribute sets the color inside the shape. We set the fill color to red.

The closing tag </svg> is used to close the SVG element and the document itself.

Note: All opening tags must have closing tags!