Lesson 11. HTML5 SVG – Tutorial

HTML5 svg elements

HTML5 svg elements

html5 svg




Hi guys, In This tutorial we will learn about the process of using SVG in HTML5 (Ie HTML5 SVG).

SVG (Scalable Vector Graphics) is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer. Every element and every attribute in SVG files can be animated and also SVG graphics do not lose any quality if they are zoomed or resized or in other words, we can also say that, it is compatible with all the screen sizes. HTML5SVG is mostly used as well as useful for vector type diagrams like 2D graphs, Bar charts, in an X,Y coordinate system.

HTML5 allows embedding SVG directly uses <svg>… </svg>.

<svg xmlns=”http://www.html5beginners.com/2000/svg”>/*…*/


HTML5 canvas

HTML5 canvas












Points to remember about HTML5 SVG

  • Resolution independent, i.e looks in the same way in different resolutions
  • Not suited for game applications
  • Slow rendering if complex (anything that uses the DOM a lot will be slow)
  • SVG images are scalable and zoomable (and the image can be zoomed without degradation)
  • Best suited for applications with large rendering areas (Maps, for example)

More about is HTML5 SVG?

  • SVG stands for Scalable Vector Graphics
  • SVG graphics do NOT lose any quality if they are zoomed or resized
  • SVG is used to define vector-based graphics for the Web
  • Every element and every attribute in SVG files can be animated
  • SVG defines the graphics in XML format

What you should already know

Before moving to HTML5 SVG, you must have some basic understanding of the following:

  • HTML
  • Basic XML

Embedding SVG Into HTML Pages

In HTML5, you can embed SVG elements directly into your HTML pages.

For example, here is how you can have SVG circle:

<!DOCTYPE html>



<title>HTML5SVG Sample</title>

<meta charset=”utf-8″ />



<h2>HTML5SVG Green Circle</h2>

<svg id=”myhtml5SVG” height=”200″ xmlns=”http://www.w3.org/2000/svg”>

<circle id=”greenCircles” cx=”50″ cy=”50″ r=”50″ fill=”green” />




Below is the result for above HTML5 SVG Example.

Click for HTML5 SVG result

also check here:

<br />

NOTE: For the complete list of supported elements and SVG features visit the official specification.

Here is how you can specify a path in the shape of a triangle:

<svg width=”4cm” height=”4cm” viewBox=”0 0 400 400″xmlns=”http://www.w3.org/2000/svg” version=”1.1″>

<title>Example triangle with ‘path'</title>

<rect x=”1″ y=”1″ width=”398″ height=”398″

fill=”none” stroke=”blue” />

<path d=”M 100 100 L 300 100 L 200 300 z”

fill=”red” stroke=”blue” stroke-width=”3″ />


Note: As SVG (HTML5 SVG) is written in XML, all elements must be properly closed!


HTML5 Beginners

HTML5 Beginners






HTML5 SVG Shapes

HTML5 SVG has some predefined shape elements that can be used:

  • Rectangle <rect>
  • Polyline <polyline>
  • Circle <circle>
  • Path <path>
  • Ellipse <ellipse>
  • Polygon <polygon>
  • Line <line>




HTML5 SVG Filter Elements

List of available filter elements in SVG are as follows:

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





Tip: You can use multiple filters on each SVG ( HTML5 SVG)  element!





Pros for HTML5 SVG.

  • Resolution: SVG can fit any resolution and screen size, this quality comes naturally from the nature of the code used to generate it.
  • Efficiency: SVG does not need any kind of extra storage except for the few bytes needed for the xml code. Less amount of space for graphics means better utilization and cost effective website creation and hosting.
  • Page Loading Time: The only time needed for SVG to load is the time required for the browser to process the code, which is inherently less than loading bulky images.
  • Zoom-ability: Unlike traditional image formats, SVG does not pixelate when zoomed.
  • Animation: SVG also works as simple animations, this leads to smoother, lighter and fluid animated graphics.
  • Scalability: SVG is inherently responsive and it can most naturally fit into any screen environment without losing its sharpness, quality and without a need of cropping.
  • Creation: A designer or a programmer only needs a basic text editor, like notepad, to create the most stunning images for the web.
  • Optimization: Perhaps the most powerful aspect of SVG is that these images can be compressed, indexed, tagged and searched for with utmost ease.

The only con of HTML5 SVG

is that it is a part of programming, photos, and images that cannot be programmed.

To reduce use of external plugins dependencies HTML5 SVG has been introduced. Companies working on media domain are using HTML5 SVG in their projects.
HTML5 SVG is also used in developing games. Animations done in flash can also be done by HTML5 SVG. So we can say by the use of HTML5 SVG our pages render faster in browser as comapered to any external plugins. We just need basic knowledge of html5, css3 and javascript to work on HTML5 SVG

You Might Also Like


  1. 1
  2. 2

    Hi,The right sidebar is toncuihg the middle column in the homepage as you can see. I want to change the size same like left sidebar, not toncuihg the middle column.Thanks for reply.

  3. 3

Comments are closed.