HTML Academy
Coordinate Systems and Transforms
Dimensions in SVG15/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
List of tasks
  • 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="270" height="330"> <g id="leaf"> <path d="M127.244 69.907c-7.012-30.372-20.16-50.47-39.44-60.295-28.922-14.736-45.937-12.5-57.68 10.81-11.74 23.31-7.59 43.18 26.81 55.66 22.935 8.317 46.37 6.26 70.31-6.175z" fill="#F8E71C"/> <path d="M92.977 50.53c10.727 5.67 22.003 12.268 33.827 19.795-16.098-10.374-31.272-16.264-53.49-25.272-.652 7.04 1.18 15.867 8.877 24.09l-.39.72c-8.13-8.68-13.212-18.585-12.81-26.568-1.61-.656-3.257-1.33-4.943-2.024-8.674-3.57-13.46-5.556-17.515-7.32-3.743 12.1-4.338 24.447 4.538 32.815l.168.982C40.82 57.925 37.698 45.84 41.94 31.91c-.564-.256-1.138-.518-1.73-.79-4.29-1.966-13.18-6.5-14.352-7.115C12.422 16.95 7.088 14.85.495 9.287L1.325.85c6.3 5.313 19.45 15.87 32.63 22.79 1.172.617 3.696 1.907 7.92 3.844 4.588 2.103 8.027 3.6 14.637 6.347C65.39 25.23 77.838 22.67 92.077 25.35l-.27.804c-13.152-2.475-23.136 1.494-30.973 9.47l4.735 1.95c7.453 3.067 15.227 6.677 23.322 10.83 5.097-2.452 13.47-2.288 22.484-.91l-.74.633c-8.56-1.31-13.58-.047-17.66 2.405z" fill="#F5A623"/> </g> </svg>
CSS
svg { background-color: #ffffff; background-image: url("branch.svg"); background-repeat: no-repeat; background-position: 0 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