Some SVG Elements, pixel and percent positioning
Archive - Originally posted on "The Horse's Mouth" - 2011-04-24 07:02:31 - Graham EllisSVG Elements can be specified in terms of absolute co-ordinates of fixed pixel positions - and these two images which are generated from the same SVG file illustrate how that difference can be used to generate an image which varies as the window in which is called up - but it varies only in parts. So the size of the text has remained the same in both examples (good - I like to be able to read a diagram!) and the text box around the fixed label has also been anchored to the pixel co-ordinates.
I have also used this demonstration to show overlapping graphic elements; rather than four rectangles of the same size, I have filled the whole area with one rectangle and added three further rectangles over it. The colour of the borders also makes an interesting demo ... and you'll note that the borders show up as halfwidth at the edges, illustrating how SVG clips. There's a lot in this one demo!
The full source code for this SVG graphic is [here]. We don't cover the SVG specification in detail on any courses, but on the PHP Techniques Workshop we'll show you how to generate such graphics from a script, and we can cover their generation on other private courses or on special days - this is most relevant under Python / Django and Ruby / Rails.
If you call up the SVG directly - [here] - you should be able (depending on your browser) to dynamically rescale