2

Is there a way to script the rescaling of a .SVG from its current size (thousands of pixels) to a much smaller size? I've tried ImageMagick, but its support for SVG gradients is far too weak to be useful.

The purpose is to work around a bug in a rendering library that sometimes causes svgs with large pixel sizes to allocate large rasters (before ultimately being rescaled smoothly down for actual display).

For example, how can I change this 1024x1024px svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- 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:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="1024.09"
   height="1024.36"
   id="svg2"
   sodipodi:version="0.32"
   inkscape:version="0.46"
   version="1.0"
   sodipodi:docname="tst.svg"
   inkscape:output_extension="org.inkscape.output.svg.inkscape">
  <defs
     id="defs4">
    <linearGradient
       inkscape:collect="always"
       id="linearGradient2454">
      <stop
         style="stop-color:#800000;stop-opacity:1;"
         offset="0"
         id="stop2456" />
      <stop
         style="stop-color:#800000;stop-opacity:0;"
         offset="1"
         id="stop2458" />
    </linearGradient>
    <inkscape:perspective
       sodipodi:type="inkscape:persp3d"
       inkscape:vp_x="99.717407 : 889.90313 : 1"
       inkscape:vp_y="7.5659029e-15 : 92.21017 : 0"
       inkscape:vp_z="191.66118 : 889.90313 : 1"
       inkscape:persp3d-origin="145.68929 : 873.73005 : 1"
       id="perspective10" />
    <radialGradient
       inkscape:collect="always"
       xlink:href="#linearGradient2454"
       id="radialGradient2460"
       cx="4022.8572"
       cy="5451.2656"
       fx="4022.8572"
       fy="5451.2656"
       r="3559.865"
       gradientTransform="matrix(-0.1071067,-0.1166362,0.1377765,-7.0459663e-2,276.61943,1452.439)"
       gradientUnits="userSpaceOnUse" />
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     gridtolerance="10000"
     guidetolerance="10"
     objecttolerance="10"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.49497475"
     inkscape:cx="403.89421"
     inkscape:cy="477.41913"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1680"
     inkscape:window-height="978"
     inkscape:window-x="1307"
     inkscape:window-y="24" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <rect
       style="fill:#0000ff;fill-rule:evenodd;stroke:#000000;stroke-width:0.10674229px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       id="rect2403"
       width="836.00311"
       height="815.66479"
       x="144.90677"
       y="154.41733" />
    <path
       style="fill:url(#radialGradient2460);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.10674229px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 492.29996,1003.8047 C 992.20722,1001.6971 989.38289,999.5894 992.20722,997.48173 C 995.03156,995.37408 992.20722,124.91007 992.20722,124.91007 L 113.83908,124.91007 L 122.31209,1012.2353 L 492.29996,1003.8047 z"
       id="path2382" />
    <g
       sodipodi:type="inkscape:box3d"
       style="fill:#800000;fill-opacity:1"
       id="g2392"
       inkscape:perspectiveID="#perspective10"
       inkscape:corner0="-0.94081067 : 0.17266027 : 0 : 1"
       inkscape:corner7="-0.94348241 : 0.15857352 : 0.25 : 1">
      <path
         sodipodi:type="inkscape:box3dside"
         id="path2402"
         style="fill:#afafde;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
         inkscape:box3dsidetype="13"
         d="M 876.40947,160.66071 L 913.12582,161.89944 L 324.68925,139.51689 L 322.74524,139.47316 L 876.40947,160.66071 z" />
      <path
         sodipodi:type="inkscape:box3dside"
         id="path2400"
         style="fill:#d7d7ff;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
         inkscape:box3dsidetype="14"
         d="M 913.12582,138.91648 L 913.12582,161.89944 L 324.68925,139.51689 L 324.68925,135.27915 L 913.12582,138.91648 z" />
      <path
         sodipodi:type="inkscape:box3dside"
         id="path2404"
         style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
         inkscape:box3dsidetype="11"
         d="M 322.74524,135.27204 L 324.68925,135.27915 L 324.68925,139.51689 L 322.74524,139.47316 L 322.74524,135.27204 z" />
      <path
         sodipodi:type="inkscape:box3dside"
         id="path2396"
         style="fill:#4d4d9f;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
         inkscape:box3dsidetype="5"
         d="M 876.40947,138.71518 L 913.12582,138.91648 L 324.68925,135.27915 L 322.74524,135.27204 L 876.40947,138.71518 z" />
      <path
         sodipodi:type="inkscape:box3dside"
         id="path2394"
         style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
         inkscape:box3dsidetype="6"
         d="M 876.40947,138.71518 L 876.40947,160.66071 L 322.74524,139.47316 L 322.74524,135.27204 L 876.40947,138.71518 z" />
      <path
         sodipodi:type="inkscape:box3dside"
         id="path2398"
         style="fill:#8686bf;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
         inkscape:box3dsidetype="3"
         d="M 876.40947,138.71518 L 913.12582,138.91648 L 913.12582,161.89944 L 876.40947,160.66071 L 876.40947,138.71518 z" />
    </g>
    <rect
       style="fill:#800000;fill-opacity:1"
       id="rect2448"
       width="36.716354"
       height="14.753627"
       x="432.98892"
       y="103.83346" />
    <rect
       style="fill:#800000;fill-opacity:1"
       id="rect2450"
       width="22.594679"
       height="16.861288"
       x="133.60942"
       y="101.7258" />
    <rect
       style="fill:#800000;fill-opacity:1"
       id="rect2452"
       width="22.594679"
       height="6.3229828"
       x="949.84222"
       y="97.510475" />
  </g>
