Scaling SVG

This function is part of icon manipulation functions in Iconify Tools.

Function scaleSVG() changes icon size.

For most icons this function is not needed, you can change size by changing width and height properties, but it is available anyway.

Usage

Function has the following parameters:

• svg, SVG. Icon instance.
• scale, number. Amount to multiply icon dimensions by.

Example

svgo.ts

tsimport { SVG, scaleSVG, runSVGO } from '@iconify/tools';

const svg = new SVG(
   '<svg xmlns="http://www.w3.org/2000/svg" width="2048" height="2048" viewBox="0 0 2048 2048"><path d="m387.19 644.317 128.875 1231.76h1024.807l118.813-1231.47H387.19zm144.356 130.035h985.428l-94.044 971.496H633.62z" color="#000"/><path fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.344" d="m7.033 1040.98.944 7.503m5.013-7.503-.943 7.503" transform="matrix(96.7529 0 0 87.185 55.328 -89815)"/><path d="M758.141 337.32 343.458 458.648v60.76h1361.023v-60.76L1284.767 337.32z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="69.952" d="M793.262 211.444h461.512v168.06H793.262z"/></svg>'
);

// Reduce size by 64 to get 32x32 icon
scaleSVG(svg, 1 / 64);

// Optimize icon
runSVGO(svg);

// Output result
console.log(svg.toString());

Result:

svg<svg width="32" height="32" viewBox="0 0 32 32"><path d="m6.052 10.07 2.014 19.253h16.018l1.857-19.248H6.05zm2.256 2.033H23.71l-1.47 15.185H9.903z" color="#000"/><path fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.344" d="m7.033 1040.98.944 7.503m5.013-7.503-.943 7.503" transform="matrix(1.5122 0 0 1.3627 .865 -1403.808)"/><path d="M11.85 5.272 5.368 7.17v.95h21.273v-.95l-6.56-1.897z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.093" d="M12.399 3.305h7.213v2.627H12.4z"/></svg>