hj: SVG 101

Recently, start to look at SVG (Scalable Vector Graphics), which is a language for describing two-dimensional vector graphics in XML. SVG has many advantages including open standard, scalable images etc. I quickly went through www3school online tutorial, and wrote some notes about SVG language.

Keywords: Shapes, Filter, Gradient, Canvas, WebGL

SVG 1.1 Second Edition, which includes all the errata and clarifications, but no new features to the original SVG 1.1 was released on August 16, 2011.

SVG Basics
Creating SVG Files - Inkscape
Viewing SVG Files - Adobe SVG Viewer
SVG In HTML Pages - <embed>, <object>, <iframe> or inline, Link to an SVG File (standalone, *.svg)

SVG has some predefined shape elements
    * Rectangle <rect>
    * Circle <circle>
    * Ellipse <ellipse>
    * Line <line>
    * Polyline <polyline>
    * Polygon <polygon>
    * Path <path>

SVG Filters are used to add special effects to SVG graphics.

A gradient is a smooth transition from one color to another. In addition, several color transitions can be applied to the same element.
There are two main types of gradients in SVG:
    * Linear
    * Radial

For multimedia/animation, refer to SMIL (Synchronized Multimedia Integration Language).

There are many discussion among SVG, Canvas, WebGL One javascript 3D library called three.js is to create a lightweight 3D library with a very low level of complexity — in other words, for dummies. The library provides <canvas>, <svg> and WebGL renderers.

Inline SVG to HTML

drawSVG = function(svgStr) {
    var parser = new DOMParser();
    var dom = parser.parseFromString(svgStr, "text/xml");
    document.getElementById('svg').appendChild(dom.documentElement);
}

Embed SVG to HTML

In case you use jQuery you need to wait for $(window).load, because the embedded SVG document might not be yet loaded at $(document).ready

$(window).load(function () {
    var a = document.getElementById("alphasvg");
    var svgDoc = a.contentDocument;
    var delta = svgDoc.getElementById("delta");
    delta.addEventListener("mousedown",function(){alert('HI')},false);
});

SVG JS Libraries
Raphael
jQuery SVG
svgweb
SVGKit

Embedding SVG in HTML documents SVG Primer (from W3C) suggests 5 ways to putting SVG to HTML documents:
* <embed> --> browser preferred way

<embed name="E" id="E" src="simplest.svg" width="50" height="50">

* <frame> and <iframe>

<iframe id="B" src="simpleShell.svg" width="250" height="150"/>

* <object> --> W3C preferred way

<object id="E" type="image/svg+xml" data="ovals.svg" width="320" height="240">
 <param name="src" value="ovals.svg">
</object>

* <img>
<img src="simplest.svg" width="250" height="150"/>

* inline (XHTML or HTML5) --> new way from HTML5

<body>
  <b>scriptable SVG in XHTML</b><br/>
  <svg id="SVG" xmlns="http://www.w3.org/2000/svg" 
     onload="receive(evt)" width="600" height="200">
     <circle cx="100" cy="100" r="100" fill="green" />
  </svg>

</body>

Reference:
http://warunapw.blogspot.com/2009/07/svg-string-inline-with-html.html
http://raphaeljs.com/
http://keith-wood.name/svg.html
http://code.google.com/p/svgweb/
http://svgkit.sourceforge.net/SVGKit.html
http://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-javascript/3379830#3379830
http://stackoverflow.com/questions/588718/jquery-svg-vs-raphael
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

hj

Wednesday, April 25, 2012

SVG 101

No comments:

Post a Comment