Results 1 to 10 of 10

Thread: Inkscape - canvas & resize

  1. #1
    Join Date
    Oct 2004
    Location
    Denmark - Scandinavia
    Beans
    17,619
    Distro
    Ubuntu 13.04 Raring Ringtail

    Inkscape - canvas & resize

    Hello,


    Is there an easy way in Inkscape to change canvas and making the image to scale with it?
    Like I'm building a 128x128 .svg icon but want to make it a 64 .svg afterwards.


    regards
    A.I.
    elementary OS Luna
    My Screenshot

  2. #2
    Join Date
    Jun 2011
    Location
    United Kingdom
    Beans
    Hidden!
    Distro
    Lubuntu Development Release

    Re: Inkscape - canvas & resize

    The way I'd do it (probably not optimal, but it works):

    1) Edit the canvas size (Ctrl-Shift-D, then use the dialog).

    2) Select all of your work on the icon, group it, scale it using the "W" and "H" measurements on the top bar, then ungroup it.

    Although why you're doing this is a little bit of a mystery to me. The whole point of SVG is that it scales regardless of resolution?

  3. #3
    Join Date
    Oct 2004
    Location
    Denmark - Scandinavia
    Beans
    17,619
    Distro
    Ubuntu 13.04 Raring Ringtail

    Re: Inkscape - canvas & resize

    Quote Originally Posted by MG&TL View Post
    The way I'd do it (probably not optimal, but it works):

    1) Edit the canvas size (Ctrl-Shift-D, then use the dialog).

    2) Select all of your work on the icon, group it, scale it using the "W" and "H" measurements on the top bar, then ungroup it.

    Although why you're doing this is a little bit of a mystery to me. The whole point of SVG is that it scales regardless of resolution?
    Thanks.

    I'm just following the Humanity schema. They have their .svg files resized.
    elementary OS Luna
    My Screenshot

  4. #4
    Join Date
    Jul 2006
    Beans
    284

    Re: Inkscape - canvas & resize

    Quote Originally Posted by Artificial Intelligence View Post
    Is there an easy way in Inkscape to change canvas and making the image to scale with it?
    Like I'm building a 128x128 .svg icon but want to make it a 64 .svg afterwards.
    You wouldn't want to do that in the first place, unless you want a crappy looking icon

    You don't automatically get pixel grid alignment when you scale an SVG down. You really need to adjust it manually for each size. Check out one-canvas workflow:

    http://blogs.gnome.org/patrys/2008/0...nvas-workflow/
    Libre Graphics World — news and articles on free design and photography software

  5. #5
    Join Date
    Oct 2004
    Location
    Denmark - Scandinavia
    Beans
    17,619
    Distro
    Ubuntu 13.04 Raring Ringtail

    Re: Inkscape - canvas & resize

    Quote Originally Posted by prokoudine View Post
    You wouldn't want to do that in the first place, unless you want a crappy looking icon

    You don't automatically get pixel grid alignment when you scale an SVG down. You really need to adjust it manually for each size. Check out one-canvas workflow:

    http://blogs.gnome.org/patrys/2008/0...nvas-workflow/
    Thanks, I'll check it out.
    elementary OS Luna
    My Screenshot

  6. #6
    Join Date
    Oct 2009
    Location
    A world without windows
    Beans
    Hidden!

    Re: Inkscape - canvas & resize

    don' know if this type of embedded will help ,

    but worth experimenting with , change the values of the first line

    Code:
    <svg width='300' height='300'>
    
        <svg width='100%' height='100%'>
    
        <rect x='0' y='0'  width='100%' height='30' rx='0' ry='0' fill='blue' stroke='black' stroke-width='1'/>
    
        </svg>
    </svg>
    Added / sort of viewport /clipping

    Code:
    <svg width='100' height='300'>
    
        <svg width='100%' height='10' x='0' y='40'>
    
        <rect x='0' y='0'  width='100%' height='30' rx='0' ry='0' fill='blue' stroke='black' stroke-width='1'/>
    
            </svg>
    </svg>
    BR
    Alex
    Last edited by alexfish; February 25th, 2013 at 07:55 AM.
    Two tin cans are better than an iphone

    http://www.ehow.co.uk/how_2067160_ma...hone.html?cr=1

  7. #7
    Join Date
    Oct 2009
    Location
    A world without windows
    Beans
    Hidden!

    Re: Inkscape - canvas & resize

    Though about doing an update on this ,

    here the intitial design is done with Inkscape.

    but then need to use scripting to get the desired effects

    Code:
        <svg id='Radio buttons' x='0' y='0' width='75' height='120' >
    
        <defs>
        <linearGradient id='brown_button_off' gradientUnits='objectBoundingBox'  x1='1' x2='1' y1='0' y2='1'> 
            <stop stop-color='#EFEFEF' offset='.1'/> <stop stop-color='brown' offset='1'/>
        </linearGradient>
        </defs>
    
        <defs>
        <pattern id='radio_group' width='75' height='30'  patternUnits='userSpaceOnUse'>
            <rect x='2' y='2'  rx='3' ry='3' width='71' height='26' fill='url(#brown_button_off)' stroke='black' stroke-width='1'/> 
            <circle cx='12' cy='15'  r='5' fill='#FFFFFF' stroke='red' stroke-width='3'/>
        </pattern>
        </defs>
    
            <rect x='0' y='0' width='100%' height='100%'
                ry='0' fill='white' fill-opacity='1' stroke='black'  stroke-width='1' style='display:1 ' />
            <desc>vertical radio group </desc>
            <svg id='radio_group_1' x='0' y='0' width='100%' height='100%'>
                <rect id='radio_group_1' fill='url(#radio_group)' sencex='100' stroke='black' stroke-width='1' width='100%' height='100%'/>
                <sensitive x='0' y='0' width='300' height='300'/>
                <circle cx='12' cy='15'  r='4' fill='#000000'/>
                <text x="0" y="0" dx='20' dy='20' fill="black" >Radio 99</text>
                <text x="0" y="0" dx='20' dy='50' fill="black" >Radio 2</text>
                <text x="0" y="0" dx='20' dy='80' fill="black" >Radio 3</text>
                <text x="0" y="0" dx='20' dy='110' fill="black" >Radio 4</text>
            </svg>
        </svg>
    can start by changing the values in first row in multiples of the initial value IE:
    Code:
        <svg id='Radio buttons' x='0' y='0' width='150' height='120' >
    
        <defs>
        <linearGradient id='brown_button_off' gradientUnits='objectBoundingBox'  x1='1' x2='1' y1='0' y2='1'> 
            <stop stop-color='#EFEFEF' offset='.1'/> <stop stop-color='brown' offset='1'/>
        </linearGradient>
        </defs>
    
        <defs>
        <pattern id='radio_group' width='75' height='30'  patternUnits='userSpaceOnUse'>
             <rect x='2' y='2'  rx='3' ry='3' width='71' height='26'  fill='url(#brown_button_off)' stroke='black' stroke-width='1'/> 
            <circle cx='12' cy='15'  r='5' fill='#FFFFFF' stroke='red' stroke-width='3'/>
        </pattern>
        </defs>
    
            <rect x='0' y='0' width='100%' height='100%'
                ry='0' fill='white' fill-opacity='1' stroke='black'  stroke-width='1' style='display:1 ' />
            <desc>vertical radio group </desc>
            <svg id='radio_group_1' x='0' y='0' width='100%' height='100%'>
                 <rect id='radio_group_1' fill='url(#radio_group)'  sencex='100' stroke='black' stroke-width='1' width='100%'  height='100%'/>
                <sensitive x='0' y='0' width='300' height='300'/>
                <circle cx='12' cy='15'  r='4' fill='#000000'/>
                <text x="0" y="0" dx='20' dy='20' fill="black" >Radio 99</text>
                <text x="0" y="0" dx='20' dy='50' fill="black" >Radio 2</text>
                <text x="0" y="0" dx='20' dy='80' fill="black" >Radio 3</text>
                <text x="0" y="0" dx='20' dy='110' fill="black" >Radio 4</text>
            </svg>
        </svg>
    Have fun

    Alex
    Two tin cans are better than an iphone

    http://www.ehow.co.uk/how_2067160_ma...hone.html?cr=1

  8. #8
    Join Date
    Feb 2013
    Beans
    3

    Re: Inkscape - canvas & resize

    Thanks, sharing such problem and it's solution. I was needed this help.
    Thanks again.

  9. #9
    Join Date
    Mar 2013
    Beans
    2

    Re: Inkscape - canvas & resize

    Quote Originally Posted by prokoudine View Post
    You wouldn't want to do that in the first place, unless you want a crappy looking icon

    You don't automatically get pixel grid alignment when you scale an SVG down. You really need to adjust it manually for each size. Check out one-canvas workflow:

    http://blogs.gnome.org/patrys/2008/0...nvas-workflow/
    This reply help me!!!

  10. #10
    Join Date
    Oct 2009
    Location
    A world without windows
    Beans
    Hidden!

    Re: Inkscape - canvas & resize

    using xlink:

    You can be in control using the xlink: . very simple to use , can almost show almost any image + scale is automatic if main is set to 100% , all that is
    needed is to set width and height.

    Things to do set the path to the image / have left my original file path in code to help , but sure U will get it to work

    Code:
    <svg width="100%" height="100%" >
    
        <desc> Change the  xlink:href="file:///path to IE: this example = 'file:///home/alexfish/Desktop/svg-demo.png'  </desc>
        <desc> Change the  width= + height=  </desc>
        <desc> Result = Size auto  </desc>
        <image
           xlink:href="file:///home/alexfish/Desktop/svg-demo.png"
           x="0"
           y="0"
           width="50"
           height="50"
         />
    </svg>
    Have fun

    Alex
    Two tin cans are better than an iphone

    http://www.ehow.co.uk/how_2067160_ma...hone.html?cr=1

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •