SVG rendering errors

[jmthomas]

The following SVG file generated from the HighCharts javascript library does not render correctly. The x and y axis labels are all messed up and the <circle> elements don't render at all.

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1010" height="400">
<defs>
<clipPath id="highcharts-5">
<rect fill="none" x="0" y="0" width="925" height="271" stroke-width="0.000001">
</rect>
</clipPath>
</defs>
<rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" width="1010" height="400" stroke-width="0.000001" stroke="#4572A7">
</rect>
<text x="505" y="25" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;color:#3e576f;font-size:16px;fill:#3e576f;" text-anchor="middle" class="highcharts-title" >
<tspan x="505">Graph</tspan>
</text>
<g class="highcharts-grid" >
</g>
<g class="highcharts-grid" >
<path d="M 75 311.5 L 1000 311.5" fill="none" stroke="#C0C0C0" stroke-width="1">
</path>
<path d="M 75 266.5 L 1000 266.5" fill="none" stroke="#C0C0C0" stroke-width="1">
</path>
<path d="M 75 220.5 L 1000 220.5" fill="none" stroke="#C0C0C0" stroke-width="1">
</path>
<path d="M 75 175.5 L 1000 175.5" fill="none" stroke="#C0C0C0" stroke-width="1">
</path>
<path d="M 75 130.5 L 1000 130.5" fill="none" stroke="#C0C0C0" stroke-width="1">
</path>
<path d="M 75 85.5 L 1000 85.5" fill="none" stroke="#C0C0C0" stroke-width="1">
</path>
<path d="M 75 40.5 L 1000 40.5" fill="none" stroke="#C0C0C0" stroke-width="1">
</path>
</g>
<g class="highcharts-series-group" >
<g class="highcharts-series" clip-path="url(#highcharts-5)" visibility="visible" transform="translate(75,40)">
<circle cx="915.9313725490196" cy="45.347333333333324" r="4" stroke="#FFFFFF" stroke-width="0.000001" fill="#4572A7"  style="">
</circle>
<circle cx="10.807514456845723" cy="45.347333333333324" r="4" stroke="#FFFFFF" stroke-width="0.000001" fill="#4572A7"  style="">
</circle>
</g>
</g>
<g class="highcharts-legend"  transform="translate(425,359)">
<rect rx="5" ry="5" fill="none" x="0.5" y="0.5" width="70" height="25" stroke-width="1" stroke="#909090" visibility="visible">
</rect>
<text x="30" y="18" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3e576f;fill:#3e576f;" >
<tspan x="30">VAR</tspan>
</text>
<circle cx="17" cy="14" r="4"  stroke="#4572A7" fill="#4572A7">
</circle>
</g>
<g class="highcharts-axis" >
<text x="100.20221662889358" y="324.81623381592647" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;color:#666;font-size:11px;line-height:14px;font:normal 13px verdana, sans-serif;fill:#666;" text-anchor="end" transform="rotate(-45 100.20221662889358 324)">
<tspan x="100.20221662889358">12:00</tspan>
</text>
<text x="175.62382170257064" y="324.81623381592647" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;color:#666;font-size:11px;line-height:14px;font:normal 13px verdana, sans-serif;fill:#666;" text-anchor="end" transform="rotate(-45 175.62382170257064 324)">
<tspan x="175.62382170257064">00:00</tspan>
</text>
<text x="251.0454267762477" y="324.81623381592647" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;color:#666;font-size:11px;line-height:14px;font:normal 13px verdana, sans-serif;fill:#666;" text-anchor="end" transform="rotate(-45 251.0454267762477 324)">
<tspan x="251.0454267762477">12:00</tspan>
</text>
<text x="326.46703184992475" y="324.81623381592647" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;color:#666;font-size:11px;line-height:14px;font:normal 13px verdana, sans-serif;fill:#666;" text-anchor="end" transform="rotate(-45 326.46703184992475 324)">
<tspan x="326.46703184992475">00:00</tspan>
</text>
<text x="401.8886369236018" y="324.81623381592647" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;color:#666;font-size:11px;line-height:14px;font:normal 13px verdana, sans-serif;fill:#666;" text-anchor="end" transform="rotate(-45 401.8886369236018 324)">
<tspan x="401.8886369236018">12:00</tspan>
</text>
<text x="477.31024199727887" y="324.81623381592647" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;color:#666;font-size:11px;line-height:14px;font:normal 13px verdana, sans-serif;fill:#666;" text-anchor="end" transform="rotate(-45 477.31024199727887 324)">
<tspan x="477.31024199727887">00:00</tspan>
</text>
<text x="552.7318470709558" y="324.81623381592647" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;color:#666;font-size:11px;line-height:14px;font:normal 13px verdana, sans-serif;fill:#666;" text-anchor="end" transform="rotate(-45 552.7318470709558 324)">
<tspan x="552.7318470709558">12:00</tspan>
</text>
<text x="628.153452144633" y="324.81623381592647" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;color:#666;font-size:11px;line-height:14px;font:normal 13px verdana, sans-serif;fill:#666;" text-anchor="end" transform="rotate(-45 628.153452144633 324)">
<tspan x="628.153452144633">00:00</tspan>
</text>
<text x="703.57505721831" y="324.81623381592647" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;color:#666;font-size:11px;line-height:14px;font:normal 13px verdana, sans-serif;fill:#666;" text-anchor="end" transform="rotate(-45 703.57505721831 324)">
<tspan x="703.57505721831">12:00</tspan>
</text>
<text x="778.996662291987" y="324.81623381592647" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;color:#666;font-size:11px;line-height:14px;font:normal 13px verdana, sans-serif;fill:#666;" text-anchor="end" transform="rotate(-45 778.996662291987 324)">
<tspan x="778.996662291987">00:00</tspan>
</text>
<text x="854.4182673656642" y="324.81623381592647" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;color:#666;font-size:11px;line-height:14px;font:normal 13px verdana, sans-serif;fill:#666;" text-anchor="end" transform="rotate(-45 854.4182673656642 324)">
<tspan x="854.4182673656642">12:00</tspan>
</text>
<text x="929.8398724393412" y="324.81623381592647" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;color:#666;font-size:11px;line-height:14px;font:normal 13px verdana, sans-serif;fill:#666;" text-anchor="end" transform="rotate(-45 929.8398724393412 324)">
<tspan x="929.8398724393412">00:00</tspan>
</text>
<path d="M 100.5 310.81623381592647 L 100.5 315.81623381592647" fill="none" stroke="#C0D0E0" stroke-width="1">
</path>
<path d="M 176.5 310.81623381592647 L 176.5 315.81623381592647" fill="none" stroke="#C0D0E0" stroke-width="1">
</path>
<path d="M 251.5 310.81623381592647 L 251.5 315.81623381592647" fill="none" stroke="#C0D0E0" stroke-width="1">
</path>
<path d="M 326.5 310.81623381592647 L 326.5 315.81623381592647" fill="none" stroke="#C0D0E0" stroke-width="1">
</path>
<path d="M 402.5 310.81623381592647 L 402.5 315.81623381592647" fill="none" stroke="#C0D0E0" stroke-width="1">
</path>
<path d="M 477.5 310.81623381592647 L 477.5 315.81623381592647" fill="none" stroke="#C0D0E0" stroke-width="1">
</path>
<path d="M 553.5 310.81623381592647 L 553.5 315.81623381592647" fill="none" stroke="#C0D0E0" stroke-width="1">
</path>
<path d="M 628.5 310.81623381592647 L 628.5 315.81623381592647" fill="none" stroke="#C0D0E0" stroke-width="1">
</path>
<path d="M 704.5 310.81623381592647 L 704.5 315.81623381592647" fill="none" stroke="#C0D0E0" stroke-width="1">
</path>
<path d="M 779.5 310.81623381592647 L 779.5 315.81623381592647" fill="none" stroke="#C0D0E0" stroke-width="1">
</path>
<path d="M 854.5 310.81623381592647 L 854.5 315.81623381592647" fill="none" stroke="#C0D0E0" stroke-width="1">
</path>
<path d="M 930.5 310.81623381592647 L 930.5 315.81623381592647" fill="none" stroke="#C0D0E0" stroke-width="1">
</path>
</g>
<g class="highcharts-axis" >
<text x="67" y="270.74956714925975" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;width:442.5px;color:#666;font-size:11px;line-height:14px;fill:#666;" text-anchor="end">
<tspan x="67">0</tspan>
</text>
<text x="67" y="90.08290048259309" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;width:442.5px;color:#666;font-size:11px;line-height:14px;fill:#666;" text-anchor="end">
<tspan x="67">1,000</tspan>
</text>
<text x="67" y="315.9162338159265" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;width:442.5px;color:#666;font-size:11px;line-height:14px;fill:#666;" text-anchor="end">
<tspan x="67">-250</tspan>
</text>
<text x="67" y="225.58290048259312" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;width:442.5px;color:#666;font-size:11px;line-height:14px;fill:#666;" text-anchor="end">
<tspan x="67">250</tspan>
</text>
<text x="67" y="180.41623381592643" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;width:442.5px;color:#666;font-size:11px;line-height:14px;fill:#666;" text-anchor="end">
<tspan x="67">500</tspan>
</text>
<text x="67" y="135.24956714925978" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;width:442.5px;color:#666;font-size:11px;line-height:14px;fill:#666;" text-anchor="end">
<tspan x="67">750</tspan>
</text>
<text x="67" y="44.91623381592644" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;width:442.5px;color:#666;font-size:11px;line-height:14px;fill:#666;" text-anchor="end">
<tspan x="67">1,250</tspan>
</text>
</g>
<text x="26" y="175.5" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;color:#6d869f;font-weight:bold;fill:#6d869f;"  transform="rotate(270 26 175)" text-anchor="middle">
<tspan x="26">Value</tspan>
</text>
<path d="M 75 311.5 L 1000 311.5" fill="none" stroke="#C0D0E0" stroke-width="1" >
</path>
<g class="highcharts-tooltip"  visibility="hidden">
<rect rx="5" ry="5" fill="none" x="2" y="2" width="0" height="0" stroke-width="5" fill-opacity="0.85"  stroke="rgb(0, 0, 0)" stroke-opacity="0.05" transform="translate(1,1)">
</rect>
<rect rx="5" ry="5" fill="none" x="2" y="2" width="0" height="0" stroke-width="3" fill-opacity="0.85"  stroke="rgb(0, 0, 0)" stroke-opacity="0.1" transform="translate(1,1)">
</rect>
<rect rx="5" ry="5" fill="none" x="2" y="2" width="0" height="0" stroke-width="1" fill-opacity="0.85"  stroke="rgb(0, 0, 0)" stroke-opacity="0.15000000000000002" transform="translate(1,1)">
</rect>
<rect rx="5" ry="5" fill="rgb(255,255,255)" x="2" y="2" width="0" height="0" stroke-width="2" fill-opacity="0.85">
</rect>
<text x="2" y="14" style="font-family:\'lucida grande\', \'lucida sans unicode\', verdana, arial, helvetica, sans-serif;font-size:12px;color:#333333;font-size:12px;padding:0;white-space:nowrap;fill:#333333;" >
<tspan x="2"> </tspan>
</text>
</g>
<g class="highcharts-tracker"  transform="translate(75,40)">
</g>
</svg>

[anthony]

What coder for SVG are you using?

See IM Examples...
http://www.imagemagick.org/Usage/draw/#svg

[anthony]

Sorry I am a Linux/Unix Programmer. Always has been.
I know it works for Windows, but I don't know how RSVG is installed on windows.

If you can't figure out how to install for windows try starting a new topis "RSVG with Windows" and see what other say.

Otherwise as a stop-gap method, you can just install the RSRVG binary and use it to convert the SVG into a raster image, and then use ImageMagick on that. Internally that is what IM does though using the RSVG library rather than the command.