SVG 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
(written 2011-04-24)

 Q913 - Object Orientation and General technical topics - Computer Graphics Principles
  [3261] Scalable Vector Graphics - easy, low bandwidth, high resolution, dynamic. - (2011-04-23)
  [3211] Computer Graphics in PHP - World (incoming data) to Pixel (screen) conversion - (2011-03-24)
  [3148] OpenGL / C / C++ - an example to get you started - (2011-01-26)
  [3049] Computer Graphics is fun - even if Java Applets are Old Hat - (2010-11-13)
  [2992] Matplotlib - graphing in Python - teaching examples - (2010-10-10)
  [2758] But what will you DO with all those pictures? - (2010-05-09)
  [2633] Why do I teach niche skills rather than mainstream? - (2010-02-13)
  [2245] Client side (Applet) and Server side (Servlet) Graphics in Java - (2009-06-17)

Back to Scalable Vector Graphics - easy, low bandwidth, high resolution, dynamic.

Previous and next or Horse's mouth home

Forward to Come as a customer, leave as a friend - Well House Manor, Hotel, Wiltshire

Easter on the Canal - near Melksham, Wiltshire
Alternative Vote (AV) - cutting the crap
Alternative Vote (AV) - explaining and an example
Come as a customer, leave as a friend - Well House Manor, Hotel, Wiltshire
Some SVG Elements, pixel and percent positioning
Ruby - a training example that puts many language elements together to demonstrate the whole
Our library in Melksham
Morning in Melksham
All possible combinations from a list (Python) or array (Ruby)