HTML Academy
  • HTML Academy
  • Courses
  • Tutorials
  • Courses
  • Tutorials
  • Sign up
  • Log in
  • Home
  • Interactive courses
  • SVG basics
  1. An Introduction to SVG 0/15
  2. Designing SVG Shapes 0/20
  3. Dimensions in SVG 0/15

Chapter 3: Dimensions in SVG

11 tasks, 4 challenges

We will delve into how SVG graphics are scaled and learn how to work with the viewBox and preserveAspectRatio attributes.

Start
1. SVG Width and Height Task
2. The viewBox Attribute Task
3. viewBox and Dimensions Task
4. Challenge: Fish Challenge
5. The preserveAspectRatio Attribute Task
6. Flexible Background with preserveAspectRatio Task
7. Challenge: Flexible Margins Challenge
8. Alignment in preserveAspectRatio Task
9. preserveAspectRatio and viewBox Task
10. Filling the Space Task
11. Challenge: Rainbow Challenge
12. Units Task
13. Coordinate systems Task
14. Coordinate Systems and Transforms Task
15. Challenge: Yellow Leaf Challenge

Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

VISAMastercard

Log in

or

Forgot your password?

Sign up

Sign up

or
Log in

Restore access

Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

Forgot to connect your email to the profile? Email us and we’ll help.

We are using cookies to gather information which will help you use our website most effectively. You can read about this here or disable this feature if you want. By continuing to browse the site, you agree to our use of cookies.