</svg>

To a 102.4x102.4 SVG? It'd be nice if it didn't drop pieces of the SVG as well (which kind of rules out libsvgbin2, though it comes close).

jsight
  • 27,819
  • 25
  • 107
  • 140
  • 2
    what do you mean by "resize a SVG" ? Since it is a vectorial description (the S is for "Scalable"), there is no real size in pixels... If you want to change the size (in pixel) of a SVG display in a browser, for example, you can just change the "width" and "length" properties of the element – ThibThib Jul 07 '09 at 21:05
  • @ThibThib - By resize, I mean change the size height, width, and viewbox attributes on the root element, as well as the coordinate parameters to all of the groups/paths within the svg. A mere clientside translation won't work, as the library in question has a pathological interaction with Java 1.5.0_19 on OSX that causes radial gradients to allocate huge amounts of memory if these attributes were initially too large. – jsight Jul 07 '09 at 21:10
  • 1
    and change the height and width attributes on the root element is not enough ? – ThibThib Jul 07 '09 at 21:36
  • @ThibThib - Obviously that will not change the size of the paths within the svg, and result in nothing but confusion to the svg renderer. All of the coord values in the svg would have to be changed as well (this can easily be done in the inkscape gui, but I need something that can be scripted). – jsight Jul 07 '09 at 21:46
  • Please post a pared-down, minimal example of the SVG in question, to help people understand the issue. Or a link to the (assuming known, reported?) bug in Java on OSX you mention. – unwind Jul 08 '09 at 09:36
  • Done... although, I've solved this myself with changes to the underlying svg renderer (added a load-time scale factor to resize during load). This still leaves me with the problem of very slow paint on Mac OS, but that doesn't seem avoidable. – jsight Jul 10 '09 at 19:44

4 Answers4

6

You could replace 

<g

with 

<g transform="scale(0.5)"

Which should scale everything by 50%.

Scott Kirkwood
  • 1,135
  • 12
  • 15
1

I would use the Apache Batik Toolkit to write a little Java App which runs through your SVG Document Tree and transforms all the elements.

räph
  • 3,634
  • 9
  • 34
  • 41
0

Just tweak the width and height attributes of the svg tag using a text editor:

<svg
   ...
   width="102.409"
   height="102.436"
...
ecmanaut
  • 5,030
  • 2
  • 44
  • 66
0

viewBox attribute in the svg element tag, does the trick of scaling or you can say zooming of entire svg canvas. For example

<svg
   xmlns="http://www.w3.org/2000/svg"
   width="1024.09"
   height="1024.36"
   id="svg2"
   viewBox = "0 0 300 300">

here in viewBox, 0, 0 are for new x and y respectively, 300, 300 for new width and new height of the canvas.

Mujtaba Haider
  • 1,650
  • 2
  • 19
  • 29