SVG looks strange in browser

A discussion forum for JFreeSVG (a fast, lightweight, SVG generator for the Java platform).
Locked
barsum
Posts: 2
Joined: Sat Mar 08, 2014 11:43 am
antibot: No, of course not.

SVG looks strange in browser

Post by barsum » Sat Mar 08, 2014 11:53 am

First I goatta say that you make it really difficult to join this forum. The validation question asks how many USD the developer guide cost - but on the pricing page, the amounts are in local currency - and apparently it's not just a matter of converting from local currency to USD using Google :-/

My question is really simple, and I'll have to excuse myself - because this has probably been asked 100 of times. But I can't find the FAQ or in the forum.

The is my first attempt with JFreeSVG. I'm trying to create a simple JFreeChart and convert it to SVG element that I can display in html.

If used the PieChartTest from the JFreeChart sample code.

Code: Select all

JFreeChart chart = pieChartTest.getChart();
SVGGraphics2D g2 = new SVGGraphics2D(600, 400);
Rectangle r = new Rectangle(0, 0, 600, 400);
chart.draw(g2, r);
System.out.println(g2.getSVGElement());
I've pasted the result below.

If I paste the svg into a html document - or http://canvg.googlecode.com/svn/trunk/e ... /index.htm it looks pretty wierd?

What's going on?

Thanks in advance
Barsum




