Assignments DE.SVG.0
Prev  Chapter 34. SVG - Scalable Vector Graphics I  Next

Assignments DE.SVG.0

Handing In Assignments

You must hand in by using git

Hand In by git

  • Create an empty repo on bitbucket.org, gitlab.com, or github.com,
  • git push your local repo to the above remote repo.
  • For node assignments please put the line(s)

    node_modules/

    into your .gitignore file.

Send a mail to with:

  • The word 'handin <subjectname>' in the subject line of your mail
  • The url of your repo(s).

Assignment DE.SVG.0

Create an HTML5 page with an inlined SVG with a viewbox of 400 x 200 pixel. The SVG must contain a yellow disk in the center. Thid disk must have a 10 pixel radius. The SVG must also have blue ellipsis drawn so that its horisontal and vertical minimum and maximum coordinates are just 10 pixel inside the size of the SVG viewbox. The SVG background color must be black. You must code the SVG by hand. No drawing programs allowed.

Assignment DE.SVG.1

In the previous assignment the term viewbox was used. In this assignment I want you to do some independent research on this subject.

You must make a short documentation on

  • What is a viewbox?
  • What is a viewport?
  • How do they relate to each other?
  • How to scale an SVG drawing's appearance on a web page?

You may use your solution to the previous assignment as illustration of your research, or you may create more targeted examples for that. Handin as an HTML5 page with your research as content.

Prev  Up  Next
JavaScript - SVG, More Details  Home  Chapter 35. SVG - Scalable Vector Graphics II