Scale a SVG without changing his position in C++

svg transform=scale
svg scale
svg preserveaspectratio
scale svg to fit div
svg transform-origin
svg rotate around center
svg scale path
center svg in viewbox

I'm currently working on a project for my school. I need to make a SVG landscape generator in C++. My teacher give us different C++ functions which draw svg forms on a output.svg. We then open the file in a web browser and the generated landscape appears. His functions write HTML5 tags to draw svg like <circle> and <polygon>.

For example the function to draw an hexagon:

void Svgfile::addHexagone(double x1,double y1,double x2,double y2,double x3,double y3,double x4,double y4,
                      double x5,double y5,double x6,double y6, std::string colorFill){
m_ostrm << "<polygon points=\"" << x1 << "," << y1 << " " << x2 << "," << y2 << " " << x3 << "," << y3
        << " " << x4 << "," << y4 << " " << x5 << "," << y5 << " " << x6 << "," << y6
        << "\" style=\"fill:" << colorFill << "\" ></polygon>";

The problem is my program needs to scale differently each SVG object of my landscape to add variety. I made a very simple rock represented by a grey hexagon using addHexagone. But <polygon> use the position of 6 points, and the only way I find to resize it is to multiply each x and y of each points by a variable *size. It's working, but it changes the position of my shape which is not what I need. I've read some docs about ViewBox attribute on a SVG but I didn't manage to use it. I also tried to add a attribute transform='size(10em)' but nothing changed.


To scale an object without changing its position, you must first find its position. One way of defining that is the 'center of mass' Find the center of mass of points method (just use 1 for each point as 'mass', so it's a simple average). Once you have the position, subtract it from all points of your object (in this case, polygon), this will bring it with its center of mass positioned at the origin, then scale the new point coordinates as you did, by multiplying with the scale. Then simply add back the center of mass coordinates to each point of your object, and you are done.

Basic Transformations, <svg width="30" height="10"> <g fill="red"> <rect x="0" y="0" width="10" scale() changes the size of an element. b, c, d, e, f) transformation which maps coordinates from a previous coordinate system into a That means, the units you specify for the element and its children might not follow the 1:1 pixel  How to Scale SVG to Fit within a Certain Size (without distorting the image) Probably the most common requirement is to have an SVG icon scale to fit a specific size, without distortion. The viewBox attribute is really all you need here, although you can use preserveAspectRatio to adjust the alignment.


You can use transform property, just as in example:

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 200 200">
<g>
    <circle cx="20" cy="20" r="10"/>
 </g>
<g transform="scale(2)">
    <circle cx="50" cy="50" r="10"/>
</g>
</svg>

How to Scale SVG, The following is a guest post by Amelia Bellamy-Royds. Scaling to fit a certain size, without distorting the image; Scaling to fit a certain size, If you use an <​img> to embed your SVG, setting height and width will make the  Because the svg object’s default transform origin is at the top left hand corner or (0, 0) (0, 0) (0, 0) and not the centre of the object, you need to shift or translate the object so that the upper left corner is at the centre of the svg object. You then need to apply the scaling transformation and then move the element back to its original position.


I'm not sure why we should be doing your assignments for you...

Obviously you need to scale your heagon points before you position it. Make a function that generates the hexagon points you want and then call your addHexagon() fmethod.

Something like this:

void generateHexagon(double centreX, double centreY, double hexagonSize, std::string fillColour)
{
  double[][]  pts = new double[6][2];
  for (int step=0; step<6; step++)
  {
    double angle = step * 60f;
    pts[step][0] = centreX + hexagonSize * cos(angle);
    pts[step][1] = centreY + hexagonSize * sin(angle);
  }
  Svgfile::addHexagone(pts[0][0], pts[0][1],
                       pts[1][0], pts[1][1],
                       pts[2][0], pts[2][1],
                       pts[3][0], pts[3][1],
                       pts[4][0], pts[4][1],
                       pts[5][0], pts[5][1],
                       fillColour);
}

Transforms on SVG Elements, Its result does not depend on the position of the system of coordinates. Scaling changes the distance from the origin of the element's system of coordinates to  In contrast to the “<g>” element, the nested “<svg>” elements allow you to change the position of multiple shapes at once. Transforming Elements. The CSS attribute “transform” not only scales and rotates HTML elements, but SVG shapes as well. However, the SVG interpretation of “transform” is different from the HTML one.


Coordinate Systems, Transformations and Units, However, a transform property on an SVG viewport's element will modify the viewport If align is not 'none' and meetOrSlice is 'meet', set the larger of scale-x and scale-y Since CSS positioning properties are not provided on the outermost svg then the SVG user agent should set its initial value for the size of a px unit in  Resizing the responsive SVG in the browser makes the SVG shrink in size, without affecting the position and spatial relationships of the content inside of it. By nesting svg elements, we can create separate “layers” inside the root <svg> that we can then control so that the contents of these layers would change position inside the root svg as the viewport size changes.


How to resize a SVG image - Ayumi Saito, SVG is mostly common used for images and icons to… I suppose it worth writing my finding about resizing SVG in a blog post. he or she will send you images with SVG format, not JPEG or PNG. Open the SVG file with your text editor. So you just have to change width and height to what you want. scale() changes the size of an element. It takes two numbers, the first being the x scale factor and the second being the y scale factor. The factors are taken as the ratio of the transformed dimension to the original. For example, 0.5 shrinks by 50%. If the second number is omitted, it is assumed to be equal to the first.


SVG viewBox Attribute, It is used to scale the SVG element that means we can set the coordinates as well as So with the help of these values, we can scale the SVG vector and change the Without viewBox --> If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your  If you position this SVG in an 800×600 pixel area, each SVG unit maps directly to a screen pixel. However, the beauty of vector images is they can be scaled to any size.