HTML <svg> - Scalable Vector Graphics

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <svg> Tag in HTML 5

The <svg> tag can be used to draw pictures and/or text using SVG. The demo below uses two different methods to draw a sphere with a glow graident. The larger red ornament is created using a circle with a separate glow gradient. The smaller blue ornament and its glow are created with a single radial gradient in a rectangle (however, the anti-aliasing is not as good and the color with zero opacity may not be completely transparent in some browsers, which makes the drawing rectangle visible).

This is an actual working demo of the SVG example code below. (Do View Source to verify that this page is using the HTML 5 DOCTYPE. You can also verify it is Valid HTML 5 using the HTML Validator. Try using it to validate URLs with HTML examples from other places that claim to be HTML 5 web sites!)

Another way to create a glow graident on an object is shown in the <canvas> tag demo. However, that page currently causes the Firefox 3.6.12 browser to hang.

<svg> Tag Syntax

Rules for coding the HTML `svg` element

SVG Tag Attributes

Attributes of the SVG tags

global attributes

The common HTML attributes can be used on any of the SVG tags.

Attributes of the <svg> tag

`preserveAspectRatio`
`style`
`version`
`viewbox`
`xmlns="http://www.w3.org/2000/svg"`	The `xmlns` attribute declares the namespace for all of the SVG elements. Since the `xmlns` attribute is inherited by child elements and descendants, it does not need to be coded on other tags in the content of the `svg` element, unless they are in a different namespace such as the HTML namespace.

Attributes of the <circle> tag

`cx`, `cy`	center
`r`	radius

Attributes of the <linearGradient> tag

`x1`, `y1`
`x2`, `y2`

Attributes of the <radialGradient> tag

`fx`, `fy`
`r`
`spreadMethod`

Attributes of the <rect> tag

`x`, `y`
`width`, `height`

Attributes of the <stop> tag

`offset`
`style`	stop-color: stop-opacity:

SVG Examples

Examples of the `<svg>` tag in HTML 5

SVG Christmas Tree Ornaments

A red circle and blue circle with glow on green gradient background

(see SVG demo above)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    style="width:400px; height:300px"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMidYMid slice"
>

   <defs>
      <linearGradient id="green-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
         <stop offset="0%" style="stop-color: #99ff99"/>
         <stop offset="100%" style="stop-color: #003300"/>
      </linearGradient>
      <linearGradient id="red-gradient" x1="0%" y1="100%" x2="100%" y2="0%">
         <stop offset="0%" style="stop-color: #ff0000"/>
         <stop offset="50%" style="stop-color: #990000"/>
         <stop offset="100%" style="stop-color: #990000"/>
      </linearGradient>
      <radialGradient id="radial-glow-gradient" fx="40%" fy="40%" r="55%" spreadMethod="pad">
          <stop offset="0%"   style="stop-color: #ffffff; stop-opacity: 0.7"/>
          <stop offset="100%" style="stop-color: #ffffff; stop-opacity: 0.01"/>
      </radialGradient>
      <radialGradient id="radial-gradient" fx="35%" fy="25%" r="49%" spreadMethod="pad">
          <stop offset="0%"   style="stop-color: #ccccff; stop-opacity: 1.0"/>
          <stop offset="99%" style="stop-color: #0033ff; stop-opacity: 1.0"/>
          <stop offset="100%" style="stop-color: #66cc66; stop-opacity: 0.0"/>
      </radialGradient>
   </defs>

   <rect x="0" y="0" width="100" height="100" style="fill: url(#green-gradient)"/>
   <circle cx="25" cy="65" r="15" style="fill: url(#red-gradient)"/>
   <circle cx="20" cy="58" r="6" style="opacity: 0.0; fill: url(#radial-glow-gradient)"
      <animate attributeType="CSS" attributeName="opacity"
         from="0.0" to="1.0" begin="5s" dur="8s" fill="freeze"/>
   </circle>
   <line x1="25" y1="36" x2="22" y2="47" style="stroke: #000000; stroke-width:1"/>
   <line x1="25" y1="36" x2="28" y2="47" style="stroke: #000000; stroke-width:1"/>
   <rect x="20" y="46" width="10" height="5" style="fill: #ffff00"/>

   <rect x="40" y="25" width="20" height="20" style="fill: url(#radial-gradient)"
      <animate attributeType="CSS" attributeName="opacity"
         from="0.0" to="1.0" begin="0s" dur="4s" fill="freeze"/>
   </rect>
   <text x="145" y="27" transform="scale(.33, 1.0)" style="fill:#000000;">^</text>
   <rect x="46" y="22" width="8" height="4" style="fill: #ffff00"/>

</svg>

The large red ornament is created using an SVG <circle> tag with a separate circular glow gradient. Its "ornament hanger" is created with two SVG <line> tags. The animation causes the glow gradient to appear slowly. Since the animation starts after a five second delay (begin="5s"), the style on the circle must include opacity: 0.0, which matches the from attribute on the <animate tag; otherwise the glow would suddenly disappear when the animation starts.

The smaller blue ornament is created with more minimal code. The ornament ball and its glow are created with a single radial gradient in a rectangle. Its ornament hook is actually a scaled text caret character (^). Since the animation applies to the rectangle, the whole ornament slowly appears.