HTML Academy
Filling the Space
Dimensions in SVG11/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
Units
  • 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="300" height="400" viewBox="0 0 400 200"> <g id="rainbow" stroke-width="10" transform="translate(25 30)" stroke-linecap="round" fill="none"> <path stroke="#D0021B" d="M351,176 C351,78.797884 272.425974,0 175.5,0 C78.5740264,0 0,78.797884 0,176"/> <path stroke="#F5A623" d="M342,176 C342,83.7684468 267.455411,9 175.5,9 C83.5445892,9 9,83.7684468 9,176"/> <path stroke="#F8E71C" d="M332,176 C332,88.7390095 261.708706,18 175,18 C88.2912943,18 18,88.7390095 18,176"/> <path stroke="#7ED321" d="M323,176 C323,94.261857 256.738143,28 175,28 C93.261857,28 27,94.261857 27,176"/> <path stroke="#50E3C2" d="M315,176 C315,99.2324198 252.76758,37 176,37 C99.2324198,37 37,99.2324198 37,176"/> <path stroke="#4A90E2" d="M305,176 C305,104.202983 247.020875,46 175.5,46 C103.979125,46 46,104.202983 46,176"/> <path stroke="#BD10E0" d="M295,176 C295,109.173545 241.27417,55 175,55 C108.72583,55 55,109.173545 55,176"/> </g> </svg>
CSS
svg { background-color: #ffffff; background-image: url("road-landscape.svg"); background-repeat: no-repeat; background-position: 50% 0; 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