Affinity Designer how can SVG be stretched to any size?

[kosh]

Hello everyone. There is an icon in SVG format, I understand that this is a mathematical formula, but still, the icon is 16x16, downloaded from the Internet, as in AD, to resave it with other sizes and positioning as in the original format horizontally and vertically centered, for example in size 30x30 in SVG format. Is it easier to stretch it on a canvas of any size and center it?

[GarryP]

An SVG can be stretched to any size – just use the normal resizing functionalities of the software.

However, you should be aware that some SVGs can contain, or be wholly made from, bitmaps and, as such, may not be stretchable without making the pixels in those bitmaps larger (or smaller).

If you can supply us with an example SVG, and tell us more about what you want to do with it, we can probably advise further.

[kosh]

6 hours ago, GarryP said:

An SVG can be stretched to any size – just use the normal resizing functionalities of the software.

However, you should be aware that some SVGs can contain, or be wholly made from, bitmaps and, as such, may not be stretchable without making the pixels in those bitmaps larger (or smaller).

If you can supply us with an example SVG, and tell us more about what you want to do with it, we can probably advise further.

Thanks for the reply. Well, for example, download any SVG icon, say from here

_https://icons.getbootstrap.com/icons/arrow-down-circle/

the icon is saved in 16x16 sizes. You need to display it on the site in a 30x30 block, of course you can do it like this width="30" height="30". In this case, there may be incorrect positioning and coordinates. There are services that change the size and correct proportions. But how to do it in AD?

[David in Яuislip]

You need to display it on the site in a 30x30 block, of course you can do it like this width="30" height="30".
Yes, that's what I would do

In this case, there may be incorrect positioning and coordinates.
I very much doubt that

But how to do it in AD
Dunno, don't use it but I opened it in APhoto2, resized the document to 30x30 and exported it

Original
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z"/>
</svg>

Serif
<svg width="100%" height="100%" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M1.875,15c0,7.2 5.925,13.125 13.125,13.125c7.2,0 13.125,-5.925 13.125,-13.125c0,-7.2 -5.925,-13.125 -13.125,-13.125c-7.2,-0 -13.125,5.925 -13.125,13.125Zm28.125,0c0,8.229 -6.771,15 -15,15c-8.229,0 -15,-6.771 -15,-15c-0,-8.229 6.771,-15 15,-15c8.229,-0 15,6.771 15,15Zm-14.063,-6.563c0.001,-0.514 -0.423,-0.937 -0.937,-0.937c-0.514,-0 -0.938,0.423 -0.938,0.937l0.001,10.862l-4.024,-4.025c-0.176,-0.176 -0.415,-0.275 -0.664,-0.275c-0.515,-0 -0.939,0.424 -0.939,0.939c0,0.248 0.099,0.487 0.275,0.663l5.625,5.625c0.176,0.177 0.415,0.276 0.664,0.276c0.249,-0 0.488,-0.099 0.664,-0.276l5.625,-5.625c0.176,-0.176 0.275,-0.415 0.275,-0.663c-0,-0.515 -0.424,-0.939 -0.939,-0.939c-0.249,-0 -0.488,0.099 -0.664,0.275l-4.023,4.025l-0,-10.862Z"/>
</svg>

Whoever did the original did a pretty good job

[R C-R]

3 hours ago, kosh said:

the icon is saved in 16x16 sizes. You need to display it on the site in a 30x30 block, of course you can do it like this width="30" height="30". In this case, there may be incorrect positioning and coordinates.

What I did in AD 2 was to first resize the document to 30x30 px in File > Document Setup, anchoring to the top left corner & then simply selected & dragged the bottom right handle of the "Curves" icon layer to the bottom right edge of the document -- easily done with Snap to spread enabled.

That of course resulted in perfectly positioning the icon to fill the 30 x 30 document. Reexported to svg resulted in a 1129 byte SVG file.

[kosh]

I didn't quite understand, I'm making a new 30x30 document, then I drag the necessary SVG 16x16 there.  Next, how do I make it fill the entire area of the document with scaling and the correct proportions and coordinates?

[Palatino]

13 hours ago, David in Яuislip said:

Whoever did the original did a pretty good job

Right. Therefore so:

[R C-R]

8 hours ago, kosh said:

Next, how do I make it fill the entire area of the document with scaling and the correct proportions and coordinates?

Select it with the Move Tool, then either use the Transform panel or drag on the bounding box handles to set its dimensions & position.

[kosh]

In this case, when exporting, it does not set the height and width of the document, but sets it to 100%. 

<svg width="100%" height="100%" viewBox="0 0 28 28" version="1.1" 

And it is displayed on the site in an enlarged form. If you make the height and width 28 px, then it's fine.
Why is it that when exporting the entire document, the width and height of this document are not set?

 

In addition, when optimizing, for some reason, the dimensions are set <svg width="100%" height="100%" viewBox="0 0 14 14" and the code itself does not compress in any way and has to be compressed through third-party services, such as:

_https://processing.compress-or-die.com/svg-process?

[David in Яuislip]

Affinity doesn't optimise the file as such, it does well in flattening transforms but otherwise it's svg output is not the best
If you open the attached file in a browser you can see that the red original and the blue are slightly different but is the blue good enough? If you change width & height to 30 no one will see a difference.
I've just taken a few liberties with the blue, rounded a few of the numbers, removed the z's, lots of effort to save 29bytes. To do this in an editor you need to understand svg XML, I doubt that an online optimiser can do this but I could be wrong. An easier way is to use Inkscape and save as Optimised where you have the option to choose   which can save a lot of space

arrow-down-circle.svg

[kosh]

18 hours ago, David in Яuislip said:

Affinity doesn't optimise the file as such, it does well in flattening transforms but otherwise it's svg output is not the best
If you open the attached file in a browser you can see that the red original and the blue are slightly different but is the blue good enough? If you change width & height to 30 no one will see a difference.
I've just taken a few liberties with the blue, rounded a few of the numbers, removed the z's, lots of effort to save 29bytes. To do this in an editor you need to understand svg XML, I doubt that an online optimiser can do this but I could be wrong. An easier way is to use Inkscape and save as Optimised where you have the option to choose   which can save a lot of space

arrow-down-circle.svg 633 B · 1 download

Thanks for the answer and examples, interesting solutions.