Use Inkscape to resize svg images

Sometimes you need an svg image of a specific size, such as the icon of a button or the thumbnail of a certain location on a web page. Talented people can draw by themselves, but amateurs can only search for copyright-free ones on the Internet and adjust and optimize them by themselves.

For the Chinese content searched on Google, the source files (xml files) for adjusting svg pictures are all edited directly. Simple pictures are easy to say, but complicated actual operations are very inconvenient. The open source tool software Inkscape is one of your reasonable choices.

The sample process is as follows:

1. After downloading and installing Inksape, use Inkscape to open your target svg image.

The download and installation process is omitted. Press 'Ctrl+O' to quickly open the svg image.

2. Set image size

• 1. Press the 'Shift+Ctrl+D' shortcut key to open the 'File Properties' dialog box (of course it can also be opened from 'File'>'File Properties' in the menu bar, mainly the shortcut key).
• 2. Set the width and height of the image, as shown below:

This example image is 128px x 128px. I want to change it to 512px x 512px. Just fill in 512 in both boxes. Close the dialog box after filling in (the adjustment will take effect immediately)

3. Adjust the image's 'content (element? It seems to be professionally called layer, anyway, it is the real content of your image) size/position', as shown in the figure below:

After adjusting the size of the picture, the position of the picture relative to the background often changes. At this time, you need to adjust the position, such as aligning the left, right, up and down, and follow the numerical steps in the picture.

• 1 Select all layers (some pictures are composed of many layers, and the overall displacement cannot be done without selecting them all);
• 2 Confirm that the layer is selected, as icons that can be dragged appear in all directions of the layer;
• 3 point 3 button in this place, God’s perspective observation;
• 4 and 5 are to center the adjustment layer;

It is worth mentioning that when centering, you can click on the Move/align selection as a group

After clicking, it is treated as a whole, like a formation in a military parade, moving in unison, and the relative positions of the layers are fixed. Otherwise, sometimes the layers will be confused when the centering operation is performed.

I didn't know this at first. It would make me burst into tears if I messed up the layers. After locking it, I feel reassured and it's especially easy to use.

After this operation, the picture is basically placed in the appropriate position. Next, you may want to resize the layer elements

• If you need to lock the proportion size, click on the lock icon (it is generally recommended to click on the 1 lock icon first, so as not to distort the image too much))

• Then use the mouse to drag the layer in all directions and adjust it to the appropriate size (of course, you can also specify the height W and width H, so you don't need to drag the mouse to set the size, the size is fixed)

• If necessary, click the center buttons up, down, left, and right again

4. Save as

The size and position are now adjusted.

Of course, you can also adjust the color of the picture, add auxiliary lines to accurately adjust the position, etc. For non-professionals, I generally don’t use it, and readers can explore on their own.