[HTML5] Graphics – SVG

SVG stands for Scalable Vector Graphics. In HTML5, you can use the <canvas> element for graphics. Traditionally, SVG has been used to define vector-based graphics for the Web.

1. SVG

SVG is another way to draw graphics in Web. Rather than relying on JavaScript, SVG uses XML to define graphics.

SVG is a W3C Recommendation :

  • SVG 1.0 : Sep/4 2001.
  • SVG 1.1 : Jan/14 2003.
  • SVG 1.1 (Second Edition) : Aug/16 2011.

The main advantage of Vector graphics is not to lose any quality when they are zoomed or resized. Moreover any elements in SVG can be animated.

SVG is supported in any recent browsers (IE 9 or later). IE8 and earlier needs a plug-in (SVG Viewer).

 

2. Canvas vs. SVG

In HTML5, you have 2 choices : canvas or SVG.

(1) Canvas

  • JavaScript based
  • Resolution Dependent (pixel-by-pixel rendering)
  • can be saved as an image (.png or .jpg)

(2) SVG

  • XML based
  • Resolution Independent (vector rendering)
  • Each shape is available as an object within the SVG DOM
  • Supports for event handlers

 

3. SVG In HTML Pages

SVG files can be embedded into HTML with ,
[/sourcecode]

Or you can embed the code directly.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
  <circle cx="100" cy="100" r="50" stroke="blue" stroke-width="3" fill="red" />
</svg>

 

4. Strokes and Fills

SVG supports 2 drawing modes : strokes (lines) and fills.

You can use the following attributes :

  • stroke
  • stroke-width
  • stroke-linecap
  • stroke-dasharray
  • fill

You can put stroke and fill values in the “style” attribute all together.

 

5. Gradients

A gradient is a smooth transition from one color to another.

  • <linearGradient>
  • <radialGradient>

Gradients are defined in the <defs> section and referenced in the “fill” attribute of the shape element.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="Blue" stop-opacity="1" />
      <stop offset="50%" stop-color="Green" stop-opacity="0.5" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="100" rx="80" ry="50" fill="url(#grad1)" />
</svg>
  • x1 and y1 : start position
  • x2 and y2 : end position
  • <stop> : gradient colors
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="Blue" stop-opacity="1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:0.5" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="100" rx="80" ry="50" fill="url(#grad1)" />
</svg>
  • cx, cy and r : define the outermost circle
  • fx and fy : define the innermost circle
  • <stop> : gradient colors

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s