是否有可用于调整 SVG 大小的脚本?
有没有办法编写脚本将 .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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
您可以替换
为
Which 应该将所有内容缩放 50%。
You could replace
with
Which should scale everything by 50%.
我会使用 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.
svg 元素标签中的
viewBox
属性可以实现缩放,或者可以说缩放整个 svg 画布。 例如,在 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 examplehere in viewBox, 0, 0 are for new x and y respectively, 300, 300 for new width and new height of the canvas.
只需使用文本编辑器调整
svg
标记的width
和height
属性即可:Just tweak the
width
andheight
attributes of thesvg
tag using a text editor: