1

I realise this is a very specific question but I have limited knowledge of both SVG and telerik so here it goes.

I am trying to convert a RadHtmlChart to an image in an C#. First to get the svg of the chart I use a built in telerik function.

var chartRendering = $find("<%=BarChart.ClientID %>").getSVGString();

Once I have that string on the server I attempt to convert it to a Memory stream representing the image. To do this I am using https://github.com/vvvv/SVG

   XmlDocument xml = new XmlDocument();
   xml.LoadXml(svgText);
   SvgDocument svg = SvgDocument.Open(xml);

    // Convert SVG document containing image to Stream
   MemoryStream imageStream = new MemoryStream();
   svg.Draw().Save(imageStream, ImageFormat.Png);

The last line is where the code breaks and gives the error :ColorBlend object that was set is not valid. Position's last element must be equal to 1.0. ColorBlend objects must be constructed with the same number of positions and color values. Positions must be between 0.0 and 1.0, 1.0 indicating the last element in the array.

The strange thing is that this only happens on some charts and not others. I have noticed that on one particular chart that if the chart as 10 or more x values then it is fine. But if there are less than 10 values then it breaks. I have also tried doing the same thing using temperorary files to store the svg and the image to the same result.

I have run out of ideas so does anybody have a suggestion? Perhaps another way to get from svg to an image in c#. I've had a look at inkscape but I can't use it as it requires to be installed as an .exe on the server.

EDIT: I found possible solution using javascript. Won't work for me as it uses the canvas element which is HTML5 and I need this to work in IE8 but in case anybody else stumbles across this. Convert SVG to image (JPEG, PNG, etc.) in the browser.

SOLUTION: I've decided to implement the javascript method shown above for all browsers that support HTML5 and the inkscape method for IE8.

Community
  • 1
  • 1
IanSoc
  • 238
  • 1
  • 3
  • 14
  • Perhaps you can give PhantomJS a try, it can run a browser on the server, render the graph and give you the image. – rdmptn Aug 19 '14 at 13:49
  • @rdmptn Wow this looks really cool thanks. Will have a proper look at it when I have time but if it works the way I think it will from reading their site then that should work! – IanSoc Aug 19 '14 at 15:02

1 Answers1

2

I just stumbled over the same problem. First I tried to update to the most recent code from the trunk of that project but that did not fix the issue.

The problem lies inside the file SVGProject/Painting/SvgGradientServer.cs in the function protected ColorBlend GetColorBlend(ISvgRenderer renderer, float opacity, bool radial)

The function produces a ColorBlend object where the last element of the Positions array is sometimes not 1.0 but for example 1.00000012 or 0.99999994. This causes an exception in SVGProject/Painting/SvgGradientServer.cs GetBrush in the following line:

InterpolationColors = CalculateColorBlend(renderer, opacity, points[0], effectiveStart, points[1], effectiveEnd),

The Problem is probably a rounding error with float values. I have not analysed it further but just added a check that fixes the last element of the Positions array. This worked for me.

fotten
  • 46
  • 1
  • 8