[CLOSED] Using SVG

[cwolcott]

I know this is not related to Ext.NET, but does anyone have any thoughts on the following issue.

In reference to the thread - Problem converting svg to png I performed the following:

• Download the SVG Master version 1.0.2 from https://github.com/vvvv/SVG
• Opened the solution and built SVG
• Copied Baidaly's code example
• Added reference to SVG.dll
• Executed the code, pressed the 'Save SVG' button

When executing the svgGraph.Draw() line I received the following exception:
Font 'Arial, Helvetica, sans-serif' cannot be found.

[Baidaly]

Hello!

Can you post your SVG code? I'll try to ask them to review it.

[cwolcott]

I used your example from a previous post running against Rev 5229.

Download the SVG Master version 1.0.2 from https://github.com/vvvv/SVG and built the source.

I have executed the could below on both my work computer (Windows 7 - Standalone network) and my home computer (Windows 7) and I get the same error. When executing the svgGraph.Draw() line I received the following exception: Font 'Arial, Helvetica, sans-serif' cannot be found.

System.ArgumentException was unhandled by user code
  HResult=-2147024809
  Message=Font 'Arial, Helvetica, sans-serif' cannot be found.
  Source=System.Drawing
  StackTrace:
       at System.Drawing.FontFamily.CreateFontFamily(String name, FontCollection fontCollection)
       at System.Drawing.FontFamily..ctor(String name)
       at Svg.SvgText.DrawString(GraphicsPath path, SvgUnit x, SvgUnit y, SvgUnit dx, SvgUnit dy, Font font, Single fontSize, String text) in C:\Users\Chris\Documents\Visual Studio 2010\Projects\SVG\trunk\Source\Text\SvgText.cs:line 321
       at Svg.SvgText.get_Path() in C:\Users\Chris\Documents\Visual Studio 2010\Projects\SVG\trunk\Source\Text\SvgText.cs:line 246
       at Svg.SvgVisualElement.Render(SvgRenderer renderer) in C:\Users\Chris\Documents\Visual Studio 2010\Projects\SVG\trunk\Source\Basic Shapes\SvgVisualElement.cs:line 100
       at Svg.SvgElement.RenderChildren(SvgRenderer renderer) in C:\Users\Chris\Documents\Visual Studio 2010\Projects\SVG\trunk\Source\SvgElement.cs:line 464
       at Svg.SvgElement.Render(SvgRenderer renderer) in C:\Users\Chris\Documents\Visual Studio 2010\Projects\SVG\trunk\Source\SvgElement.cs:line 452
       at Svg.SvgDocument.Draw(Bitmap bitmap) in C:\Users\Chris\Documents\Visual Studio 2010\Projects\SVG\trunk\Source\SvgDocument.cs:line 374
       at Svg.SvgDocument.Draw() in C:\Users\Chris\Documents\Visual Studio 2010\Projects\SVG\trunk\Source\SvgDocument.cs:line 347
       at ASP.charts_svgchart01_aspx.SaveSvg(String svg) in c:\Users\Chris\Documents\Visual Studio 2010\Projects\WolcottSampleWork\WolcottSample\Charts\SvgChart01.aspx:line 40
  InnerException:

