a simple svg textbox created with xslt

as you can see from my last several post, im working a lot with SVG+XSLT lately, this should ultimately result in a collection of useful extension elements for charting, GUI programming and misc graphics stuff. i got lots of examples and experiments laying around, i thought i might share this one, for now. this is a simple textbox, that works in Opera and FireFox. you can use this textbox in xhtml or svg: and here is the stylesheet used. and here is a simplyfied prototyp, that does not use XSLT, and shows how the script works.

scriptable progress bar: mixing XHTML,SVG,XSLT,CSS and JavaScript

this is a step by step guide on how to extend xhtml with elements in your own namespace , render your elements with SVG, style the output with CSS and make the whole thing scriptable. so lets create a programmable progressbar. in the end it should look something like:

an inline SVG barchart created with XSLT styled with CSS

and again a chart, this time i took template from the first chart and modify it a bit , so i can style the result with CSS. in this example, you can switch the stylesheet to an alternate stylesheet if you are here with Opera or Firefox (the example does not work in IE+ASV at all since CSS does not work for inline SVG in IE). notice the nice hover effect on the bars. all done in XSLT SVG and CSS, no script!

a dynamic coin stack chart

this coin stack chart is a derivation of the chart in my previous post. i use the same chart syntax, but a different xslt stylesheet. below you can see a png version of that chart , i first transformed it into pure svg with saxon, and then rendered it to png with batik.

a barchart extension written in xslt using SVG

this barchart extension is useable in XHTML,SVG,XSL:FO,Standalone or in any other xml based language. the following svg file is the result of the transformation of the file svg.svg. i've used saxon to create it.

Styling XHTML with SVG using XSLT - Part II

So in Part I of this tutorial we used XSLT to style XHTML, now lets add some SVG... So in this example we add a rect element in a custom namespace. We bind the prefix "my" to an example URI, here I use "http://example.com/namespace". We then make up a new element called rect in the "my" namespace.

Styling XHTML with SVG using XSLT - Part I

Namespaces in XML are used to identify vocabularies. The xmlns attribute is used to specify the namespace for the current Element and all its children. So in this example we tell the browser that the HTML element and all its children are elements in the XHTML namespace and therefor should be treated as XHTML (i.e.: get rendered ...).