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>.
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:
- 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:
<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.
also check here:
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 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
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.