Here is the svg produced var svg = Ext.htmlEncode(Ext.draw.engine.SvgExporter.generat e(#{Chart1}.surface));
What does your svg look like?

<?xml version="1.0" standalone="yes"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="400px" height="400px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><defs></defs><rect width="100%" height="100%" fill="#fff" fill-opacity="0" stroke="none" /><path d="M 63 336.5 l 327 0 M 63.5 336 l 0 7 M 95.5 336 l 0 7 M 128.5 336 l 0 7 M 161.5 336 l 0 7 M 193.5 336 l 0 7 M 226.5 336 l 0 7 M 259.5 336 l 0 7 M 291.5 336 l 0 7 M 324.5 336 l 0 7 M 357.5 336 l 0 7 M 390.5 336 l 0 7" fill="none" stroke="#444" stroke-width="1" z-index="0" transform="matrix(1,0,0,1,0,0)" /><text x="59" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="59" dy="3">0</tspan></text><text x="88" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="88" dy="3">10</tspan></text><text x="121" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="121" dy="3">20</tspan></text><text x="154" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="154" dy="3">30</tspan></text><text x="186" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="186" dy="3">40</tspan></text><text x="219" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="219" dy="3">50</tspan></text><text x="252" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="252" dy="3">60</tspan></text><text x="284" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="284" dy="3">70</tspan></text><text x="317" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="317" dy="3">80</tspan></text><text x="350" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="350" dy="3">90</tspan></text><text x="379" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="379" dy="3">100</tspan></text><text x="0" y="0" font-size="18" font-family="Arial" fill="#444" transform="matrix(1,0,0,1,220.5,383.8)" ><tspan x="" dy="4.5">X</tspan></text><path d="M 63.5 336 l 0 -326 M 63 336.5 l -6 0 M 63 303.5 l -6 0 M 63 270.5 l -6 0 M 63 238.5 l -6 0 M 63 205.5 l -6 0 M 63 173.5 l -6 0 M 63 140.5 l -6 0 M 63 107.5 l -6 0 M 63 75.5 l -6 0 M 63 42.5 l -6 0 M 63 10.5 l -6 0" fill="none" stroke="#444" stroke-width="1" z-index="0" transform="matrix(1,0,0,1,0,0)" /><text x="46" y="336" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="46" dy="3">0</tspan></text><text x="46" y="303" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="46" dy="3">5</tspan></text><text x="39" y="270" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">10</tspan></text><text x="39" y="238" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">15</tspan></text><text x="39" y="205" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">20</tspan></text><text x="39" y="173" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">25</tspan></text><text x="39" y="140" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">30</tspan></text><text x="39" y="107" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">35</tspan></text><text x="39" y="75" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">40</tspan></text><text x="39" y="42" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">45</tspan></text><text x="39" y="10" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">50</tspan></text><text x="0" y="0" font-size="18" font-family="Arial" fill="#444" transform="matrix(0,-1,1,0,22.5,179.5)" ><tspan x="" dy="4.5">Y</tspan></text><path d="M 63.00 336.00 226.50 10.00" fill="none" stroke="rgb(0, 0, 0)" stroke-width="6" stroke-opacity="0.05" z-index="0" transform="matrix(1,0,0,1,1,1)" /><path d="M 63.00 336.00 226.50 10.00" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-opacity="0.1" z-index="0" transform="matrix(1,0,0,1,1,1)" /><path d="M 63.00 336.00 226.50 10.00" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-opacity="0.15" z-index="0" transform="matrix(1,0,0,1,1,1)" /><path d="M 63.00 336.00 226.50 10.00" fill="none" stroke="#115fa6" fill-opacity="1" stroke-width="0.5" z-index="3000" transform="matrix(1,0,0,1,0,0)" /><circle cx="0" cy="0" r="3" fill="#115fa6" stroke="#555" transform="matrix(1,0,0,1,63,336)"  /><circle cx="0" cy="0" r="3" fill="#115fa6" stroke="#555" transform="matrix(1,0,0,1,226.5,10)"  /></svg>

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Xml" %>
   
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
  
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Chart1.GetStore().Data = new object[]
            {
                new 
                {
                    x = 0,
                    y = 0  
                },
                new 
                {
                    x = 50,
                    y = 50  
                },
                new 
                {
                    x = 100
                }
            };
        }
    }
     
    [DirectMethod]
    public void SaveSvg(string svg)
    {
        var encodedSvg = Server.HtmlDecode(svg);
        XmlDocument xd = new XmlDocument();
        xd.XmlResolver = null;
        xd.LoadXml(encodedSvg);
        var svgGraph = Svg.SvgDocument.Open(xd);
 
        svgGraph.Draw().Save(@"c:\\test.png", System.Drawing.Imaging.ImageFormat.Png);
    }
</script>
  
<!DOCTYPE html>
  
