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);
});
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
