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

35.7. Assignments DE.SVG.0

Submission
You must submit assignments using git
Create Repo
  • 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 the line node_modules/must be in your .gitignore file.
Submit
By email to with:
  • The word 'submission <subjectname>' in the subject line
  • The url(s) of your repo(s) in the body

35.7.1. 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.

35.7.2. 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
35.6. JavaScript - SVG, More Details Home Chapter 36. SVG - Scalable Vector Graphics II