HTML Academy
Flexible Background with preserveAspectRatio
Dimensions in SVG7/15
Back to the list of tasks
  • 1. SVG Width and Height
  • 2. The viewBox Attribute
  • 3. viewBox and Dimensions
  • 4. Challenge: Fish
  • 5. The preserveAspectRatio Attribute
  • 6. Flexible Background with preserveAspectRatio
  • 7. Challenge: Flexible Margins
  • 8. Alignment in preserveAspectRatio
  • 9. preserveAspectRatio and viewBox
  • 10. Filling the Space
  • 11. Challenge: Rainbow
  • 12. Units
  • 13. Coordinate systems
  • 14. Coordinate Systems and Transforms
  • 15. Challenge: Yellow Leaf
Alignment in preserveAspectRatio
  • Sign up
  • Log in

Register to take up challenges

Registration will only take a minute and let you save your study progress. You can register with your email and password or login via social networks.

or
Log in and continue
  • object.svg
  • style.css
SVG
<svg width="500" height="250"> <g id="colored-stripes"> <path fill="tomato" d="M0 0h20v140H0z"/> <path fill="lightseagreen" d="M20 0h20v140H20z"/> <path fill="gold" d="M40 0h20v140H40z"/> <path fill="cornflowerblue" d="M60 0h20v140H60z"/> <path fill="darkorange" d="M80 0h20v140H80z"/> <path fill="yellowgreen" d="M100 0h20v140h-20z"/> <path fill="purple" d="M120 0h20v140h-20z"/> </g> </svg>
CSS
svg { background-color: #ffffff; border: 1px solid #dddddd; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

100%
  • Goal
  • Result
  • Overlay
  • Differences
  • ?

Press Compare to send your code for review.

Failed to load the goal. Try later.

Goal — the interface you need to get.

Result — the way the server sees your code. Can differ from what you see in the mini-browser. The comparison is made between this result and the goal.

Overlay — semi-transparent result is shown above the goal.

Differences — the map of differences between the goal and the result.

Done 0%.
The code has been changed

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

VISAMastercard