Search code examples
svgbatik

TranscoderException when converting svg to image using Batik


I was trying to convert an svg document to JPG using batik (I tried both 1.8 and 1.7 versions with the same reuslt). Unluckily some svg elements (clippath, fegaussianblur, fecomponenttransfer, femerge) cause the following (or similar, depending on the svg tag) trace:

org.apache.batik.transcoder.TranscoderException: null
Enclosed Exception:

The current document is unable to create an element of the requested type (namespace: http://www.w3.org/2000/svg, name: clippath).
at org.apache.batik.transcoder.XMLAbstractTranscoder.transcode(Unknown Source)
at org.apache.batik.transcoder.SVGAbstractTranscoder.transcode(Unknown Source)

Can anyone point out any solution for this problem?

Thanks,

Laura

UPDATE: Here is my input file:

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- $Id$ -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400"
height="300"> <defs> <clippath id="shielddx"> <rect
rx="0" ry="0" fill="none" x="0" y="0" width="9999" height="300"
stroke-width="0.000001"></rect> </clippath> <clippath id="shielddy"> <rect
fill="none" x="0" y="0" width="331" height="210"></rect> </clippath> <filter
id="a5a87bf2-0ea3-4664-8ceb-bd50b883a117" height="120%"> <fegaussianblur
in="SourceAlpha" stdDeviation="3"></fegaussianblur> <fecomponenttransfer>
<fefunca type="linear" slope="0.2"></fefunca></fecomponenttransfer>       <femerge> <femergenode></femergenode>
<femergenode in="SourceGraphic"></femergenode></femerge> </filter></defs>    <rect rx="0" ry="0"
fill="#2D2D2D" x="0" y="0" width="400" height="300"
stroke-width="0.000001"></rect> <rect rx="0" ry="0" fill="#2D2D2D"
x="59" y="40" width="331" height="210" stroke-width="0.000001"></rect>
<g zIndex="1"></g> <g zIndex="1"> <path fill="none"
d="M 59 198.5 L 390 198.5" stroke="#7E7E7E" stroke-width="1"
stroke-dasharray="8,3" zIndex="1"></path> <path fill="none"
d="M 59 145.5 L 390 145.5" stroke="#7E7E7E" stroke-width="1"
stroke-dasharray="8,3" zIndex="1"></path> <path fill="none"
d="M 59 93.5 L 390 93.5" stroke="#7E7E7E" stroke-width="1"
stroke-dasharray="8,3" zIndex="1"></path> <path fill="none"
d="M 59 40.5 L 390 40.5" stroke="#7E7E7E" stroke-width="1"
stroke-dasharray="8,3" zIndex="1"></path> <path fill="none"
d="M 59 250.5 L 390 250.5" stroke="#7E7E7E" stroke-width="1"
stroke-dasharray="8,3" zIndex="1"></path></g> <g zIndex="2"> <path
fill="none" d="M 224.5 250 L 224.5 256" stroke="#7E7E7E"
stroke-width="1"></path> <path fill="none" d="M 306.5 250 L 306.5 256"
stroke="#7E7E7E" stroke-width="1"></path> <path fill="none"
d="M 389.5 250 L 389.5 256" stroke="#7E7E7E" stroke-width="1"></path> <path
fill="none" d="M 141.5 250 L 141.5 256" stroke="#7E7E7E"
stroke-width="1"></path> <path fill="none" d="M 59 250.5 L 390 250.5"
stroke="#7E7E7E" stroke-width="1" zIndex="7" visibility="visible"></path>  </g>
<g zIndex="2"> <text x="23" y="145"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:11px;color:#7E7E7E;font-weight:normal;fill:#7E7E7E;"
zIndex="7" transform="rotate(270 23 145)" text-anchor="middle"
visibility="visible"> <tspan x="23">Quarter Overview</tspan></text></g> <g
zIndex="3"> <g visibility="visible" zIndex="0.1"
transform="translate(59,40)" clip-path="url(#shielddy)"> <rect
fill="#1E97E3" x="18" y="110.25" width="47" height="31.55000000000001"
stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"></rect> <rect
fill="#1E97E3" x="101" y="36.75" width="47" height="57.75"
stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"></rect> <rect
fill="#1E97E3" x="183" y="68.25" width="47" height="84.05000000000001"
stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"></rect> <rect
fill="#1E97E3" x="266" y="94.5" width="47" height="78.80000000000001"
stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"></rect></g> <g
visibility="visible" zIndex="0.1" transform="translate(59,40)"></g></g>    <text
x="200" y="25"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:16px;color:#FFFFFF;top:10;fill:#FFFFFF;"
text-anchor="middle" zIndex="4"> <tspan x="200">Quarterly
Performance</tspan></text> <g zIndex="7" transform="translate(166,273)"> <g
zIndex="1" clip-path="url(#shielddx)"> <g> <g zIndex="1"
transform="translate(8,3)"> <path fill="#1E97E3"
d="M 1 6 L 11 6 11 16 1 16 Z" style="cursor:pointer;" stroke="#1E97E3"
stroke-width="0.000001"></path> <text x="17" y="15"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:12px;cursor:pointer;color:#A5A5A5;fill:#A5A5A5;"
text-anchor="start" zIndex="2"> <tspan x="17">Series 1</tspan> </text>
</g> </g> </g> </g> <g zIndex="7"> <text x="100.375" y="267"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:11px;width:63px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="middle" visibility="visible"> <tspan x="100.375">Q1</tspan>  </text>
<text x="183.125" y="267"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:11px;width:63px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="middle" visibility="visible"> <tspan x="183.125">Q2</tspan> </text>
<text x="265.875" y="267"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:11px;width:63px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="middle" visibility="visible"> <tspan x="265.875">Q3</tspan></text>
<text x="348.625" y="267"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:11px;width:63px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="middle" visibility="visible"> <tspan x="348.625">Q4</tspan> </text></g>
<g zIndex="7"> <text x="51" y="256.1"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:11px;width:146px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="end" visibility="visible"> <tspan x="51">-10</tspan></text>
<text x="51" y="203.6"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:11px;width:146px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="end" visibility="visible"> <tspan x="51">0</tspan></text>
<text x="51" y="151.1"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-  size:11px;width:146px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="end" visibility="visible"> <tspan x="51">10</tspan></text>
<text x="51" y="98.6"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:11px;width:146px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="end" visibility="visible"> <tspan x="51">20</tspan></text>
<text x="51" y="46.1"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:11px;width:146px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="end" visibility="visible"> <tspan x="51">30</tspan></text></g>
<text x="64" y="60"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:16px;cursor:pointer;color:#999999;fill:#999999;"
text-anchor="start" zIndex="8"> <tspan x="64">Demo</tspan></text> <text
x="385" y="60"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:16px;cursor:pointer;color:#999999;fill:#999999;"
text-anchor="end" zIndex="8"> <tspan x="385">Demo</tspan></text> <text
x="64" y="245"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:16px;cursor:pointer;color:#999999;fill:#999999;"
text-anchor="start" zIndex="8"> <tspan x="64">Demo</tspan></text> <text
x="385" y="245"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:16px;cursor:pointer;color:#999999;fill:#999999;"
text-anchor="end" zIndex="8"> <tspan x="385">Demo</tspan></text> <g
zIndex="9"> <g visibility="visible" zIndex="1"
transform="translate(59,40)" clip-path="url(#shielddy)"> <rect
fill="rgb(192,192,192)" x="18" y="110.25" width="47"
height="31.55000000000001" isTracker="1463661560361"
fill-opacity="0.0001" visibility="visible" style=""></rect> <rect
fill="rgb(192,192,192)" x="101" y="36.75" width="47" height="57.75"
isTracker="1463661560361" fill-opacity="0.0001" visibility="visible"
style=""></rect> <rect fill="rgb(192,192,192)" x="183" y="68.25"
width="47" height="84.05000000000001" isTracker="1463661560361"
fill-opacity="0.0001" visibility="visible" style=""></rect> <rect
fill="rgb(192,192,192)" x="266" y="94.5" width="47"
height="78.80000000000001" isTracker="1463661560361"
fill-opacity="0.0001" visibility="visible" style=""></rect> </g> </g> </svg>

Solution

  • SVG is a case sensitive language. clippath is invalid, the correct name is clipPath.