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,
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
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
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.
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
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 ??
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....
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
participants (3)
-
Arlo Barnes -
Kai Hendry -
Tavmjong Bah