Editing the size of an SVG file

Question

<svg height="1000" width="977" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 841.743l185.535 -185.535l1.953 0q-66.402 -105.462 -66.402 -228.501 0 -177.723 124.992 -302.715t302.715 -124.992 302.715 124.992 124.992 302.715 -124.992 302.715 -302.715 124.992q-105.462 0 -197.253 -48.825l-193.347 193.347zm310.527 -415.012q0 98.627 70.308 167.958t167.958 69.332 167.958 -69.332 70.308 -167.958 -70.308 -167.958 -167.958 -69.332 -167.958 69.332 -70.308 167.958z"/>
</svg>

This svg will generate a search icon. It is written on the basis of 1000 hight and 977 width. If I change the width and the height it crops it and does not resize it. I would like to see a mathematical way or any tool online that can help me edit the code and resize it. I am using this on an HTML page and I know that I can just use css to resize it. However, I do not want to do that. I want to fix the svg file itself and resize it internally. Anyone has any idea on how to do that?

Answer 1

You can do it dynamically with JavaScript.

The working code in the snippet below requires that you add an id to the svg path (or rect or g or whatever) that you want to just fill your desired area. You also have to change the desired width and height to whatever you want.

Pros:

• You can re-use this routine for any shapes and any sizes you want.
• All calculations are done for you.
• You don't have to worry about aspect ratios, i.e. relative dimensions.
• You don't have to do anything to the svg code (other than potentially adding an id to the target shape, as described above) for any image coming out of your favourite drawing program or downloaded from online.
• You can re-use the same image with no internal modifications in different locations in your code, with each potentially being a different desired size.
• You could potentially make a single svg file (e.g. allMyIconsInOnePlace.svg) containing multiple images you want used in different places, and then just use the code to target one particular shape for one particular use by changing the shpId in the code.

Cons:

• Your stored svg code will be a little mis-leading, as the saved version won't contain the true information about its scaling which will only be determined at run-time.
• This code will have to be included and run every time you want to use the image this way.
• The only way to see the actual structure of the modified svg element would be at run-time, e.g., by using 'inspect element' in a browser debugger.

var shpId = "myShape";
var desiredWdth = 100;
var desiredHght =  60;

var shp = document.getElementById(shpId);
var svg = shp.ownerSVGElement;

var shpBBox = shp.getBBox();

var viewBoxStr =
  shpBBox.x      + " " +
  shpBBox.y      + " " +
  shpBBox.width  + " " +
  shpBBox.height;

svg.setAttribute("viewBox", viewBoxStr);

svg.width .baseVal.value = desiredWdth;
svg.height.baseVal.value = desiredHght;

<svg height="1000" width="977" xmlns="http://www.w3.org/2000/svg">
    <path id="myShape" d="M0 841.743l185.535 -185.535l1.953 0q-66.402 -105.462 -66.402 -228.501 0 -177.723 124.992 -302.715t302.715 -124.992 302.715 124.992 124.992 302.715 -124.992 302.715 -302.715 124.992q-105.462 0 -197.253 -48.825l-193.347 193.347zm310.527 -415.012q0 98.627 70.308 167.958t167.958 69.332 167.958 -69.332 70.308 -167.958 -70.308 -167.958 -167.958 -69.332 -167.958 69.332 -70.308 167.958z"/>
</svg>

Answer 2

It's very simple.

Convert the width and height attributes to a viewBox. A viewBox will, for your purposes, take the form:

"0 0 <width> <height>"

so in this case it will become:

"0 0 977 1000"

Then set the width and height to appropriate values for the size icon you want. You will normally want them to keep the same ratio as the original values.

