Resizing an SVG

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

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.

https://s.natalian.org/2017-02-16/inkscape.png



Many thanks,

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, SlashDot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Reply | Threaded
Open this post in threaded view
|

Re: Resizing an SVG

Arlo James Barnes
On Wed, Feb 15, 2017 at 10:56 PM, Kai Hendry <[hidden email]> 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! <a href="data:image/svg+xml,&lt;svg id=&quot;Layer_1&quot; data-name=&quot;Layer 1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;100%&quot; height=&quot;100%&quot; viewBox=&quot;0 0 100 100&quot;&gt; &lt;title&gt;Compute&lt;/title&gt; &lt;g&gt; &lt;circle cx=&quot;50&quot; cy=&quot;51.25&quot; r=&quot;30.43&quot; fill=&quot;#9d5025&quot;/&gt; &lt;rect x=&quot;19.57&quot; y=&quot;48.75&quot; width=&quot;60.86&quot; height=&quot;2.5&quot; fill=&quot;#9d5025&quot;/&gt; &lt;circle cx=&quot;50&quot; cy=&quot;48.75&quot; r=&quot;30.43&quot; fill=&quot;#f58536&quot;/&gt; &lt;polygon points=&quot;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&quot; fill=&quot;#fff&quot;/&gt; &lt;/g&gt; &lt;/svg&gt;">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

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, SlashDot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Reply | Threaded
Open this post in threaded view
|

Re: Resizing an SVG

Arlo James 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

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, SlashDot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Reply | Threaded
Open this post in threaded view
|

Re: Resizing an SVG

Tavmjong Bah
In reply to this post by Kai Hendry
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



------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, SlashDot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Reply | Threaded
Open this post in threaded view
|

Re: Resizing an SVG

Kai Hendry
In reply to this post by Arlo James Barnes
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 ??

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, SlashDot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Reply | Threaded
Open this post in threaded view
|

Re: Resizing an SVG

Kai Hendry
In reply to this post by Tavmjong Bah
On 16 February 2017 at 14:53, Tavmjong Bah <[hidden email]> 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....

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, SlashDot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Reply | Threaded
Open this post in threaded view
|

Re: Resizing an SVG

Arlo James Barnes
On Thu, Feb 16, 2017 at 12:00 AM, Kai Hendry <[hidden email]> wrote:
I really don't understand understand how to scale the SVG to fit the canvas.

Does it work for you to <a href="https://inkscape.org/en/doc/basic/tutorial-basic.html#Multiple selections">select 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

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, SlashDot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-user