Incorrect image rendering

[hakimio]

Following images are rendered incorrectly when using php-svg-lib. Missing features and incorrect font style (font-family, font-weight and font-size).

https://dl.dropboxusercontent.com/u/14646826/SVG%20rendering%20issues.zip

In case the file gets lost:

<svg width="690" height="210" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="ep"><rect x="64" y="19" width="590" height="162"/></clipPath><symbol><circle id="eq" cursor="crosshair" fill="#20A9ED" stroke="#fff" stroke-width="1px" r="3"/></symbol></defs><rect width="100%" height="100%" fill="#fff" stroke-width="0px"/><g><g><rect x="64" width="590" y="100" height="40.5" fill="#F9F9F9"/><rect x="64" width="590" y="19" height="40.5" fill="#F9F9F9"/></g><path d="M64 181h590M64 140.5h590M64 100h590M64 59.5h590M64 19h590" stroke="#D3D7DF" stroke-dasharray="4,4"/></g><g clip-path="url(#ep)"><path fill="none" stroke-width="3px" stroke="#20A9ED" d="M64 177.76 L83.667 181 103.33 181 123 41.194 142.67 181 162.33 151.19 182 181 201.67 181 221.33 137.75 241 149.09 260.67 120.74 280.33 166.26 300 181 319.67 169.17 339.33 151.84 359 181 378.67 166.74 398.33 181 418 139.53 437.67 178.08 457.33 169.5 477 166.42 496.67 163.83 516.33 153.3 536 136.77 555.67 129.65 575.33 129 595 178.57 614.67 181 634.33 167.72 654 181 "/></g><g stroke="#767676" stroke-width="1px"><path d="M64 181h590"/><path d="M64 19v162"/></g><g font-size="12px" font-family="Verdana" fill="#767676"><g text-anchor="end"><text x="54" y="184.6">0 kr</text><text x="54" y="144.1">2,5 kr</text><text x="54" y="103.6">5 kr</text><text x="54" y="63.1">7,5 kr</text><text x="54" y="22.6">10 kr</text></g><g text-anchor="middle"><text y="199.4" x="64">2016-10-27</text><text y="199.4" x="654">2016-11-26</text></g></g><use x="64" y="177.76" xlink:href="#eq" id="es"></use><use x="83.667" y="181" xlink:href="#eq" id="et"></use><use x="103.33" y="181" xlink:href="#eq" id="eu"></use><use x="123" y="41.194" xlink:href="#eq" id="ev"></use><use x="142.67" y="181" xlink:href="#eq" id="ew"></use><use x="162.33" y="151.19" xlink:href="#eq" id="ex"></use><use x="182" y="181" xlink:href="#eq" id="ey"></use><use x="201.67" y="181" xlink:href="#eq" id="ez"></use><use x="221.33" y="137.75" xlink:href="#eq" id="e10"></use><use x="241" y="149.09" xlink:href="#eq" id="e11"></use><use x="260.67" y="120.74" xlink:href="#eq" id="e12"></use><use x="280.33" y="166.26" xlink:href="#eq" id="e13"></use><use x="300" y="181" xlink:href="#eq" id="e14"></use><use x="319.67" y="169.17" xlink:href="#eq" id="e15"></use><use x="339.33" y="151.84" xlink:href="#eq" id="e16"></use><use x="359" y="181" xlink:href="#eq" id="e17"></use><use x="378.67" y="166.74" xlink:href="#eq" id="e18"></use><use x="398.33" y="181" xlink:href="#eq" id="e19"></use><use x="418" y="139.53" xlink:href="#eq" id="e1a"></use><use x="437.67" y="178.08" xlink:href="#eq" id="e1b"></use><use x="457.33" y="169.5" xlink:href="#eq" id="e1c"></use><use x="477" y="166.42" xlink:href="#eq" id="e1d"></use><use x="496.67" y="163.83" xlink:href="#eq" id="e1e"></use><use x="516.33" y="153.3" xlink:href="#eq" id="e1f"></use><use x="536" y="136.77" xlink:href="#eq" id="e1g"></use><use x="555.67" y="129.65" xlink:href="#eq" id="e1h"></use><use x="575.33" y="129" xlink:href="#eq" id="e1i"></use><use x="595" y="178.57" xlink:href="#eq" id="e1j"></use><use x="614.67" y="181" xlink:href="#eq" id="e1k"></use><use x="634.33" y="167.72" xlink:href="#eq" id="e1l"></use><use x="654" y="181" xlink:href="#eq" id="e1m"></use><g font-family="Verdana" font-size="12px" fill="#274B6D" transform="translate(304,186)" font-weight="bold" id="e1n"><rect fill="white" width="63.8" height="30"/><g transform="translate(5,0)"><path fill="none" stroke-width="3px" stroke="#20A9ED" d="M0 15l20 0"/><use x="10" y="15" xlink:href="#eq"></use></g><g transform="translate(30,0)"><text x="0" y="18">Pris</text></g></g></svg>

[hakimio]

I was testing latest "stable" release and it seems output improved a lot in the latest development version, but there are still some issues.

[hakimio]

@PhenX Could you take a look at this?

[PhenX]

Is that better now ?

[hakimio]

Yes, it does look better now. Points now have the correct fill and stroke colors, but the legend text is still not bold and too steep angle issue also remains. Did you do anything about the font weight issue?

[PhenX]

I improved font weight handling, bug still can't make it to work with CPdf, weird issue ... Is it better for you now ? About the steep angle, your plot lib handles it with a big clipping rectangle, which is not supported for now. Maybe you can add stroke-linejoin="round" on the <path> tag of the graph, which has the same effect.

[hakimio]

I updated to the latest code and a "funny" thing happened. Now, the axis text is bold instead of the legend text. Just to be sure, I did double check the generated SVG - when rendered in Chrome or any other browser the legend text is bold and the axis text weight is normal as it should be. Does it look right for you? Or is there any reason you can't test the text rendering?

stroke-linejoin="round" workaround works great though. It fixes the "angle" issue.

BTW, I use SVGGraph PHP library to generate the graph. If it helps in any way, I can provide a script I use to generate the graphs.

[PhenX]

I think it should be better now :)

On Tue, Dec 13, 2016 at 9:15 PM, Tomas Rimkus notifications@github.com wrote:

I updated to the latest code and a "funny" thing happened. Now, the axis text is bold instead of the legend text. Just to be sure, I did double check the generated SVG - when rendered in Chrome or any other browser the legend text is bold and the axis text weight is normal as it should be. Does it look right for you? Or is there any reason you can't test the font rendering?

stroke-linejoin="round" workaround works great though. It fixes the "angle" issue.

BTW, I use SVGGraph https://github.com/goat1000/SVGGraph PHP library to generate the graph. If it helps in any way, I can provide a script I use to generate the graphs.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/PhenX/php-svg-lib/issues/10#issuecomment-266848919, or mute the thread https://github.com/notifications/unsubscribe-auth/AACkurZ7xraehn9i-yYGqr5iF8oLlEeaks5rHvzegaJpZM4K9vHE .

[hakimio]

Thank you very much. Now everything seems to be the way it should :) Feel free to close this issue if you think the clipping rectangle support is not worth the effort.

PS: The library has improved a lot since the last "stable" version 0.1. If you have some time, you should definitely release a new version and update dompdf's composer.json.

[PhenX]

Glad I could help ! I'll make a new release with the improvements :)