So I have a width and height of container and viewBox, can't change these things Only thing I can do is send this component a path
For now the SVG is now adjusting in it's container due to the size being too big
Can I change the aspect ratio / size of SVG via the path ?
Sample Code
<svg viewBox="-2 -3 24 24" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: inline-block; vertical-align: middle;"><path fill="#3E3E3E" d="M18.438 19.102a11 11 0 0 1-18.4-7.184c-.042-.504.372-.915.878-.915.507 0 .912.411.963.915a9.16 9.16 0 0 0 5.793 7.623A9.168 9.168 0 0 0 17.749 17.2h-2.663a.917.917 0 1 1 0-1.832h4.269a.917.917 0 0 1 .916.916v4.264a.916.916 0 0 1-1.833 0V19.1v.002ZM4.248 4.807H6.91a.917.917 0 1 1 0 1.832H2.64a.917.917 0 0 1-.917-.916V1.455a.916.916 0 0 1 1.833 0v1.448a11 11 0 0 1 18.407 7.184c.041.505-.373.915-.88.915-.505 0-.911-.411-.962-.915a9.161 9.161 0 0 0-5.794-7.623A9.168 9.168 0 0 0 4.249 4.807h-.002Z"></path></svg>
Again goal to achieve: make SVG to fit this viewBox and width height.
CodePudding user response：
No you can't. You'd have to change the SVG path to fit the box, but you can't "resize" per-se.
I manually resized your path to fit the box.
<path fill="#3E3E3E" d="M1.2 3.3H4a1 1 0 1 1 0 1.8H.6a1 1 0 0 1-.9-.9V0a1 1 0 0 1 1.9 0v1.4A11 11 0 0 1 20 8.6c0 .5-.4.9-1 .9a1 1 0 0 1-.9-1A9.2 9.2 0 0 0 12.3 1a9.2 9.2 0 0 0-10 2.3ZM17.4 16.1A11 11 0 0 1-1 8.9c0-.5.4-.9 1-.9.4 0 .8.4.9 1a9.2 9.2 0 0 0 5.8 7.5 9.2 9.2 0 0 0 10-2.3h-2.6a1 1 0 1 1 0-1.8h4.3a1 1 0 0 1 .9.9v4.2a1 1 0 0 1-1.9 0v-1.4Z"></path>
How I did it:
I used svgomg with precision: 1, to simplify the path to a point where it was small enough for me to actually manually edit.
Then I split it into two separate paths (top and bottom arrows) (using the
Zas the path separator), wrapped them in<g transform="translate(x, y)"></g>until it looked right, copied the remainder back into svgomg where it is smart enough to convert the transforms into a single path.
CodePudding user response：
You can set the transform attribute of the <path> (using scale and translate):
document.querySelector('path').setAttribute('transform', 'scale(0.9)')
See the snippet for example:
document.querySelector('path').setAttribute('transform', 'scale(0.9)')<svg viewBox="-2 -3 24 24" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: inline-block; vertical-align: middle;"><path fill="#3E3E3E" d="M18.438 19.102a11 11 0 0 1-18.4-7.184c-.042-.504.372-.915.878-.915.507 0 .912.411.963.915a9.16 9.16 0 0 0 5.793 7.623A9.168 9.168 0 0 0 17.749 17.2h-2.663a.917.917 0 1 1 0-1.832h4.269a.917.917 0 0 1 .916.916v4.264a.916.916 0 0 1-1.833 0V19.1v.002ZM4.248 4.807H6.91a.917.917 0 1 1 0 1.832H2.64a.917.917 0 0 1-.917-.916V1.455a.916.916 0 0 1 1.833 0v1.448a11 11 0 0 1 18.407 7.184c.041.505-.373.915-.88.915-.505 0-.911-.411-.962-.915a9.161 9.161 0 0 0-5.794-7.623A9.168 9.168 0 0 0 4.249 4.807h-.002Z"></path></svg>