是否有可用于调整 SVG 大小的脚本?

发布于 2024-07-26 12:45:29 字数 7017 浏览 4 评论 0原文

有没有办法编写脚本将 .SVG 从当前大小(数千像素)重新缩放到更小的大小? 我尝试过 ImageMagick,但它对 SVG 渐变的支持太弱,没有什么用处。

目的是解决渲染库中的一个错误,该错误有时会导致具有大像素大小的 svgs 分配大光栅(在最终平滑地重新缩放以进行实际显示之前)。

例如,如何将此 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>

为 102.4x102.4 SVG? 如果它也没有丢失 SVG 的片段,那就太好了(这排除了 libsvgbin2,尽管它很接近)。

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).

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

残龙傲雪 2024-08-02 12:45:29

您可以替换

<g 

<g transform="scale(0.5)"

Which 应该将所有内容缩放 50%。

You could replace

<g 

with

<g transform="scale(0.5)"

Which should scale everything by 50%.

痴情换悲伤 2024-08-02 12:45:29

我会使用 Apache Batik Toolkit 编写一个在 SVG 中运行的小 Java 应用程序文档树并转换所有元素。

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.

浅语花开 2024-08-02 12:45:29

svg 元素标签中的 viewBox 属性可以实现缩放,或者可以说缩放整个 svg 画布。 例如

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

,在 viewBox 中,0、0 分别代表新的 x 和 y,300、300 代表画布的新宽度和新高度。

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.

多彩岁月 2024-08-02 12:45:29

只需使用文本编辑器调整 svg 标记的 widthheight 属性即可:

<svg
   ...
   width="102.409"
   height="102.436"
...

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

<svg
   ...
   width="102.409"
   height="102.436"
...
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文