Hi,
when generating svg files from plots (e.g. with Canvas.SaveAs(‘test.svg’)), there is a mistake in the syntax of the generated svg file. attributes like ‘width’, ‘height’, ‘x’ or ‘y’ of a node contain a whitespace in the value, which causes google chrome to ignore the element completely.
moreover, in order to be able to scale svg images correctly (e.g. in web pages), the following attribute should be set in the root node.
<svg preserveAspectRatio=“xMinYMin”
Cheers,
Esteban and Felix
Can you provide a small macro generating the faulty SVG file ?
thanks.
TGraph gr* = TGraph(2)
gr->SetPoint(0,1,1)
gr->SetPoint(1,2,2)
gr->SetMarkerStyle(8)
TCanvas c1
c1.cd()
gr->Draw("AP")
c1.SaveAs("test.svg")The output svg is the following:
<?xml version="1.0" standalone="no"?>
<svg width="567" height="385" viewBox="0 0 567 385" xmlns="http://www.w3.org/2000/svg ">
<title>
test.svg
</title>
<desc>
Creator: ROOT Version 5.99/04
CreationDate: Tue Dec 10 11:04:12 2013</desc>
<defs>
</defs>
<rect x="0" y="0" width="567" height="385" fill="white"/>
<rect x="57" y="38" width="453" height="308" fill="white"/>
<rect x="57" y="38" width="453" height="308" fill="none" stroke="black"/>
<rect x="57" y="38" width="453" height="308" fill="white"/>
<rect x="57" y="38" width="453" height="308" fill="none" stroke="black"/>
<path d="M57,346h 453" fill="none" stroke="black"/>
<path d="M94,337v 9" fill="none" stroke="black"/>
<path d="M113,342v 4" fill="none" stroke="black"/>
<path d="M132,342v 4" fill="none" stroke="black"/>
<path d="M151,342v 4" fill="none" stroke="black"/>
<path d="M170,337v 9" fill="none" stroke="black"/>
<path d="M189,342v 4" fill="none" stroke="black"/>
<path d="M208,342v 4" fill="none" stroke="black"/>
<path d="M227,342v 4" fill="none" stroke="black"/>
<path d="M246,337v 9" fill="none" stroke="black"/>
<path d="M265,342v 4" fill="none" stroke="black"/>
<path d="M283,342v 4" fill="none" stroke="black"/>
<path d="M302,342v 4" fill="none" stroke="black"/>
<path d="M321,337v 9" fill="none" stroke="black"/>
<path d="M340,342v 4" fill="none" stroke="black"/>
<path d="M359,342v 4" fill="none" stroke="black"/>
<path d="M378,342v 4" fill="none" stroke="black"/>
<path d="M397,337v 9" fill="none" stroke="black"/>
<path d="M416,342v 4" fill="none" stroke="black"/>
<path d="M435,342v 4" fill="none" stroke="black"/>
<path d="M454,342v 4" fill="none" stroke="black"/>
<path d="M472,337v 9" fill="none" stroke="black"/>
<path d="M94,337v 9" fill="none" stroke="black"/>
<path d="M76,342v 4" fill="none" stroke="black"/>
<path d="M472,337v 9" fill="none" stroke="black"/>
<path d="M491,342v 4" fill="none" stroke="black"/>
<text x="90" y="361" fill="black" font-size="14" font-family="Helvetica" font-weight="bold">
1
</text>
<text x="159" y="361" fill="black" font-size="14" font-family="Helvetica" font-weight="bold">
1.2
</text>
<text x="235" y="361" fill="black" font-size="14" font-family="Helvetica" font-weight="bold">
1.4
</text>
<text x="310" y="361" fill="black" font-size="14" font-family="Helvetica" font-weight="bold">
1.6
</text>
<text x="386" y="361" fill="black" font-size="14" font-family="Helvetica" font-weight="bold">
1.8
</text>
<text x="468" y="361" fill="black" font-size="14" font-family="Helvetica" font-weight="bold">
2
</text>
<path d="M57,38h 453" fill="none" stroke="black"/>
<path d="M94,47v -9" fill="none" stroke="black"/>
<path d="M113,43v -5" fill="none" stroke="black"/>
<path d="M132,43v -5" fill="none" stroke="black"/>
<path d="M151,43v -5" fill="none" stroke="black"/>
<path d="M170,47v -9" fill="none" stroke="black"/>
<path d="M189,43v -5" fill="none" stroke="black"/>
<path d="M208,43v -5" fill="none" stroke="black"/>
<path d="M227,43v -5" fill="none" stroke="black"/>
<path d="M246,47v -9" fill="none" stroke="black"/>
<path d="M265,43v -5" fill="none" stroke="black"/>
<path d="M283,43v -5" fill="none" stroke="black"/>
<path d="M302,43v -5" fill="none" stroke="black"/>
<path d="M321,47v -9" fill="none" stroke="black"/>
<path d="M340,43v -5" fill="none" stroke="black"/>
<path d="M359,43v -5" fill="none" stroke="black"/>
<path d="M378,43v -5" fill="none" stroke="black"/>
<path d="M397,47v -9" fill="none" stroke="black"/>
<path d="M416,43v -5" fill="none" stroke="black"/>
<path d="M435,43v -5" fill="none" stroke="black"/>
<path d="M454,43v -5" fill="none" stroke="black"/>
<path d="M472,47v -9" fill="none" stroke="black"/>
<path d="M94,47v -9" fill="none" stroke="black"/>
<path d="M76,43v -5" fill="none" stroke="black"/>
<path d="M472,47v -9" fill="none" stroke="black"/>
<path d="M491,43v -5" fill="none" stroke="black"/>
<path d="M57,346v -308" fill="none" stroke="black"/>
<path d="M70,321h -13" fill="none" stroke="black"/>
<path d="M63,308h -6" fill="none" stroke="black"/>
<path d="M63,295h -6" fill="none" stroke="black"/>
<path d="M63,282h -6" fill="none" stroke="black"/>
<path d="M70,269h -13" fill="none" stroke="black"/>
<path d="M63,257h -6" fill="none" stroke="black"/>
<path d="M63,244h -6" fill="none" stroke="black"/>
<path d="M63,231h -6" fill="none" stroke="black"/>
<path d="M70,218h -13" fill="none" stroke="black"/>
<path d="M63,205h -6" fill="none" stroke="black"/>
<path d="M63,192h -6" fill="none" stroke="black"/>
<path d="M63,180h -6" fill="none" stroke="black"/>
<path d="M70,167h -13" fill="none" stroke="black"/>
<path d="M63,154h -6" fill="none" stroke="black"/>
<path d="M63,141h -6" fill="none" stroke="black"/>
<path d="M63,128h -6" fill="none" stroke="black"/>
<path d="M70,115h -13" fill="none" stroke="black"/>
<path d="M63,102h -6" fill="none" stroke="black"/>
<path d="M63,90h -6" fill="none" stroke="black"/>
<path d="M63,77h -6" fill="none" stroke="black"/>
<path d="M70,64h -13" fill="none" stroke="black"/>
<path d="M70,321h -13" fill="none" stroke="black"/>
<path d="M63,334h -6" fill="none" stroke="black"/>
<path d="M70,64h -13" fill="none" stroke="black"/>
<path d="M63,51h -6" fill="none" stroke="black"/>
<text x="46" y="325" fill="black" font-size="14" font-family="Helvetica" font-weight="bold">
1
</text>
<text x="33" y="273" fill="black" font-size="14" font-family="Helvetica" font-weight="bold">
1.2
</text>
<text x="33" y="222" fill="black" font-size="14" font-family="Helvetica" font-weight="bold">
1.4
</text>
<text x="33" y="170" fill="black" font-size="14" font-family="Helvetica" font-weight="bold">
1.6
</text>
<text x="33" y="119" fill="black" font-size="14" font-family="Helvetica" font-weight="bold">
1.8
</text>
<text x="46" y="67" fill="black" font-size="14" font-family="Helvetica" font-weight="bold">
2
</text>
<path d="M510,346v -308" fill="none" stroke="black"/>
<path d="M497,321h 13" fill="none" stroke="black"/>
<path d="M503,308h 7" fill="none" stroke="black"/>
<path d="M503,295h 7" fill="none" stroke="black"/>
<path d="M503,282h 7" fill="none" stroke="black"/>
<path d="M497,269h 13" fill="none" stroke="black"/>
<path d="M503,257h 7" fill="none" stroke="black"/>
<path d="M503,244h 7" fill="none" stroke="black"/>
<path d="M503,231h 7" fill="none" stroke="black"/>
<path d="M497,218h 13" fill="none" stroke="black"/>
<path d="M503,205h 7" fill="none" stroke="black"/>
<path d="M503,192h 7" fill="none" stroke="black"/>
<path d="M503,180h 7" fill="none" stroke="black"/>
<path d="M497,167h 13" fill="none" stroke="black"/>
<path d="M503,154h 7" fill="none" stroke="black"/>
<path d="M503,141h 7" fill="none" stroke="black"/>
<path d="M503,128h 7" fill="none" stroke="black"/>
<path d="M497,115h 13" fill="none" stroke="black"/>
<path d="M503,102h 7" fill="none" stroke="black"/>
<path d="M503,90h 7" fill="none" stroke="black"/>
<path d="M503,77h 7" fill="none" stroke="black"/>
<path d="M497,64h 13" fill="none" stroke="black"/>
<path d="M497,321h 13" fill="none" stroke="black"/>
<path d="M503,334h 7" fill="none" stroke="black"/>
<path d="M497,64h 13" fill="none" stroke="black"/>
<path d="M503,51h 7" fill="none" stroke="black"/>
<g stroke="black" stroke-width="1" fill="black">
<circle cx=" 94" cy=" 321" r=" 3.5"/>
<circle cx=" 472" cy=" 64" r=" 3.5"/>
</g>
<rect x="6" y="2" width="66" height="23" fill="white"/>
<path d="M6,25h 66" fill="none" stroke="black"/>
<path d="M72,25v -23" fill="none" stroke="black"/>
<path d="M72,2h -66" fill="none" stroke="black"/>
<path d="M6,2v 23" fill="none" stroke="black"/>
<text x="10" y="18" fill="black" font-size="18" font-family="Helvetica" font-weight="bold">
Graph
</text></svg>The code
<circle cx=" 94" cy=" 321" r=" 3.5"/>
<circle cx=" 472" cy=" 64" r=" 3.5"/>must be replaced by
<circle cx="94" cy="321" r="3.5"/>
<circle cx="472" cy="64" r="3.5"/>and in the beginnging:
<svg width="567" height="385" viewBox="0 0 567 385" xmlns="http://www.w3.org/2000/svg ">by
<svg preserveAspectRatio="xMinYMin" width="567" height="385" viewBox="0 0 567 385" xmlns="http://www.w3.org/2000/svg ">I agree with the spaces problem. I will fix that.
But I do not see any difference with your 2nd suggestion. How can I test it ?
The marker issue is now fixed in trunk and 5.34.
I have not changed the header as I do not understand what your suggestion really brings.
Hi
Sorry didn’t see that answer, but just wanted to comment.
Here is the reason for the 2nd suggestion:
developer.mozilla.org/de/docs/W … spectRatio
Cheers
veloxid
OK. Seems to me the current implementation produces plots analog to PS or PDF. I do not see why I should at this Aspect Ratio stuff. Can you provide a use case where you need that ? do you have some web page with and without it ? so we can see the difference…