BETTER WeB

Thursday, August 07, 2008

Best javascript chart generator

Here is a list of best chart generating javascript tools.

Labels: canvas, chart, html, javascript, svg

Saturday, June 14, 2008

what's new in firefox 3 for webdevelopers

CSS, CSS, CSS, DOM, Javascript, SVG.

Labels: css, DOM, firefox 3, javascript, svg

Friday, January 04, 2008

SVG progress in firefox

With bug 389746 and bug 390379 checked in . The firefox 3.0 will support all SVG filters.

Labels: filter, firefox, svg

Wednesday, January 02, 2008

SVG for 3D?

I saw some people using SVG to present 3D data. I don't like this idea. First, it is slow. Second there is a thing named X3D for it.

Labels: 3D, svg, X3D

Thursday, December 27, 2007

Dynamically create SVG with javascript

Following is an example of dynamically created SVG pattern with javascript and DOM. The name space part is tricky and can be frustrating for people not familiar with it. The hard parts are high lighted in red.

=============================



<?xml version="1.0" ?>

<html xmlns="http://www.w3.org/1999/xhtml" 

                 xmlns:svg="http://www.w3.org/2000/svg"

     xmlns:xlink="http://www.w3.org/1999/xlink"

     lang="en-US">

 <head>

  <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8"/>

  <title>SVG</title>

  <style type="text/css">

   #drawingPad{

    width:100px;

    height:100px;

    overflow:hidden;

    border:1px solid black;

    position:absolute

   }
  </style>

  <script type="text/javascript">

  <![CDATA[

//________________________________

var xhtmlNS = "http://www.w3.org/1999/xhtml";

var svgNS = "http://www.w3.org/2000/svg";

var xlinkNS ="http://www.w3.org/1999/xlink";

function makeCircle(x, y, r){

 var vCircle = document.createElementNS(svgNS, "svg:circle")

 vCircle.setAttributeNS( null, "cx", new String( x  ) + "px" );

 vCircle.setAttributeNS( null, "cy", new String( y  ) + "px" );

 vCircle.setAttributeNS( null, "r", new String( r ) +"px");

 vCircle.setAttributeNS( null, "style", "fill:blue");

 return vCircle;

}

function makeLine(x1, y1, x2, y2){

 var vLine = document.createElementNS(svgNS, "svg:line")

 vLine.setAttributeNS( null, "x1", new String( x1  ) + "px" );

 vLine.setAttributeNS( null, "y1", new String( y1  ) + "px" );

 vLine.setAttributeNS( null, "x2", new String( x2  ) + "px" );

 vLine.setAttributeNS( null, "y2", new String( y2  ) + "px" );

 vLine.setAttributeNS( null, "style", "stroke-width:2;stroke:red");

 return vLine;

}



function drawPattern(){

 var vPad = document.getElementById( "drawingPad" );

 var vSVGElem = document.createElementNS(svgNS, "svg:svg");

 var i;

 var r = 20;

 var vAX = new Array();

 var vAY = new Array();

 for( i = 0 ; i < 7 ; i ++ ){

  var vAngle = Math.PI * 4 / 7 * i

  var vX = Math.cos(vAngle) * r + 50

  var vY = Math.sin( vAngle ) * r + 50

  var vC = makeCircle(vX, vY, 4);

  vSVGElem.appendChild( vC);

  vAX[ i ] = vX

  vAY[ i ] = vY

  if( i > 0 ){

   var vLine = makeLine(vX, vY, vAX[ i - 1 ], vAY[ i - 1 ]);

   vSVGElem.appendChild( vLine );

   

  }

 }

 vPad.appendChild(vSVGElem) 

}

 ]]>-->

</script>

</head>

<body>

<form>

 <input type="button" onclick="drawPattern(); return false;" value="Click"/>

</form>

<div id="drawingPad">

 

</div>



</body>

</html>

=============================

Labels: javascript, svg

Monday, August 06, 2007

SVG ability in Safari 3beta and Firefox 3 Alpha

I tried to run both through the W3 SVG test suite. Of course both of them can't render all of the tests, their ability is IMHO on par. But I can't get focus on the URL bar after I run some tests in Firefox.

Labels: firefox, safari, svg

Thursday, June 28, 2007

major svg browser status

Mozilla http://www.mozilla.org/projects/svg/status.html Webkit/Safari http://webkit.org/projects/svg/status.xml Opera http://www.opera.com/docs/specs/opera9/svg/

Labels: firefox, opera, safari, svg

Saturday, May 27, 2006

Adobe should get involved with other venders' SVG implementation

I think Adobe should do something to help Mozilla, KSVG or even Opera to improve their SVG implementation. Why, because after SVG have been widely adopted, Adobe could make profit from 1st, illustrator, 2nd, SVG plugin for IE.

Labels: svg

Wednesday, April 27, 2005

Firefox turned on SVG

SVG has been turned on in firefox trunk builds. But it needs to be enabled by about:config

Labels: firefox, svg