The result is the bit map positioned at x,y and scaled to fit the height and width specified. Notice that the image tag goes between the svg tags just like an other SVG drawing operation i.e. it is not an HTML element.
At this point you might be just beginning to think that this is all a bit primitive. After all who needs another way to draw a circle?
You will have to take it on trust that SVG is a very powerful graphics language that includes some very advanced facilities including animation commands.
The path command (in which L is read as LineTo and M is short for Move) allows you to draw arbitrary Bezier or polyline path. For example this draws a triangle:
<path d="M 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" stroke-width="3" />
Of course it would be drawn in the same place every time but you can also specify x,y, width and height to map the drawing to the specified rectangle. Only slightly more advanced is the use of the "transform" attribute to scale, translate and rotate the graphic.
You can also define your own fills. For example a simple linear gradient fill can be defined as:
Radial gradients are just as easy and you can define pattern fills. There are also advanced filter effects, animation controls, clipping, masking and the ability for script languages to interact with graphical objects via events and properties.
These will be explained in future articles but for now let's leave the story here.
Two 4-week online courses from the Raspberry Pi Foundation have just opened on the Future Learn Platform. Although aimed primarily at teachers, anyone can enroll and the discussion boards are already [ ... ]