<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="400">
<defs><clipPath id="clip-0"><path d="M 0 0 L 600 0 L 600 400 L 0 400 L 0 0 M 0 0"/></clipPath>
<clipPath id="clip-1"><path d="M 5 26,14 L 5 370,52 L 595 370,52 L 595 26,14 M 5 26,14"/></clipPath>
</defs>
<rect x="0" y="0" width="600" height="400" style="fill: rgb(255,255,255);fill-opacity: 1.0" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-0)"/><g transform="matrix(1,0,0,1,0,0)"><text x="254" y="21,01" style="fill: rgb(0,0,0); font-family: Tahoma; font-size: 20px; font-weight: bold; " text-rendering="auto" clip-path="url(#clip-0)">Pie Chart</text></g><rect x="211" y="376,52" width="178" height="22,48" style="fill: rgb(255,255,255);fill-opacity: 1.0" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-0)"/><line x1="211,5" y1="377,02" x2="388,5" y2="377,02" style="stroke-width: 1.0;stroke: rgb(0,0,0);stroke-opacity: 1.0;" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-0)"/><line x1="211,5" y1="398,5" x2="388,5" y2="398,5" style="stroke-width: 1.0;stroke: rgb(0,0,0);stroke-opacity: 1.0;" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-0)"/><line x1="211,5" y1="398,5" x2="211,5" y2="377,02" style="stroke-width: 1.0;stroke: rgb(0,0,0);stroke-opacity: 1.0;" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-0)"/><line x1="388,5" y1="398,5" x2="388,5" y2="377,02" style="stroke-width: 1.0;stroke: rgb(0,0,0);stroke-opacity: 1.0;" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-0)"/><g style="fill: rgb(255,85,85);fill-opacity: 1.0; stroke: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-0)"><path d="M 223 387,76 C 223 389,97 221,21 391,76 219 391,76 C 216,79 391,76 215 389,97 215 387,76 C 215 385,55 216,79 383,76 219 383,76 C 221,21 383,76 223 385,55 223 387,76 M 223 387,76"/></g><g style="stroke-width: 0.5;stroke: rgb(128,128,128);stroke-opacity: 1.0;; fill: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-0)"><path d="M 223 387,76 C 223 389,97 221,21 391,76 219 391,76 C 216,79 391,76 215 389,97 215 387,76 C 215 385,55 216,79 383,76 219 383,76 C 221,21 383,76 223 385,55 223 387,76 M 223 387,76"/></g><g transform="matrix(1,0,0,1,0,0)"><text x="227" y="392,52" style="fill: rgb(64,64,64); font-family: Tahoma; font-size: 12px; " text-rendering="auto" clip-path="url(#clip-0)">Java</text></g><g style="fill: rgb(85,85,255);fill-opacity: 1.0; stroke: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-0)"><path d="M 264 387,76 C 264 389,97 262,21 391,76 260 391,76 C 257,79 391,76 256 389,97 256 387,76 C 256 385,55 257,79 383,76 260 383,76 C 262,21 383,76 264 385,55 264 387,76 M 264 387,76"/></g><g style="stroke-width: 0.5;stroke: rgb(128,128,128);stroke-opacity: 1.0;; fill: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-0)"><path d="M 264 387,76 C 264 389,97 262,21 391,76 260 391,76 C 257,79 391,76 256 389,97 256 387,76 C 256 385,55 257,79 383,76 260 383,76 C 262,21 383,76 264 385,55 264 387,76 M 264 387,76"/></g><g transform="matrix(1,0,0,1,0,0)"><text x="268" y="392,52" style="fill: rgb(64,64,64); font-family: Tahoma; font-size: 12px; " text-rendering="auto" clip-path="url(#clip-0)">Visual Basic</text></g><g style="fill: rgb(85,255,85);fill-opacity: 1.0; stroke: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-0)"><path d="M 344 387,76 C 344 389,97 342,21 391,76 340 391,76 C 337,79 391,76 336 389,97 336 387,76 C 336 385,55 337,79 383,76 340 383,76 C 342,21 383,76 344 385,55 344 387,76 M 344 387,76"/></g><g style="stroke-width: 0.5;stroke: rgb(128,128,128);stroke-opacity: 1.0;; fill: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-0)"><path d="M 344 387,76 C 344 389,97 342,21 391,76 340 391,76 C 337,79 391,76 336 389,97 336 387,76 C 336 385,55 337,79 383,76 340 383,76 C 342,21 383,76 344 385,55 344 387,76 M 344 387,76"/></g><g transform="matrix(1,0,0,1,0,0)"><text x="348" y="392,52" style="fill: rgb(64,64,64); font-family: Tahoma; font-size: 12px; " text-rendering="auto" clip-path="url(#clip-0)">C/C++</text></g><rect x="5" y="26,14" width="590" height="344,38" style="fill: rgb(192,192,192);fill-opacity: 1.0" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-0)"/><rect x="5" y="26,14" width="590" height="344,38" style="stroke-width: 0.5;stroke: rgb(0,0,0);stroke-opacity: 1.0;; fill: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-0)"/><g style="fill: rgb(128,128,128);fill-opacity: 1.0; stroke: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-1)"><path d="M 304 64,92 C 375,62 64,92 435,22 119,93 440,96 191,32 C 446,7 262,7 396,65 326,53 325,95 337,97 C 255,25 349,41 187,62 304,63 170,55 235,08 L 304 202,33 M 304 64,92"/></g><g style="fill: rgb(128,128,128);fill-opacity: 1.0; stroke: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-1)"><path d="M 170,55 235,08 C 160,49 194,09 169,83 150,75 195,88 117,53 C 221,93 84,32 261,79 64,92 304 64,92 L 304 202,33 M 170,55 235,08"/></g><g style="fill: rgb(255,85,85);fill-opacity: 1.0; stroke: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-1)"><path d="M 300 60,92 C 371,62 60,92 431,22 115,93 436,96 187,32 C 442,7 258,7 392,65 322,53 321,95 333,97 C 251,25 345,41 183,62 300,63 166,55 231,08 L 300 198,33 M 300 60,92"/></g><g style="stroke-width: 0.5;stroke: rgb(128,128,128);stroke-opacity: 1.0;; fill: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-1)"><path d="M 300 60,92 C 371,62 60,92 431,22 115,93 436,96 187,32 C 442,7 258,7 392,65 322,53 321,95 333,97 C 251,25 345,41 183,62 300,63 166,55 231,08 L 300 198,33 M 300 60,92"/></g><g style="fill: rgb(85,255,85);fill-opacity: 1.0; stroke: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-1)"><path d="M 166,55 231,08 C 156,49 190,09 165,83 146,75 191,88 113,53 C 217,93 80,32 257,79 60,92 300 60,92 L 300 198,33 M 166,55 231,08"/></g><g style="stroke-width: 0.5;stroke: rgb(128,128,128);stroke-opacity: 1.0;; fill: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-1)"><path d="M 166,55 231,08 C 156,49 190,09 165,83 146,75 191,88 113,53 C 217,93 80,32 257,79 60,92 300 60,92 L 300 198,33 M 166,55 231,08"/></g><g style="stroke-width: 0.5;stroke: rgb(0,0,0);stroke-opacity: 1.0;; fill: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-1)"><path d="M 142,18 109,07 C 155,36 109,07 186,19 109,07 202,69 122,01"/></g><rect x="103,18" y="101,83" width="41" height="18,48" style="fill: rgb(151,151,151);fill-opacity: 1.0" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-1)"/><rect x="101,18" y="99,83" width="41" height="18,48" style="fill: rgb(255,255,192);fill-opacity: 1.0" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-1)"/><rect x="101,18" y="99,83" width="41" height="18,48" style="stroke-width: 0.5;stroke: rgb(0,0,0);stroke-opacity: 1.0;; fill: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-1)"/><g transform="matrix(1,0,0,1,0,0)"><text x="103,18" y="113,83" style="fill: rgb(0,0,0); font-family: Tahoma; font-size: 12px; " text-rendering="auto" clip-path="url(#clip-1)">C/C++</text></g><g style="stroke-width: 0.5;stroke: rgb(0,0,0);stroke-opacity: 1.0;; fill: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-1)"><path d="M 140,83 232,8 C 155,36 232,8 159,53 232,8 179,9 227,8"/></g><rect x="76,83" y="225,56" width="66" height="18,48" style="fill: rgb(151,151,151);fill-opacity: 1.0" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-1)"/><rect x="74,83" y="223,56" width="66" height="18,48" style="fill: rgb(255,255,192);fill-opacity: 1.0" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-1)"/><rect x="74,83" y="223,56" width="66" height="18,48" style="stroke-width: 0.5;stroke: rgb(0,0,0);stroke-opacity: 1.0;; fill: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-1)"/><g transform="matrix(1,0,0,1,0,0)"><text x="76,83" y="237,57" style="fill: rgb(0,0,0); font-family: Tahoma; font-size: 12px; " text-rendering="auto" clip-path="url(#clip-1)">Visual Basic</text></g><g style="stroke-width: 0.5;stroke: rgb(0,0,0);stroke-opacity: 1.0;; fill: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-1)"><path d="M 457,82 287,59 C 444,64 287,59 413,81 287,59 397,31 274,64"/></g><rect x="459,82" y="280,34" width="27" height="18,48" style="fill: rgb(151,151,151);fill-opacity: 1.0" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-1)"/><rect x="457,82" y="278,34" width="27" height="18,48" style="fill: rgb(255,255,192);fill-opacity: 1.0" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-1)"/><rect x="457,82" y="278,34" width="27" height="18,48" style="stroke-width: 0.5;stroke: rgb(0,0,0);stroke-opacity: 1.0;; fill: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-1)"/><g transform="matrix(1,0,0,1,0,0)"><text x="459,82" y="292,35" style="fill: rgb(0,0,0); font-family: Tahoma; font-size: 12px; " text-rendering="auto" clip-path="url(#clip-1)">Java</text></g><rect x="5" y="26,14" width="590" height="344,38" style="stroke-width: 0.5;stroke: rgb(0,0,0);stroke-opacity: 1.0;; fill: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-0)"/></svg>

david.gilbert
JFreeChart Project Leader
Posts: 11734
Joined: Fri Mar 14, 2003 10:29 am
antibot: No, of course not.
Contact:

Re: SVG looks strange in browser

Post by david.gilbert » Sun Mar 09, 2014 10:03 pm

Hi,

Yes, sorry about the forum registration, I will try to improve that. We got hammered by spammers a while back so I had to put something in place quickly, and never got around to reworking it.

Looking at the SVG you posted, it seems you are hitting a bug that was fixed in December for the JFreeSVG 1.6 release. There is a number formatter that is used to output a fixed number of decimal places for coordinates in the SVG, and in many locales it was using a comma for the decimal separator...whereas the SVG format expects a decimal point. If you grab the latest JFreeSVG 1.7 release, the issue should be gone. If not, please let me know.
David Gilbert
JFreeChart Project Leader

:idea: Read my blog
:idea: Support JFree via the Github sponsorship program

barsum
Posts: 2
Joined: Sat Mar 08, 2014 11:43 am
antibot: No, of course not.

Re: SVG looks strange in browser

Post by barsum » Sun Mar 09, 2014 10:12 pm

Hi David,

Thanks for your fast reply.

According to the zip (and readme) I'm using:

Version 1.7, 25 February 2014

Can it be another lib that I'm already using which is outdated?

What can I do to help clarify? Send you my classpath?

--
Barsum
Developer at http://www.bastaware.com
Best Stock Portfolio App for private investors

david.gilbert
JFreeChart Project Leader
Posts: 11734
Joined: Fri Mar 14, 2003 10:29 am
antibot: No, of course not.
Contact:

Re: SVG looks strange in browser

Post by david.gilbert » Sun Mar 09, 2014 10:18 pm

Can you run the SVGPieChartDemo1.java file included in the distribution and see if it gives you the same issue? I will look again and see if there is some other way to get comma's into the coordinates, because I definitely see that in the SVG you posted.

JFreeSVG 1.4 is included in the most recent JFreeChart distribution (1.0.17), so can you double check that version isn't on your class path somewhere?

Locked