<svg width="97.7" height="100" viewBox="0 0 977 1000" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 841.743l185.535 -185.535l1.953 0q-66.402 -105.462 -66.402 -228.501 0 -177.723 124.992 -302.715t302.715 -124.992 302.715 124.992 124.992 302.715 -124.992 302.715 -302.715 124.992q-105.462 0 -197.253 -48.825l-193.347 193.347zm310.527 -415.012q0 98.627 70.308 167.958t167.958 69.332 167.958 -69.332 70.308 -167.958 -70.308 -167.958 -167.958 -69.332 -167.958 69.332 -70.308 167.958z"/>
</svg>

Answer 3

If you just want a free solution to reliably scale or make any other alterations to an SVG graphic, have you considered free and open-source Inkscape?

From its Debian package description:

Most of the common vector formats are supported, including PDF, Adobe Illustrator and AutoCAD files, and it has unrivaled support for the SVG web graphics standard.

Install

Available on Mac, Linux, Windows.

For Windows, you can try Inkscape Portable if you like portable apps.

On Linux, for example Debian-based distributions, you can:

$ sudo apt-get install inkscape

Inkscape

Using a text editor, save the SVG code you posted, to a file, name it for example graphic.svg.

Start Inkscape.

Ctrl+O to see the Open dialog

Browse and open graphic.svg.

Observe: In your case, your graphic resembles a black and white magnifying glass.

Click once on the graphic to select it.

Observe: Inkscape handlebars indicate you have selected the graphic.

Ctrl-shift-m to open Transform panel.

Scale tab.

It currently says:

Width: 976.500

Height: 999.936

Change unit drop-down to px.

Check mark Scale proportionally.

Let's say you want the width to be approximately 200 pixels wide:

Width: 200

Press tab to exit the Width entry.

Observe: due to Scale proportionally, the height: has automatically been re-calculated and updated to a new value 205.824

Apply.

Close the Transform panel.

Observe: it appears smaller than the canvas.

Ctrl-shift-d to open Document Properties.

Observe: it currently says:

Width: 977

Height: 1000.00

click Resize page to content

click Resize page to drawing or selection

Observe: it now says:

Width: 201.00

Height: 205.82

Close the Document Properties dialog.

Ctrl-shift-s to get Save As dialog.

name: graphic2.png

Bottom right drop-down menu,

Change Inkscape SVG (*.svg) to Plain SVG (*.svg).

Save

So now you have succesfully created a smaller version of your original graphic.

Reasons

• Plain SVG (*.svg) is slightly smaller than the default Inkscape SVG (*.svg). 1.2K vs 2.1K

Further tweaks

If you look at the sizes:

• graphic.svg 472b
• graphic2.svg 1.2K

If minimizing file size is important to you, or for some reason you wish to eliminate all the additional meta tags that Inkscape provides, you can always use a text editor to assemble a final, smaller file, for example name it graphic3.svg.

For its opening SVG tag, borrow from your original code, but alter the width and height appropriately to the newer values. We saw earlier in Inkscape's Document Properties that the canvas was re-sized to:

Width: 201.00

Height: 205.82

So adapt this to the SVG attributes:

<svg height="206" width="201" xmlns="http://www.w3.org/2000/svg">

From graphic2.png, copy the <path ... > code.

End the file with a close SVG tag:

</svg>

Save, and now your new graphic3.png is about as small as your original graphic.svg

Answer 4

javascript:

function scaleSvgString(str, multiplicator){
  var result_string="";

  var current_number="";
  for (var i = 0, len = str.length; i < len; i++) {

    //means "is a number or a decimal separator"
    if( (str[i].charCodeAt()>=48 && str[i].charCodeAt()<=57) || str[i].charCodeAt()==46){
      current_number+=""+str[i];
    }else{
      if(current_number.length>0){
        var scaled_number=Number(current_number)*multiplicator;
        result_string+=""+scaled_number;
        //reset number buffer
        current_number="";
      }
      result_string+=""+str[i];
    }
  }

  return result_string;
}

call it like

scaleSvgString("<svg> ... </svg>", 0.5);

i haven't actually tested it, i hope it works lol