6:56 a.m.
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.
https://s.natalian.org/2017-02-16/inkscape.png
Many thanks,
7:37 a.m.
On Wed, Feb 15, 2017 at 10:56 PM, Kai Hendry <hendry@...3280...>
wrote:
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
7:48 a.m.
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
7:54 a.m.
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 ??
7:53 a.m.
On Thu, 2017-02-16 at 13:56 +0800, Kai Hendry wrote:
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-
Document Properties, Page tab.) And then adjust the 'viewBox'
back to
the original value using the Scale entry box.
Tav
8 a.m.
On 16 February 2017 at 14:53, Tavmjong Bah <tavmjong@...206...> wrote:
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-
>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....
8:37 a.m.
On Thu, Feb 16, 2017 at 12:00 AM, Kai Hendry <hendry@...3280...>
wrote:
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
2175
days inactive
2175
days old
inkscape-user@lists.inkscape.org
6 comments
3 participants
participants (3)
-
Arlo Barnes -
Kai Hendry -
Tavmjong Bah