CODEWITHSUNDEEP
svg
Ramon Tayag
Ramon Tayag

Reputation: 16084

How do you render SVG in a different size in HTML?

Given this svg:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <ellipse stroke="#000000" ry="210.999999" rx="259.000004" id="svg_1" cy="237.727263" cx="324.999989" stroke-width="5" fill="#FF0000"/>
 </g>
</svg>

How do I scale it to user 320x240 without having to recompute the numbers inside? Is this even possible?

Upvotes: 3

Views: 3797

Answers (2)

Boldewyn
Boldewyn

Reputation: 82814

Add viewBox="0 0 640 480" and set width="320" height="240" to the <svg> element to scale the SVG. you can go crazy on the width and height and control the aspect ratio with the preserveAspectRatio attribute.

Upvotes: 7

Robert Longson
Robert Longson

Reputation: 124269

Use the viewBox attribute to control what you can see in the page. Alternately wrap the content in a <g> element and set a scale transform of 0.5 on it.

Upvotes: 3

Related Questions