Search within TutorialsPark

HTML5 SVG Intro


Learn to create SVG(Scaleable Vector Images) graphics using XML markups.


SVG Intro

1.SVG(Scaleable Vector Graphics) is a graphics standard maintained by World Wide Web Consortium(W3C).

2.SVG enables you to create two-dimensional Vector Images, which consists of mathematical representation of objects and can be scaled infinitely without any loss in Quality.


SVG v/s Raster?

1.While all other graphics are pixel based bitmap(or Raster), SVG graphics are based on vectors and not pixels.

2.Vector images are composed of shapes, defined by simple XML based markups and filled with colors, gradients and patterns.

3.SVG graphics are scaleable infinitely without any loss in Quality.If, you zoom on a bitmap(pixel based) Image, it can be zoomed upto a maximum resolution, after which the quailty declines and pixels start to break up.SVG has no such issues.

Raster_vs_SVG

Advantages of SVG

Open-Source(XML): Based on XML(endorsed by W3C),source code can be viewed by all.SVG is non-proprietary and vendor neutral

Client-Side: SVG is a client-side graphics, hence has a very light load on the webserver. Also, SVG is dynamic and interactive.

Familiarity: SVG uses XML, CSS, Javascript, DOM.Hence familiar to most web programmers.

Web-Apps: SVG has been incorporated with HTML5 specifications, thus can be used by Web Apps developers.

Related Technologies: SVG has overlaps with Flash, Vector Markup Language(VML), Silverlight and hence can be used cross-platform.


Browser Support for SVG.

1.The SVG is supported on latest versions of all major browsers.

Compatible Browsers.

internetexplorer safari firefox opera chrome


Internet Explorer, Apple Safari, Mozilla Firefox, Opera , Google Chrome.


Incorporating SVG within your HTML5 document.

1. HTML5 enables you to add SVG graphics directly into the webpage.

2. The root element <svg> sets the width and height of the finished graphics in pixels.

3. The element <title> provides title to the document and is displayed on top of browser tab.

3. The element <desc> provides complete description about the image.

Demo: Irish Flag using Basic SVG markup.

Give it a TRY! »








Related Examples

Related Tags



HTML5 SVG Intro
Search within TutorialsPark

HTML5 SVG Intro


Learn to create SVG(Scaleable Vector Images) graphics using XML markups.


SVG Intro

1.SVG(Scaleable Vector Graphics) is a graphics standard maintained by World Wide Web Consortium(W3C).

2.SVG enables you to create two-dimensional Vector Images, which consists of mathematical representation of objects and can be scaled infinitely without any loss in Quality.


SVG v/s Raster?

1.While all other graphics are pixel based bitmap(or Raster), SVG graphics are based on vectors and not pixels.

2.Vector images are composed of shapes, defined by simple XML based markups and filled with colors, gradients and patterns.

3.SVG graphics are scaleable infinitely without any loss in Quality.If, you zoom on a bitmap(pixel based) Image, it can be zoomed upto a maximum resolution, after which the quailty declines and pixels start to break up.SVG has no such issues.

Raster_vs_SVG

Advantages of SVG

Open-Source(XML): Based on XML(endorsed by W3C),source code can be viewed by all.SVG is non-proprietary and vendor neutral

Client-Side: SVG is a client-side graphics, hence has a very light load on the webserver. Also, SVG is dynamic and interactive.

Familiarity: SVG uses XML, CSS, Javascript, DOM.Hence familiar to most web programmers.

Web-Apps: SVG has been incorporated with HTML5 specifications, thus can be used by Web Apps developers.

Related Technologies: SVG has overlaps with Flash, Vector Markup Language(VML), Silverlight and hence can be used cross-platform.


Browser Support for SVG.

1.The SVG is supported on latest versions of all major browsers.

Compatible Browsers.

internetexplorer safari firefox opera chrome


Internet Explorer, Apple Safari, Mozilla Firefox, Opera , Google Chrome.


Incorporating SVG within your HTML5 document.

1. HTML5 enables you to add SVG graphics directly into the webpage.

2. The root element <svg> sets the width and height of the finished graphics in pixels.

3. The element <title> provides title to the document and is displayed on top of browser tab.

3. The element <desc> provides complete description about the image.

Demo: Irish Flag using Basic SVG markup.

Give it a TRY! »








Related Examples

Related Tags