In Inkscape, resize both the document and its content at the same time

Question

I've been struggling to do something that would seem pretty basic:

In Inkscape, how can I resize the document and its content (i.e. drawings) at the same time?

A little bit of context: I want to resize a fairly large number of SVG documents from The Noun Project (they are typically 100x100px docs) without having to explicitly resize the actual drawings.

N.B: If there's a command line solution, I can work with that too!

Answer 1

You haven't mentioned what OS you're running. I'm using Ubuntu, and I've been able to use librsvg2 successfully.

If you have access to Ubuntu, here's what you can do. First, install librsvg2:

sudo apt-get install librsvg2-bin

Then, cd to the directory that has your SVGs (make sure it only has SVGs!) and use a command like the following:

for old in *; do
    new="$(echo "$old" | sed -e 's/svg$/new.svg/')"
    rsvg-convert "$old" -w 160 -h 160 -f svg -o "$new"
done

This will create a new batch of SVGs with dimensions 200px by 200px, and saved as "original-file-name.new.svg"

Calculating dimensions is somewhat confusing. For converting SVG to SVG, you need to do a little bit of math. The "height" and "width" options in rsvg-convert use pt, not px, in such cases, so use 80 if you want 100px, 120 if you want 150px, and so on.

You can also use rsvg-convert to output PNGs. It is much better at rasterizing the file than ImageMagick, at least in my experience. Notice that you need to change -f to png, you need to change the output save pattern from 's/svg$/new.svg/' to 's/svg$/png/', and you enter the width and height that you want as the pixel values.

for old in *; do
    new="$(echo "$old" | sed -e 's/svg$/png/')"
    rsvg-convert "$old" -w 200 -h 200 -f png -o "$new"
done

Answer 2

There is currently no native way to do that in Inkscape. The only way is to resize content and document separately.

Answer 3

While there's a few ways to do it - as noted here - one way that can work really well is to use a viewBox. You simply modify the contents of the SVG tag like so:

<svg
 width="1280"
 height="800"
 viewBox="0 0 1280 800">
    <!-- More markup... --!>
</svg>

What viewBox does is it defines an internal coordinate system for the document. You can then easily scale the document simply by modifying the width and height attributes as necessary.

Note that there are some drawbacks, though. For one thing, there's only certain contexts this works in, specificially if you're somehow directly including the SVG document on your markup page. Using an <img> tag with this may or may not yield unexpected results. You'll have to do some of your own research to figure out how best to do this.

Answer 4

What I did was to first changing both width and height by multiplying them by 10 from Document Properties,

Then going to Edit > XML Editor and then adding transform scale(10, 10) to the root element,

Then pressing for example on Path > Union to make Inkscape actually apply the specific transform on the path.

Guess this isn't the way it supposed to work but I just wanted to help myself the next I needed this as I did it once before and forgot for a moment and that's why I posted it here which hopefully would be useful to other also :)

Answer 5

I was looking for a way to do this and im used to using notepad++ for not exactly similar things but sorta seemed that way, using normal find/replace i could change "in files" or open them all if not thousands and find your height and width, which for me was 100px but the viewbox was a little more annoying as the icons from thenounproject had different values, doing a find replace using regex expressions firstly for the normal numbers.

Find What: viewBox=\"[\d ]*\" Replace With viewBox="0 0 512 512" (or whatever you want the numbers to be).

Then there was some even more annoying ones that had decimal points, like 96.987 (tossers) so

Find What: viewBox=\"[\d. ]*\" Replace With: viewBox="0 0 512 512" (or whatever you want the numbers to be)

Probably not a traditional way to change image properties but SVG are XML files essentially as im aware, this took about 5 minutes to search about replacing strings inside quotes and 5 minutes to do in notepad++. Hope it maybe helps someone.

Recommend taking a backup of your files before you do any of the above as there is no easy way to undo if you muff it up (or at all, if your changing "in files").