<html>
<head id="Head1" runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
 
    <ext:Button ID="Button1" runat="server" Text="Save SVG" Handler="
        var svg = Ext.htmlEncode(Ext.draw.engine.SvgExporter.generate(#{Chart1}.surface));
        #{DirectMethods}.SaveSvg(svg);
        "></ext:Button>
  
    <ext:Chart
        ID="Chart1"
        runat="server"
        Width="400"
        Height="400">
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Model>
                    <ext:Model ID="Model1" runat="server">
                        <Fields>
                            <ext:ModelField Name="x" />
                            <ext:ModelField Name="y" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <Axes>
            <ext:NumericAxis Title="X" Fields="x" Position="Bottom" />
            <ext:NumericAxis Title="Y" Fields="y" Position="Left" />
        </Axes>
        <Series>
            <ext:LineSeries Titles="Chart" XField="x" YField="y" />
        </Series>
    </ext:Chart>
</body>
</html>

[Baidaly]

It seems I used the wrong version of their DLL.

I could reproduce it. To solve it you can the following approach. However, it is better to report directly to the authors of this DLL:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Xml" %>
<%@ Import Namespace="Svg" %>
    
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
   
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Chart1.GetStore().Data = new object[]
            {
                new 
                {
                    x = 0,
                    y = 0  
                },
                new 
                {
                    x = 50,
                    y = 50  
                },
                new 
                {
                    x = 100
                }
            };
        }
    }
      
    [DirectMethod]
    public void SaveSvg(string svg)
    {
        var encodedSvg = Server.HtmlDecode(svg);
        XmlDocument xd = new XmlDocument();
        xd.XmlResolver = null;
        xd.LoadXml(encodedSvg);
        var svgGraph = Svg.SvgDocument.Open(xd);
        
        foreach(var child in svgGraph.Children)
        {
            SetFont(child);
        }
  
        svgGraph.Draw().Save(@"c:\\test.png", System.Drawing.Imaging.ImageFormat.Png);
    }
    
    public void SetFont(SvgElement element)
    {
        foreach(var child in element.Children)
        {
            SetFont(child); //Call this function again with the child, this will loop
                            //until the element has no more children
        }

        try
        {
            if (element is SvgText)
            {
                var svgText = (SvgText)element; //try to cast the element as a SvgText
                //if it succeeds you can modify the font

                svgText.FontFamily = "Arial";
            }
        }
        catch
        {

        }
    }
</script>
   
