Everything you need to start your web empire

Drawing SVG with HTML5

HTML5 allows you to use SVG shapes in your web developments. Scalable vector graphics are useful for things like charts and graphs and anywhere where either the graphics need to be scaled, indexed, searchable or require a javascript event handler.

html5 svg

SVG is a description of the shape rather than the shape being created by code if that makes any sense. You create SVG shapes by inserting the desription of it into the actual XML of the page. This means that you can treat SVG shaoes just like any other page element. You can attach javascript handlers and use css on them.

How to create basic SVG shapes with HTML5

Creating SVG shapes is much easier than with <canvas>. First you create your HTML5 page:

Then we can insert the description of your shape straight into the html:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />

Here we have drawn a circle with a radius of 40 at the x and y position as indicated but there are all sorts of basic shapes that can be drawn. For a complete reference click here.

Inserting SVG images into your apps

Drawing basic shapes is all very well but in order to draw anything a bit more substantial it is often much easier to create the graphics in a third party vector graphics program and then insert them into your apps. The HTML page layout is exactly the same as above except you reference your image instead of the shape.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<image x="0" y="0" height="60" width="60"  xlink:href="myimage.svg" /></svg>

Note that just like in HTML, the link will need to be relaitve to where you are.

Creating text with SVG

And you aren’t limited to jsut images, you can create text with HTML5 SVG:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="0" fill="red">Hi there</text></svg>

You can transform the text any way you need to, you can stretch it, rotate it, scale it….

HTML5 SVG Filters

With SVG and HTML5 you can add filters, special effects that you can apply to any SVG graphic. This opens up all sorts of possibilities that were never possible with CSS or standard HTML. The current availble filters are:

  • feBlend – filter for combining images
  • feColorMatrix – filter for color transforms
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset – filter for drop shadows
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight – filter for lighting
  • fePointLight – filter for lighting
  • feSpotLight – filter for lighting

And you can apply as many as you wish to a single SVG image! This is photoshop territory really available to you right in the browser.

To apply a filter to a SVG image you need to define the filter and give it an ID. You can then reference this filter in your shape.  So applying this to a rectangle we can apply a gaussian blur:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" /></svg>

Tagged as: , ,

Leave a Response

You must be logged in to post a comment.