Ads by ProfitSence
Close

HTML SVG Graphics

Last Updated on Wednesday 5th Oct 2022

html svg

What is SVG?

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define graphics for the Web.
  • SVG can also be used to embed an SVG fragment inside an HTML document.
  • SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

SVG Circle

			
					<!DOCTYPE html>
<html>
  <body>
    <svg width="100" height="100">
      <circle
        cx="50"
        cy="50"
        r="40"
        stroke="red"
        stroke-width="4"
        fill="blue"
      />
    </svg>
  </body>
</html>

html svg tag

Note: The xmlns attribute is only required on the outermost svg element of SVG documents.

html5 svg

SVG Attributes

Name Description
width Displayed width of the rectangular viewport.
height Displayed height of the rectangular viewport.
viewBox SVG viewport coordinates for the current SVG fragment.
x x coordinate of the svg container. No effect on outermost svg elements.
y y coordinate of the svg container. No effect on outermost svg elements.
version Version of SVG is used for the inner content of the element.
preserveAspectRatio Displayed with a different aspect ratio.

SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.

html svg image

Some Other SVG Examples

SVG Rectangle

			
					<svg width="400" height="100">
  <rect width="400" height="100" fill="blue" stroke-width="10" stroke="black" />
</svg>

SVG Rounded Square

			
					<svg width="90" height="90">
  <rect
    width="80"
    height="80"
    rx="20"
    ry="20"
    fill="blue"
    stroke-width="10"
    stroke="black"
  />
</svg>

SVG Star

			
					<svg width="300" height="200">
  <polygon
    points="100,10 40,198 190,78 10,78 160,198"
    fill="yellow"
    stroke="red"
    stroke-width="5"
    fill-rule="evenodd"
  />
</svg>

Browser Support

Element Chrome Edge Mozilla Safari Opera
<svg> 4.0 9.0 3.0 3.2 10.1