Scale SVG while keeping some points fixed

scale svg to fit div
svg transform=scale
svg preserveaspectratio
svg viewbox
scale svg path
svg viewport
svg padding
d3 viewbox

I want to display an svg shape on an html page where certain points should have a fixed position.

In the images below, the red circles represent points that should keep their exact position. Beyond the green points, on the left and right side, is where points are not fixed and can scale. How could this be achieved?

I tried various forms of scaling, as well as experimenting with the viewbox and preserveAspectRatio attributes, but none have had the desired effect.

EDIT

here is the svg definition. I'm not sure the order of the points, but the top left is 13,-12. I tried changing these to percentages, but doing so in my svg editor, inkscape, deletes the point and several others around it.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
  <path d="m 32.043776,21.922259 c -4.3888,32.42227 33.58333,44.38479 62.94249,61.98573 64.330284,22.939391 72.648644,69.263531 22.383804,131.433121 -25.509995,25.04202 -103.692494,7.65258 -127.798134,-15.30517 -20.8697,-57.14796 -21.34432,-171.108891 -20.66205,-174.861331 8.03521,-44.19367 13,-12 47.82864,-18.5575098 8.45282,0 15.30525,6.8523498 15.30525,15.3051598 z" fill="#f9fdfd"/>
</svg>

I'm not very sure I understand you but, in my opinion in this case I would animate the viewBox attribute and the width.

itr.addEventListener("input",()=>{
  let val = parseInt(itr.value);
  let vb = `${-val} 50 ${2*val} 200`
  let w = 2*val;
  test.setAttributeNS(null,"viewBox",vb)
  test.setAttributeNS(null,"width",w)
})
svg {
  border: 1px solid;
  display: block;
  margin: 1em auto;
}
p {
  text-align: center;
}
<p><input id="itr" type="range" min="100" max="250" value="250" /></p>
<svg id="test" width="500" height="200" viewBox="-250 50 500 200">
<path fill="lightgrey" d="M-250,0C-250,0,-130,35,-91,51C-52,67,-23,78,-1,81C21,84,29,78,34,81C39,84,42,86,43,105C44,124,51,133,43,136C35,139,-30,103,-38,165C-46,227,75,207,127,208C179,209,239,212,257,236C257,266,257,296,257,326C88,326,-81,326,-250,326C-250,217.333,-250,108.667,-250,0z"/>
</svg>

How to Scale SVG, > , and set one of height or width to auto . The browser will adjust it so that the overall aspect ratio matches the viewBox . Stack Overflow Public questions and answers; Keep <text> element scaled inside <svg> with viewBox. Scale SVG while keeping some points fixed. 1.

It seems that you are looking to slice the svg with preserveAspectRatio.

body {
  margin: 0;
}

#test {
  width: 100%;
  height: 100%;
  position: absolute;
}

.content {
  position: relative;
  padding: 30px;
}
<svg id="test" viewBox="-250 0 500 300" preserveAspectRatio="xMidYMin slice">
<path fill="lightgrey" d="M-250,0C-250,0,-130,35,-91,51C-52,67,-23,78,-1,81C21,84,29,78,34,81C39,84,42,86,43,105C44,124,51,133,43,136C35,139,-30,103,-38,165C-46,227,75,207,127,208C179,209,239,212,257,236C257,266,257,296,257,326C88,326,-81,326,-250,326C-250,217.333,-250,108.667,-250,0z"/>
</svg>
<div class="content">
  <h1>HTML Ipsum Presents</h1>
  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
    sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
</div>

SVG Positioning, the group: The first to use <g> with transform attribute as Aaron wrote. An SVG image with fixed dimensions will be treated just like a raster image of the same size. Source image examples Before diving in to look at the results of using different kinds of source images and seeing how they look when used with background-size , it would be helpful to look at a few example source images that have different dimensions

You won't be able to do this very well if the "fixed" areas are in the center. IE if the left points AND right points need to scale. The problem is that fixed points are referenced from the top left.

Fix: SVGs support both percentage based and fixed unit (px) measurements. Simply crack open the SVG code and add/change units where necessary.

Tip: remake the image with a viewbox of 100px x 100px so you have valid values to convert to percents.

Make SVG Responsive, : vector images do not adjust themselves to the size of the viewport by default. Using CSS transforms, we have the option of setting the the appropriate transform-origin on our SVG element, or of chaining translates before and after the scale — first we translate the system of coordinates so its origin is at the 50% 50% point of our SVG element, then apply the scale, and then reverse the first translation.

SVG viewBox Attribute, element that means we can set the coordinates as well as width and height. Attribute Values: min-x: It is used to set the horizontal axis. I know that I can keep aspect ratio when scaling images by pressing the Ctrl key. But I really don't like this default. Is there a way to modify inkscape, to make scale and keeping aspect ratio

10 golden rules for responsive SVGs, SVG looks great at any scale, but it can scale in so many different ways we have a certain idea about how images should scale, and SVG doesn't area to keep the width:height aspect ratio constant, but it won't scale the It defines the origin of the SVG coordinate system, the point where x=0 and y=0. Note: As of SVG2, transform is a presentation attribute, meaning it can be used as a CSS property. However, be aware that there are some difference in syntax between the CSS property and the attribute.

Resizing an SVG When the Window is Resized in d3.js, While it doesn't matter to SVG (which will measure the viewBox and and only adds to code bloat and file size, so it's better to truncate it at this point. By keeping the height and width as attributes, we can size them to the  The preserveAspectRatio attribute indicates how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio.. Because the aspect ratio of an SVG image is defined by the viewBox attribute, if this attribute isn't set, the preserveAspectRatio attribute has no effect (with one exception, the <image> element, as described below).

Comments
  • does it have to scale or could you mask it? My understanding is that you want the center area to remain while the rest is scaled (cut off). Is that correct?
  • I think it has to scale. The design should look like the top image on mobile, but as it scales to tablet and desktop sizes, it should start to look more like the bottom image
  • Do you have the actual image you can share? I have a few ideas but they're all dependent on what's actually being scaled
  • I tried your solution below, to no avail. I edited my post to include the svg.
  • That's essentially the "mask" solution I was referencing in the comments. Nice example!
  • Not exactly. In your example, as you scale vertically you can see that the points at the center are not fixed and the space from them to the right side of the viewport becomes smaller and smaller