Search code examples
htmlcsssvginkscape

Scaling SVG produced with inkscape


I am trying to resize this SVG file produced using inkscape

I have tried using viewBox="0 0 h w" attribute within the <svg/> but it crops the image instead of resizing. Thanks in anticipation


Solution

  • Inkscape doesn't add a viewBox attribute to the files it produces. That attribute is needed for scaling to work.

    The solution is to convert the width and height values to a viewBox and then alter your width and height.

    So add the following to your root <svg> tag:

    viewBox="0 0 205 69"
    

    Then change your width/height. If you want double size, you could do:

    width="410" height="138"
    

    Or if you want it to fill the page or it's parent container you could do:

    width="100%" height="100%"
    

    <!-- Created with Inkscape (http://www.inkscape.org/) -->
    
    <svg
       xmlns:dc="http://purl.org/dc/elements/1.1/"
       xmlns:cc="http://creativecommons.org/ns#"
       xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
       xmlns:svg="http://www.w3.org/2000/svg"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
       xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
       viewBox="0 0 205 69"
       width="100%"
       height="100%"
       id="svg2985"
       version="1.1"
       inkscape:version="0.48.4 r9939"
       sodipodi:docname="official.svg">
      <sodipodi:namedview
         id="base"
         pagecolor="#ffffff"
         bordercolor="#666666"
         borderopacity="1.0"
         inkscape:pageopacity="0.0"
         inkscape:pageshadow="2"
         inkscape:zoom="1.88"
         inkscape:cx="268.4359"
         inkscape:cy="163.44054"
         inkscape:current-layer="layer1"
         inkscape:document-units="px"
         showgrid="false"
         inkscape:window-width="1301"
         inkscape:window-height="744"
         inkscape:window-x="65"
         inkscape:window-y="24"
         inkscape:window-maximized="1">
        <sodipodi:guide
           id="guide3594"
           position="0,370.82039325"
           orientation="0,800.0" />
        <sodipodi:guide
           id="guide3596"
           position="0,229.17960675"
           orientation="0,800.0" />
        <sodipodi:guide
           id="guide3598"
           position="494.427191,0"
           orientation="600.0,0" />
        <sodipodi:guide
           id="guide3600"
           position="305.572809,0"
           orientation="600.0,0" />
        <sodipodi:guide
           id="guide3602"
           position="0,600.0"
           orientation="0,800.0" />
        <sodipodi:guide
           id="guide3604"
           position="600.0,0"
           orientation="0,800.0" />
        <sodipodi:guide
           id="guide3606"
           position="0,800.0"
           orientation="600.0,0" />
        <sodipodi:guide
           id="guide3608"
           position="800.0,0"
           orientation="600.0,0" />
      </sodipodi:namedview>
      <defs
         id="defs2987" />
      <metadata
         id="metadata2990">
        <rdf:RDF>
          <cc:Work
             rdf:about="">
            <dc:format>image/svg+xml</dc:format>
            <dc:type
               rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
            <dc:title></dc:title>
          </cc:Work>
        </rdf:RDF>
      </metadata>
      <g
         id="layer1"
         inkscape:label="Layer 1"
         inkscape:groupmode="layer"
         transform="translate(0,-531)">
        <path
           sodipodi:type="star"
           style="fill:#008080;fill-opacity:1;fill-rule:evenodd;stroke:#008080;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.03921569"
           id="path3003"
           sodipodi:sides="3"
           sodipodi:cx="208.33333"
           sodipodi:cy="448.33334"
           sodipodi:r1="329.16138"
           sodipodi:r2="164.5807"
           sodipodi:arg1="0.57255439"
           sodipodi:arg2="1.6197519"
           inkscape:flatsided="true"
           inkscape:rounded="0.15947024"
           inkscape:randomized="0"
           d="M 484.99998,626.66667 C 435.74244,703.08492 -42.889814,679.63445 -84.441188,598.76703 -125.99256,517.89962 133.63227,115.11717 224.44119,119.56633 c 90.80892,4.44916 309.81634,430.68209 260.55879,507.10034 z"
           inkscape:transform-center-x="-8.8816078"
           inkscape:transform-center-y="-0.012778438"
           transform="matrix(0.00520436,0.0991022,-0.10795132,0.00477775,212.00937,543.99054)" />
        <path
           sodipodi:type="star"
           style="fill:#241f1c;fill-opacity:0.33333333;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.03921569"
           id="path3003-6"
           sodipodi:sides="3"
           sodipodi:cx="208.33333"
           sodipodi:cy="448.33334"
           sodipodi:r1="329.16138"
           sodipodi:r2="164.5807"
           sodipodi:arg1="0.57255439"
           sodipodi:arg2="1.6197519"
           inkscape:flatsided="true"
           inkscape:rounded="0.15947024"
           inkscape:randomized="0"
           d="M 484.99998,626.66667 C 435.74244,703.08492 -42.889814,679.63445 -84.441188,598.76703 -125.99256,517.89962 133.63227,115.11717 224.44119,119.56633 c 90.80892,4.44916 309.81634,430.68209 260.55879,507.10034 z"
           inkscape:transform-center-x="-8.8816118"
           inkscape:transform-center-y="-0.012779205"
           transform="matrix(0.00520436,0.0991022,-0.10795132,0.00477775,213.12005,546.20636)" />
        <text
           xml:space="preserve"
           style="font-size:16.25434494px;font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#576a6c;fill-opacity:1;stroke:none;font-family:Century Schoolbook L;-inkscape-font-specification:Century Schoolbook L Medium"
           x="2.427422"
           y="563.2641"
           id="text3791"
           sodipodi:linespacing="125%"><tspan
             sodipodi:role="line"
             id="tspan3793"
             x="2.427422"
             y="563.2641"
             style="font-size:36.57227707px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;word-spacing:0px;fill:#576a6c;fill-opacity:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu">Akogun</tspan></text>
        <text
           xml:space="preserve"
           style="font-size:16.25434494px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
           x="186.45212"
           y="409.6254"
           id="text5280"
           sodipodi:linespacing="125%"><tspan
             sodipodi:role="line"
             id="tspan5282"
             x="186.45212"
             y="409.6254" /></text>
        <text
           xml:space="preserve"
           style="font-size:16.25434494px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#008080;fill-opacity:0.50196078;stroke:none;font-family:Sans"
           x="49.39143"
           y="567.16937"
           id="text5284"
           sodipodi:linespacing="125%"><tspan
             sodipodi:role="line"
             id="tspan5286"
             x="49.39143"
             y="567.16937" /><tspan
             sodipodi:role="line"
             id="tspan5288"
             x="49.39143"
             y="584.67633"
             style="font-size:13.20665646px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#008080;fill-opacity:0.50196078;font-family:Ubuntu;-inkscape-font-specification:Ubuntu">P o l y m a t h</tspan></text>
        <path
           sodipodi:type="star"
           style="fill:#241f1c;fill-opacity:0.33333333;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.03921569"
           id="path3003-6-5"
           sodipodi:sides="3"
           sodipodi:cx="208.33333"
           sodipodi:cy="448.33334"
           sodipodi:r1="329.16138"
           sodipodi:r2="164.5807"
           sodipodi:arg1="0.57255439"
           sodipodi:arg2="1.6197519"
           inkscape:flatsided="true"
           inkscape:rounded="0.15947024"
           inkscape:randomized="0"
           d="M 484.99998,626.66667 C 435.74244,703.08492 -42.889814,679.63445 -84.441188,598.76703 -125.99256,517.89962 133.63227,115.11717 224.44119,119.56633 c 90.80892,4.44916 309.81634,430.68209 260.55879,507.10034 z"
           inkscape:transform-center-x="-8.8816136"
           inkscape:transform-center-y="-0.012761026"
           transform="matrix(0.00520436,0.0991022,-0.10795132,0.00477775,214.3031,538.55495)" />
        <flowRoot
           xml:space="preserve"
           id="flowRoot3053"
           style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
           transform="matrix(0.40635864,0,0,0.40635864,0.801987,362.21684)"><flowRegion
             id="flowRegion3055"><rect
               id="rect3057"
               width="598"
               height="182"
               x="102"
               y="144" /></flowRegion><flowPara
             id="flowPara3059" /></flowRoot>    <flowRoot
           style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
           id="flowRoot3296"
           xml:space="preserve"
           transform="matrix(0.40635864,0,0,0.40635864,0.801987,362.21684)"><flowRegion
             id="flowRegion3298"><rect
               y="164"
               x="30"
               height="218"
               width="502"
               id="rect3300" /></flowRegion><flowPara
             id="flowPara3302" /></flowRoot>  </g>
    </svg>