SVG – Scalable Vector Graphics

SVG Introduction

• SVG is a short form of Scalable Vector Graphics.
• It is a graphic format in which the shapes are specified in XML.
• The XML is then rendered by an SVG viewer.
• Most of the web browser can display SVG just like they can display PNG, GIF, and JPG.
• SVG is only for 2-dimensional vector graphics. For a 3-dimensional format lookup X3D.

NOTE: IE (Internet Explorer) users may have to install the Adobe SVG Viewer to be able to view SVG in the browser.

SVG is for Vector Graphics

Being a vector graphics format SVG is mostly useful for vector type diagrams like:

– Two-dimensional graphs in an X,Y coordinate system.
– Column charts
– Pie charts
– Architecture and design diagrams etc.

Being a “Vector Graphics” format the shapes to be displayed are stored as vectors or vector-like structures. In other words, as numbers. Not as pixels.

Being “Scalable” means that the viewer can scale the SVG image up and down in size without loss of quality. This is possible because the graphics are defined as numbers instead of pixels. Scaling the SVG image up or down just means multiplying or dividing the numbers defining the SVG shapes.

SVG is not ideal for bitmap graphics like photos, movies etc. although you can embed bitmap graphics in an SVG image. This can be a handy way to draw shapes or text ontop of a bitmap image.

SVG is Ideal for Generated Images / Graphs / Diagrams

• Being an XML format (a textual format) SVG is rather easy to generate from within a Servlet, JSP, ASP.NET, PHP or other web application technology.
• This makes SVG ideal for computer-generated graphs and diagrams.
• Interestingly, you often need to generate exactly the type of diagrams for which SVG is ideal (graphs, charts, diagrams etc.) in web applications.
• This makes SVG an even better match for generating graphs and diagrams.

Scripting in SVG

It is possible to write scripts inside your SVG files to bring the shapes to life. This can be used for simple animation and even small games.

Example

SVG images can be very simple, or very complex.

image.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="170pt" 
height="170pt">
<circle cx="160" cy="160" r="40" stroke="grey" stroke-width="5" fill="gold" />
</svg>

Image for above svg code

Note : You can view above image either using SVG Viewer or Web browser.

Displaying SVG in web browsers like Internet Explorer and Mozilla / Firefox can be done in two ways:

– Either by pointing the web browser to the URL of the SVG file, or
– By embedding the SVG file inside an HTML page.

You can embed an SVG image in an HTML file in several ways, let us use the <embed> element and directly in the body tag

How to add SVG image in HTML file

1. Inline SVG XML Embedded Into Your HTML5 Page

MySVGImageExample1.html

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" 
fill="yellow" />
</svg>

<svg height="150" width="150">
<rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; 
fill: #0000ff"/> 
</svg>

2. Using an <object> Tag Into Your HTML5 Page
If you intend using any advanced SVG features such as CSS and scripting, the HTML5 <object> tag is your best option:

MySVGImageExample2.html

<object type="image/svg+xml" data="image.svg">
  Your browser does not support SVG
</object>

3. Using an <embed> Tag Into Your HTML5 Page
we are including <embed> for the purpose of completeness but don’t use it! While it’s similar to <object>, <embed> never has been and probably never will be part of any HTML or XHTML specification. However, it’s supported by most browsers and is often used to implement Flash plugins.

MySVGImageExample3.html

<embed type="image/svg+xml" src="image.svg" />

4. Within an <iframe> Into Your HTML5 Page
Since browsers can render SVG documents in their own right, it’s possible to load images within an iframe:

MySVGImageExample4.html

<iframe src="image.svg">
  Your browser does not support iframes
</iframe>

SVG is ideal for interactive, data-driven, personalized graphics. It’s a royalty-free, vendor neutral open standard developed under the W3C (World Wide Web Consortium) process, and widely supported by modern web browsers.

SVG Shapes Graphics

SVG has some predefined shape elements that can be used to draw.

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