[Inkscape-user] Resizing an SVG

[Kai Hendry]

Hi there,

Given an SVG that seems bounded to 100x100 which looks small when
embedding into a Web page, how do I alter the SVG from Inkscape to
make it take 100% of the space?

E.g. https://s.natalian.org/2017-02-16/Compute_AWSLambda_LambdaFunction.svg

I did try a few things in the Document Properties without success.
Scale seemed to move the object around instead of actually scaling the
graphic. I am using Inkscape 0.92 as packaged by Archlinux.

Loading Image...



Many thanks,

[Arlo Barnes]

Post by Kai Hendry
how do I alter the SVG from Inkscape to
make it take 100% of the space?

You can actually do this in a text editor; just add %s! data:image/svg+xml,<svg
id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" viewBox="0 0 100 100"> <title>Compute</title>
<g> <circle cx="50" cy="51.25" r="30.43" fill="#9d5025"/> <rect x="19.57"
y="48.75" width="60.86" height="2.5" fill="#9d5025"/> <circle cx="50"
cy="48.75" r="30.43" fill="#f58536"/> <polygon points="69.8 63.7 67.44
57.51 62.16 59.53 54.61 39.76 52.51 34.29 51.53 31.71 49.98 27.67 42.89
27.67 39.98 27.67 39.98 34.29 45.42 34.29 47.31 39.23 31.57 67.25 39.17
67.25 50.39 47.27 58.34 68.08 60.23 67.36 64.53 65.72 64.53 65.72 69.8
63.7" fill="#fff"/> </g> </svg>
—Arlo

[Arlo Barnes]

Sorry, the formatting was not so great there; I meant to indicate that the
values of the height and width attributes of the (root) svg element could
be changed from 100 (assumed by renderer to mean 100px) to 100%. Then you
can control the actual size on screen with the surrounding HTML (div and
span are friendly) and CSS. I think Suv had a blog post about all the
different places in SVG (and with styling, potentially elsewhere) that
scale can be controlled, like viewbox.
—Arlo

[Kai Hendry]

Changing it to width="100%" height="100%" doesn't appear to work for me.

Is it viewBox="0 0 100 100" ?

But anyway... there sjhould be a way to do this in Inkscape... no ??

[Tavmjong Bah]

Post by Kai Hendry
Hi there,
Given an SVG that seems bounded to 100x100 which looks small when
embedding into a Web page, how do I alter the SVG from Inkscape to
make it take 100% of the space?
E.g. https://s.natalian.org/2017-02-16/Compute_AWSLambda_LambdaFuncti
on.svg
I did try a few things in the Document Properties without success.
Scale seemed to move the object around instead of actually scaling the
graphic. I am using Inkscape 0.92 as packaged by Archlinux.
https://s.natalian.org/2017-02-16/inkscape.png

The most common way to set the size of the SVG on a web page is to use
CSS. Set the width and/or height on the HTML element your using to
embed the SVG.

For an SVG solution (where the HTML is using the natural SVG size), set
the size of the drawing in the Document Properties dialog (File-

Post by Kai Hendry
Document Properties, Page tab.) And then adjust the 'viewBox' back to

the original value using the Scale entry box.

Tav

[Kai Hendry]

Post by Tavmjong Bah
For an SVG solution (where the HTML is using the natural SVG size), set
the size of the drawing in the Document Properties dialog (File-

Post by Kai Hendry
Document Properties, Page tab.) And then adjust the 'viewBox' back to

the original value using the Scale entry box.

If I select say A4 page size, I really don't understand understand how
to scale the SVG to fit the canvas.

The scale box and Viewbox... are not making sense to me....

[Arlo Barnes]

I really don't understand understand how to scale the SVG to fit the
canvas.

Does it work for you to select
<https://inkscape.org/en/doc/basic/tutorial-basic.html#Multiple selections>
all the objects with Control-A (or rubber band select), and use the arrows
in the corners of the selection box (with Control held, to preserve ratio),
or by changing the numbers in the height or width boxes (with the lock icon
locked, to preserve ratio)? And then use Control-Shift-A to align the
objects (remember to 'treat election as group') where you want them
relative to the page boundaries, for example centered in both axes?
—Arlo