Web Science/Part1: Foundations of the web/Web content/Media content/quiz

XML Challenge 1: Getting to know SVG

Copy the following file into your editor of choice and save it as "myfirstsvg.svg", then open up the file in a browser (Internet Explorer with the Adobe SVG plugin, Firefox 1.5+, Opera 9+, Safari 3+, or Chrome):

<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <style type="text/css">
    rect {
      fill: rgb(0,0,255);
      stroke-width: 1;
      stroke: rgb(0,0,0);
      fill-opacity:0.7;
    }
  </style>

  <rect width="300" height="100" transform="translate(50,150)" />

</svg>

Assuming this is the first time you've seen an SVG file, you might notice that it looks very similar to an HTML file, but with some obvious differences!

1. Change the rectangle so that it's filled with yellow
2. Make the rectangle's border a bit bigger and modify the color of the border (let's say, green!)
3. Any ideas what the fill-opacity might do? Test it out.
4. See if you can turn your rectangle into a square
5. Finally, can you modify the position of your rectangle?

Easy?!

XML Challenge 2: More SVG elements

Still using the same SVG file (myfirstsvg.svg), add the following element to your SVG:

  <circle cx="100" cy="150" r="40" />

Test it out and see if it does what you expect! Looks a bit boring though! Add some plain old CSS style, so that

1. your circle is filled with the color Blue,
2. your circle has a stroke similar to your rectangle
3. your circle has an opacity of 0.7

Note, you can also use CSS pseudo selectors, like :hover to change your shapes when the mouse hovers over them! (for eg: circle:hover {fill-opacity:0.3} )

Finally, see how you go arranging the Olympics logo:

1. Add another 4 circles to your file (you might want to 'translate' them so that they aren't all on top of each other)
2. Give each circle an id, just like you would an HTML element, then use this ID to make each circle a different colour.
3. Arrange the colours and the positions of your circles to form the Olympic logo

XML Challenge 3: Animating the Olympics with SVG!

Animating shapes in SVG is really easy! There's actually a tag called animateTransform to help us out, but unfortunately it's not yet supported by Firefox's native SVG, so we'll need to install the Adobe SVG plugin or Opera 9+.

Note that the animateTransform element goes inside the circle element! (Watch out for this, make sure that you don't close your circle element before your animateTransform element).

Modify one of your circles as follows:

<circle cx="100" cy="150" r="40">
  <animateTransform attributeName="transform" attributeType="XML"
                      type="translate" from="50,150" to="300,100" begin="0s"
                      dur="2s" fill="freeze"/>
</circle>

Now,

1. Try playing with the 'from', 'to', 'begin' and 'dur' attributes, testing to see what they do.
2. When you feel ready, have a go at creating an animation where 5 circles animate to form the Olympic logo! Your circles should all begin at the side of the page, and then animate to form the Olympic logo!

https://upload.wikimedia.org/wikipedia/commons/4/4c/Olympic-animated.svg