<!DOCTYPE html>
   
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <ext:ResourceManager runat="server" />
  
    <ext:Button runat="server" Text="Save SVG" Handler="
        var svg = Ext.htmlEncode(Ext.draw.engine.SvgExporter.generate(#{Chart1}.surface));
        #{DirectMethods}.SaveSvg(svg);
        "></ext:Button>
   
    <ext:Chart
        ID="Chart1"
        runat="server"
        Width="400"
        Height="400">
        <Store>
            <ext:Store runat="server">
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="x" />
                            <ext:ModelField Name="y" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <Axes>
            <ext:NumericAxis Title="X" Fields="x" Position="Bottom" />
            <ext:NumericAxis Title="Y" Fields="y" Position="Left" />
        </Axes>
        <Series>
            <ext:LineSeries Titles="Chart" XField="x" YField="y" />
        </Series>
    </ext:Chart>
</body>
</html>

[cwolcott]

I agree that I should communicate directly with the author, but I thought based on the previous thread your code was working against SVG.Master 1.0.2.

What DLL were you using? Thanks for all of your help.

Your changes look good so far. I will test this tomorrow against my production code and graph and get back to you and the success/failure.

[Baidaly]

I didn't rebuild the solution and took DLL from their samples. Obviously, it was an old DLL.

[cwolcott]

Please don't close the thread yet.

Alright, here is a comparision of a screen capture of the chart and the conversion via SVG to a PNG.



Everything looks great except for the background color difference. Does anyone else see this?

I have posted this on the author of vvvv/SVG issue tracker https://github.com/vvvv/SVG/issues/8

[cwolcott]

Related to the background not being displayed properly it was suggested to add the following to the beginning the the svg string.

<rect width="100%" height="100%" fill="white" />

I look at the SVG string produced from our javascript code:

var svg = Ext.htmlEncode(Ext.draw.engine.SvgExporter.generate(#{Chart1}.surface));

and it produces:

<rect width="100%" height="100%" fill="#fff" fill-opacity="0" stroke="none" />

If I remove the fill-opacity="0" stroke="none" a box is drawn based on the fill color, but it is a small square in the upper left corner.

[Baidaly]

Please, provide SVG of your case. Also, you can use this service to compare with results of SVG.dll : http://www.fileformat.info/convert/image/svg2raster.htm

[cwolcott]

Daniil/Baidaly,

Not really looking for anyone to do anything, just trying to get my thoughts down on paper. Ha! Ha!

The following javascript line of code:

var svg = Ext.htmlEncode(Ext.draw.engine.SvgExporter.generate(#{Chart1}.surface));

produces the following SVG text:

<?xml version="1.0" standalone="yes"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="400px" height="400px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><defs></defs><rect width="100%" height="100%" fill="#fff" fill-opacity="0" stroke="none" /><path d="M 63 336.5 l 327 0 M 63.5 336 l 0 7 M 95.5 336 l 0 7 M 128.5 336 l 0 7 M 161.5 336 l 0 7 M 193.5 336 l 0 7 M 226.5 336 l 0 7 M 259.5 336 l 0 7 M 291.5 336 l 0 7 M 324.5 336 l 0 7 M 357.5 336 l 0 7 M 390.5 336 l 0 7" fill="none" stroke="#444" stroke-width="1" z-index="0" transform="matrix(1,0,0,1,0,0)" /><text x="59" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="59" dy="3">0</tspan></text><text x="88" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="88" dy="3">10</tspan></text><text x="121" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="121" dy="3">20</tspan></text><text x="154" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="154" dy="3">30</tspan></text><text x="186" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="186" dy="3">40</tspan></text><text x="219" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="219" dy="3">50</tspan></text><text x="252" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="252" dy="3">60</tspan></text><text x="284" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="284" dy="3">70</tspan></text><text x="317" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="317" dy="3">80</tspan></text><text x="350" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="350" dy="3">90</tspan></text><text x="379" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="379" dy="3">100</tspan></text><text x="0" y="0" font-size="18" font-family="Arial" fill="#444" transform="matrix(1,0,0,1,220.5,383.8)" ><tspan x="" dy="4.5">X</tspan></text><path d="M 63.5 336 l 0 -326 M 63 336.5 l -6 0 M 63 303.5 l -6 0 M 63 270.5 l -6 0 M 63 238.5 l -6 0 M 63 205.5 l -6 0 M 63 173.5 l -6 0 M 63 140.5 l -6 0 M 63 107.5 l -6 0 M 63 75.5 l -6 0 M 63 42.5 l -6 0 M 63 10.5 l -6 0" fill="none" stroke="#444" stroke-width="1" z-index="0" transform="matrix(1,0,0,1,0,0)" /><text x="46" y="336" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="46" dy="3">0</tspan></text><text x="46" y="303" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="46" dy="3">5</tspan></text><text x="39" y="270" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">10</tspan></text><text x="39" y="238" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">15</tspan></text><text x="39" y="205" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">20</tspan></text><text x="39" y="173" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">25</tspan></text><text x="39" y="140" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">30</tspan></text><text x="39" y="107" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">35</tspan></text><text x="39" y="75" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">40</tspan></text><text x="39" y="42" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">45</tspan></text><text x="39" y="10" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">50</tspan></text><text x="0" y="0" font-size="18" font-family="Arial" fill="#444" transform="matrix(0,-1,1,0,22.5,179.5)" ><tspan x="" dy="4.5">Y</tspan></text><path d="M 63.00 336.00 226.50 10.00" fill="none" stroke="rgb(0, 0, 0)" stroke-width="6" stroke-opacity="0.05" z-index="0" transform="matrix(1,0,0,1,1,1)" /><path d="M 63.00 336.00 226.50 10.00" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-opacity="0.1" z-index="0" transform="matrix(1,0,0,1,1,1)" /><path d="M 63.00 336.00 226.50 10.00" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-opacity="0.15" z-index="0" transform="matrix(1,0,0,1,1,1)" /><path d="M 63.00 336.00 226.50 10.00" fill="none" stroke="#115fa6" fill-opacity="1" stroke-width="0.5" z-index="3000" transform="matrix(1,0,0,1,0,0)" /><circle cx="0" cy="0" r="3" fill="#115fa6" stroke="#555" transform="matrix(1,0,0,1,63,336)"  /><circle cx="0" cy="0" r="3" fill="#115fa6" stroke="#555" transform="matrix(1,0,0,1,226.5,10)"  /></svg>

Within the SVG text is the following definition:

<rect width="100%" height="100%" fill="#fff" fill-opacity="0" stroke="none" />

It seems that no matter what my charts StyleSpec is the fill is always #fff:

StyleSpec="background: yellow;"

I also do not understand the other attributes fill-opacity="0" stroke="none".

If I submit the SVG text to http://www.fileformat.info/convert/image/svg2raster.htm with a 400x400 (WxH), it looks like it displays properly. But if I manually modify the rectangle definition and change the fill="#fff" to fill="yellow" the background stays white. If I further remove fill-opacity="0" stroke="none" then I do get a back ground of yellow.



If I call the SVG.dll and put a breakpoint to manually change the SVG text so the rectangle definition looks like:

<rect width="100%" height="100%" fill="yellow" />

The following image is shown.


Any thoughts ...