HTML Academy
SVG Width and Height
Dimensions in SVG2/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
viewBox and Dimensions
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The viewBox Attribute

You may have noticed that resizing the dimensions of an SVG element does not affect its content because the content is rendered on an infinite canvas, and it is not clear what size area needs to be stretched or shrunk.

You can change this behavior by specifying the dimensions of the area that will be stretched using the viewBox property (it can only be set with an attribute):

<svg viewBox="0 0 237 300" width="350" height="200">
  …
</svg>

The first two numbers are the X and Y coordinates of the upper left corner of the scaled area. The other two are its width and height. The values are specified in pixels. You do not need to specify the units.

The viewbox can be used to scale the created content so that it fits in its entirety in the container and is then centered.

Comments

  • object.svg
  • style.css
SVG
<svg width="320" height="240"> <rect width="100%" height="100%" fill="none" stroke="yellowgreen" /> <g fill="orange" stroke="saddlebrown" stroke-width="15"> <circle r="23" cx="32" cy="31" /> <circle r="23" cx="168" cy="31" /> </g> <ellipse fill="saddlebrown" rx="84" ry="70" cx="100" cy="80" /> <circle fill="none" stroke="#000000" stroke-opacity="0.5" stroke-width="3" r="4" cx="100" cy="135" /> <g> <ellipse fill="orange" rx="24" ry="28" cx="77" cy="78" transform="rotate(-30,77,78)" /> <ellipse fill="white" rx="14" ry="16" cx="79" cy="83" transform="rotate(-30,79,83)" /> <circle fill="black" r="9" cx="82" cy="87" /> <circle fill="white" r="3" cx="84" cy="83" /> </g> <g> <ellipse fill="orange" rx="24" ry="28" cx="123" cy="78" transform="rotate(30,123,78)" /> <ellipse fill="white" rx="14" ry="16" cx="120" cy="83" transform="rotate(30,120,83)" /> <circle fill="black" r="9" cx="118" cy="87" /> <circle fill="white" r="3" cx="121" cy="83" /> </g> <g stroke="#000000" stroke-opacity="0.5" stroke-width="5" stroke-linecap="round"> <path d="M55,45 68,42" /> <path d="M145,45 135,42" /> </g> <g> <ellipse fill="black" rx="25" ry="15" cx="100" cy="107" /> <ellipse fill="white" fill-opacity="0.1" rx="17" ry="9" cx="102" cy="103" /> <ellipse fill="white" fill-opacity="0.1" rx="8" ry="4" cx="104" cy="100" /> </g> </svg>
CSS
svg { border: 2px solid teal; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0
    1. Assign the top-left corner coordinates 0 0 and the dimensions 200px x 150px to the SVG element viewBox.
    2. Delete the width and height, and see how SVG behaves when it has a viewBox and no dimensions.

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

    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.