How to Scale Svg Path to Fit The Window Size

How to scale SVG path to fit the window size?

If you want your SVG to scale to fit the screen (or any parent container), it needs to have a viewBox attribute. This attribute tells the browser the dimensions of the SVG content. Without it, the browser has know way of knowing how much it needs to be scaled.

Your path is about 3780 width, and the bottom of it is at y=144. So a reasonable value of viewBox would be:

viewBox="0 0 3780 150"

document.getElementById("MyPath").setAttribute("d", document.getElementById("Path").getAttribute("d"));var tl = new TimelineMax({  repeat: 0,  delay: 1});tl.to("#Text", 3, {  attr: {    startOffset: '50%',    opacity: 1  }});

window.addEventListener('scroll', function() {  tl.to("#Text", 3, {    attr: {      startOffset: '100%',      opacity: 0    }  });}, true);

@import url(https://fonts.googleapis.com/css?family=Oswald);body {  background-color: #222;}
svg {  overflow: visible;  width: 100%;  height: 100%;  background-color: #fff;  left: 0;  top: 0;  position: absolute;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/TextPlugin.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script><svg viewBox="0 0 3780 150" xml:space="preserve"><defs><path id="MyPath"/></defs><path id="Path" fill="none" stroke="#000" stroke-miterlimit="10" d="M0,188.2c186.2,84,261.8,84.9,440,66.4s295.2-130,535.2-129.4c240,0.6,357,144.3,591.1,144.3 s450.1-141.2,651.1-141.2c271.7,0,354.2,141.2,612.1,141.2c240,0,423-141.2,669.1-141.2c119.1,0,202.3,33.8,281,68.7"/><text font-size="7em" >  <textPath id="Text" fill='#88CE02' font-family=Oswald xlink:href="#MyPath" opacity=0 startOffset="0%" letter-spacing="5px">Love the little things.</textPath>  </text></svg>

How can I get my SVG path to scale to fit?

Use scale in the transform attribute in an outer <g> container.

transform="scale(x, y)"

With a little JavaScript, you can find the dimensions about an arbitrary path:

var box = path.getBBox();
var eleWidth = box.width, eleHeight = box.height;

Resizing path-based SVG to fit the screen

I accidentally switched up the height and width in the viewBox. Once I put the right values in, it was properly resizing to the height and width of the viewport.

<svg viewBox="min-x min-y x y">

How can I make an svg scale with its parent container?

To specify the coordinates within the SVG image independently of the scaled size of the image, use the viewBox attribute on the SVG element to define what the bounding box of the image is in the coordinate system of the image, and use the width and height attributes to define what the width or height are with respect to the containing page.

For instance, if you have the following:

<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

It will render as a 10px by 20px triangle:

Now, if you set only the width and height, that will change the size of the SVG element, but not scale the triangle:

<svg width=100 height=50>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

If you set the view box, that causes it to transform the image such that the given box (in the coordinate system of the image) is scaled up to fit within the given width and height (in the coordinate system of the page). For instance, to scale up the triangle to be 100px by 50px:

<svg width=100 height=50 viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

If you want to scale it up to the width of the HTML viewport:

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Note that by default, the aspect ratio is preserved. So if you specify that the element should have a width of 100%, but a height of 50px, it will actually only scale up to the height of 50px (unless you have a very narrow window):

<svg width="100%" height="50px" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

If you actually want it to stretch horizontally, disable aspect ratio preservation with preserveAspectRatio=none:

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

(note that while in my examples I use syntax that works for HTML embedding, to include the examples as an image in StackOverflow I am instead embedding within another SVG, so I need to use valid XML syntax)

SVG viewBox=0 0 100 100 wont scale my path to 100%?

The viewBox is like a canvas size. So drawings outside of this view box will be clipped. Like css overflow: hidden. And your drawing has a size of width 123px and height 170px. So you have to change the view box to this value. Check our some docs.

If you want to keep the viewbox of 100 x 100 px, you need to change your drawing element size (path).

The view box has nothing to do with the scale. It's just the canvas size. A rect clip with width, height and offset (x y w h) for the SVG elements inside. And the SVG tag's width and height attributes are for scale the rendered image.

<div className="svgPathContainer">
   <svg width="100%" height="100%" viewbox="0 0 123 170" preserveAspectRatio="none">
     <path d="M82 88L0 0H123V170H0L82 88Z" fill="#F9B300" />
  </svg>
</div>

Make svg scale to full screen size

I think you are misunderstanding how viewBox works. It should describe the dimensions of your SVG contents, not your screen. The purpose of viewBox is to tell the browser the dimensions of the graphic content, so it knows how much it needs to scale it to fit the parent container.

So you need to find the minX, minY, width and height of the map. If it's the same file I found by Googling, then it looks like the correct viewBox is: viewBox="0 0 1010 666". Try that.

---

Related Topics