convert svg to image programmatically

Question

I'm trying to convert my svg to an image I've been looking into several tools and still can't make this happen :(

1. SVG rendering engine but I'm having trouble with it since it has no documentation

this is my code:

 using (FileStream fileStream = File.OpenRead(@"C:\sample.svg"))
        {
            MemoryStream memoryStream = new MemoryStream();
            memoryStream.SetLength(fileStream.Length);
            fileStream.Read(memoryStream.GetBuffer(), 0, (int)fileStream.Length);
            SvgDocument svgDocument = SvgDocument.Open(memoryStream);
            string imagePath = "local.jpg";
            svgDocument.Draw().Save(imagePath);
        }

or this:

        var sampleDoc = SvgDocument.Open(@"C:\sample.svg");
        sampleDoc.Draw().Save(@"C:\sample.png");

neither works!

I get the error:

Object reference not set to an instance of an object.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Source Error: 


Line 363:                SvgDocument svgDocument = SvgDocument.Open(memoryStream);
Line 364:                string imagePath = "local.jpg";
Line 365:                svgDocument.Draw().Save(imagePath);
Line 366:            }
Line 367:  

The problem seems that svgDocument is null!

2. Inkscape

my code:

 string svgFileName = HttpContext.Current.Server.MapPath("sample.svg");
        string PngRelativeDirectory = HttpContext.Current.Server.MapPath("~/");
        string pngName = "svgpieresult.png";
        string pngFileName = HttpContext.Current.Server.MapPath("pngName);


        // ignored assume sample.svg is in the web app directory
        //using (StreamWriter writer = new StreamWriter(svgFileName, false))
        //{
        //    writer.Write(svgXml);
        //}


        string inkscapeArgs = string.Format(@"-f ""{0}"" -e ""{1}""", svgFileName, pngFileName);

        Process inkscape = Process.Start(
          new ProcessStartInfo("C:\\Program Files\\inkscape\\inkscape.exe", inkscapeArgs));

        inkscape.WaitForExit(3000);
        //Context.RewritePath(pngName);
        context.Response.Redirect(PngRelativeDirectory + pngName); 

but nothing happen!! i think im missing something to save the image instead of RewritePath()

if u have a better solution for me plz post it with an example on how to use it,thanks

this is my svg:

<?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="598px" height="346px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">

<defs><linearGradient x1="0" y1="0" x2="1" y2="0.9999999999999998" id="theme-94ae0a-6b7e07"><stop offset="0%" stop-color="#94ae0a" stop-opacity="1"></stop><stop offset="100%" stop-color="#6b7e07" stop-opacity="1"></stop></linearGradient><linearGradient x1="0" y1="0" x2="1" y2="0.9999999999999998" id="theme-115fa6-0c4578"><stop offset="0%" stop-color="#115fa6" stop-opacity="1"></stop><stop offset="100%" stop-color="#0c4578" stop-opacity="1"></stop></linearGradient><linearGradient x1="0" y1="0" x2="1" y2="0.9999999999999998" id="theme-a61120-780c17"><stop offset="0%" stop-color="#a61120" stop-opacity="1"></stop><stop offset="100%" stop-color="#780c17" stop-opacity="1"></stop></linearGradient><linearGradient x1="0" y1="0" x2="1" y2="0.9999999999999998" id="theme-ff8809-d56e00"><stop offset="0%" stop-color="#ff8809" stop-opacity="1"></stop><stop offset="100%" stop-color="#d56e00" stop-opacity="1"></stop></linearGradient><linearGradient x1="0" y1="0" x2="1" y2="0.9999999999999998" id="theme-ffd13e-ffc50b"><stop offset="0%" stop-color="#ffd13e" stop-opacity="1"></stop><stop offset="100%" stop-color="#ffc50b" stop-opacity="1"></stop></linearGradient><linearGradient x1="0" y1="0" x2="1" y2="0.9999999999999998" id="theme-a61187-780c61"><stop offset="0%" stop-color="#a61187" stop-opacity="1"></stop><stop offset="100%" stop-color="#780c61" stop-opacity="1"></stop></linearGradient><linearGradient x1="0" y1="0" x2="1" y2="0.9999999999999998" id="theme-24ad9a-1b8374"><stop offset="0%" stop-color="#24ad9a" stop-opacity="1"></stop><stop offset="100%" stop-color="#1b8374" stop-opacity="1"></stop></linearGradient><linearGradient x1="0" y1="0" x2="1" y2="0.9999999999999998" id="theme-7c7474-625b5b"><stop offset="0%" stop-color="#7c7474" stop-opacity="1"></stop><stop offset="100%" stop-color="#625b5b" stop-opacity="1"></stop></linearGradient><linearGradient x1="0" y1="0" x2="1" y2="0.9999999999999998" id="theme-a66111-78460c"><stop offset="0%" stop-color="#a66111" stop-opacity="1"></stop><stop offset="100%" stop-color="#78460c" stop-opacity="1"></stop></linearGradient></defs><rect width="100%" height="100%" fill="#fff" fill-opacity="0" stroke="none" /><path d="M 230 173L 272.3305450559981 68.22822443395302A 113 113 0 0 1 343 173L 343 173A 113 113 0 0 1 272.3305450559981 277.771775566047L 272.3305450559981 277.771775566047L 230 173Z" fill="none" stroke="rgb(200, 200, 200)" stroke-width="6" stroke-opacity="1" transform="matrix(1,0,0,1,1,2)" /><path d="M 230 173L 272.3305450559981 68.22822443395302A 113 113 0 0 1 343 173L 343 173A 113 113 0 0 1 272.3305450559981 277.771775566047L 272.3305450559981 277.771775566047L 230 173Z" fill="none" stroke="rgb(150, 150, 150)" stroke-width="4" stroke-opacity="1" transform="matrix(1,0,0,1,0,1)" /><path d="M 230 173L 272.3305450559981 68.22822443395302A 113 113 0 0 1 343 173L 343 173A 113 113 0 0 1 272.3305450559981 277.771775566047L 272.3305450559981 277.771775566047L 230 173Z" fill="none" stroke="rgb(100, 100, 100)" stroke-width="2" stroke-opacity="1" transform="matrix(1,0,0,1,0,1)" /><path d="M 230 173L 210.37775592363687 61.7167239096205A 113 113 0 0 1 241.81171634924485 60.619025823385115L 241.81171634924485 60.619025823385115A 113 113 0 0 1 272.3305450559981 68.22822443395302L 272.3305450559981 68.22822443395302L 230 173Z" fill="none" stroke="rgb(200, 200, 200)" stroke-width="6" stroke-opacity="1" transform="matrix(1,0,0,1,1,2)" /><path d="M 230 173L 210.37775592363687 61.7167239096205A 113 113 0 0 1 241.81171634924485 60.619025823385115L 241.81171634924485 60.619025823385115A 113 113 0 0 1 272.3305450559981 68.22822443395302L 272.3305450559981 68.22822443395302L 230 173Z" fill="none" stroke="rgb(150, 150, 150)" stroke-width="4" stroke-opacity="1" transform="matrix(1,0,0,1,0,1)" /><path d="M 230 173L 210.37775592363687 61.7167239096205A 113 113 0 0 1 241.81171634924485 60.619025823385115L 241.81171634924485 60.619025823385115A 113 113 0 0 1 272.3305450559981 68.22822443395302L 272.3305450559981 68.22822443395302L 230 173Z" fill="none" stroke="rgb(100, 100, 100)" stroke-width="2" stroke-opacity="1" transform="matrix(1,0,0,1,0,1)" /><path d="M 230 173L 120.3565829308124 200.33717420276244A 113 113 0 0 1 135.23022582216709 111.4557890433019L 135.23022582216709 111.4557890433019A 113 113 0 0 1 210.37775592363687 61.7167239096205L 210.37775592363687 61.7167239096205L 230 173Z" fill="none" stroke="rgb(200, 200, 200)" stroke-width="6" stroke-opacity="1" transform="matrix(1,0,0,1,1,2)" /><path d="M 230 173L 120.3565829308124 200.33717420276244A 113 113 0 0 1 135.23022582216709 111.4557890433019L 135.23022582216709 111.4557890433019A 113 113 0 0 1 210.37775592363687 61.7167239096205L 210.37775592363687 61.7167239096205L 230 173Z" fill="none" stroke="rgb(150, 150, 150)" stroke-width="4" stroke-opacity="1" transform="matrix(1,0,0,1,0,1)" /><path d="M 230 173L 120.3565829308124 200.33717420276244A 113 113 0 0 1 135.23022582216709 111.4557890433019L 135.23022582216709 111.4557890433019A 113 113 0 0 1 210.37775592363687 61.7167239096205L 210.37775592363687 61.7167239096205L 230 173Z" fill="none" stroke="rgb(100, 100, 100)" stroke-width="2" stroke-opacity="1" transform="matrix(1,0,0,1,0,1)" /><path d="M 230 173L 151.5036041381333 254.28539743826758A 113 113 0 0 1 132.13912937235844 229.5L 132.13912937235844 229.5A 113 113 0 0 1 120.3565829308124 200.33717420276244L 120.3565829308124 200.33717420276244L 230 173Z" fill="none" stroke="rgb(200, 200, 200)" stroke-width="6" stroke-opacity="1" transform="matrix(1,0,0,1,1,2)" /><path d="M 230 173L 151.5036041381333 254.28539743826758A 113 113 0 0 1 132.13912937235844 229.5L 132.13912937235844 229.5A 113 113 0 0 1 120.3565829308124 200.33717420276244L 120.3565829308124 200.33717420276244L 230 173Z" fill="none" stroke="rgb(150, 150, 150)" stroke-width="4" stroke-opacity="1" transform="matrix(1,0,0,1,0,1)" /><path d="M 230 173L 151.5036041381333 254.28539743826758A 113 113 0 0 1 132.13912937235844 229.5L 132.13912937235844 229.5A 113 113 0 0 1 120.3565829308124 200.33717420276244L 120.3565829308124 200.33717420276244L 230 173Z" fill="none" stroke="rgb(100, 100, 100)" stroke-width="2" stroke-opacity="1" transform="matrix(1,0,0,1,0,1)" /><path d="M 230 173L 208.43858352245047 283.92387172958604A 113 113 0 0 1 177.8224067044411 273.23222414913903L 177.8224067044411 273.23222414913903A 113 113 0 0 1 151.5036041381333 254.28539743826758L 151.5036041381333 254.28539743826758L 230 173Z" fill="none" stroke="rgb(200, 200, 200)" stroke-width="6" stroke-opacity="1" transform="matrix(1,0,0,1,1,2)" /><path d="M 230 173L 208.43858352245047 283.92387172958604A 113 113 0 0 1 177.8224067044411 273.23222414913903L 177.8224067044411 273.23222414913903A 113 113 0 0 1 151.5036041381333 254.28539743826758L 151.5036041381333 254.28539743826758L 230 173Z" fill="none" stroke="rgb(150, 150, 150)" stroke-width="4" stroke-opacity="1" transform="matrix(1,0,0,1,0,1)" /><path d="M 230 173L 208.43858352245047 283.92387172958604A 113 113 0 0 1 177.8224067044411 273.23222414913903L 177.8224067044411 273.23222414913903A 113 113 0 0 1 151.5036041381333 254.28539743826758L 151.5036041381333 254.28539743826758L 230 173Z" fill="none" stroke="rgb(100, 100, 100)" stroke-width="2" stroke-opacity="1" transform="matrix(1,0,0,1,0,1)" /><path d="M 230 173L 270.49557829861897 278.4945881941838A 113 113 0 0 1 239.84859893048534 285.57000088436723L 239.84859893048534 285.57000088436723A 113 113 0 0 1 208.43858352245047 283.92387172958604L 208.43858352245047 283.92387172958604L 230 173Z" fill="none" stroke="rgb(200, 200, 200)" stroke-width="6" stroke-opacity="1" transform="matrix(1,0,0,1,1,2)" /><path d="M 230 173L 270.49557829861897 278.4945881941838A 113 113 0 0 1 239.84859893048534 285.57000088436723L 239.84859893048534 285.57000088436723A 113 113 0 0 1 208.43858352245047 283.92387172958604L 208.43858352245047 283.92387172958604L 230 173Z" fill="none" stroke="rgb(150, 150, 150)" stroke-width="4" stroke-opacity="1" transform="matrix(1,0,0,1,0,1)" /><path d="M 230 173L 270.49557829861897 278.4945881941838A 113 113 0 0 1 239.84859893048534 285.57000088436723L 239.84859893048534 285.57000088436723A 113 113 0 0 1 208.43858352245047 283.92387172958604L 208.43858352245047 283.92387172958604L 230 173Z" fill="none" stroke="rgb(100, 100, 100)" stroke-width="2" stroke-opacity="1" transform="matrix(1,0,0,1,0,1)" /><path d="M 230 173L 272.3305450559981 68.22822443395302A 113 113 0 0 1 343 173L 343 173A 113 113 0 0 1 272.3305450559981 277.771775566047L 272.3305450559981 277.771775566047L 230 173Z" fill="url(#theme-94ae0a-6b7e07)" stroke-width="0px" transform="matrix(1,0,0,1,0,0)" /><path d="M 230 173L 210.37775592363687 61.7167239096205A 113 113 0 0 1 241.81171634924485 60.619025823385115L 241.81171634924485 60.619025823385115A 113 113 0 0 1 272.3305450559981 68.22822443395302L 272.3305450559981 68.22822443395302L 230 173Z" fill="url(#theme-115fa6-0c4578)" stroke-width="0px" transform="matrix(1,0,0,1,0,0)" /><path d="M 230 173L 120.3565829308124 200.33717420276244A 113 113 0 0 1 135.23022582216709 111.4557890433019L 135.23022582216709 111.4557890433019A 113 113 0 0 1 210.37775592363687 61.7167239096205L 210.37775592363687 61.7167239096205L 230 173Z" fill="url(#theme-a61120-780c17)" stroke-width="0px" transform="matrix(1,0,0,1,0,0)" /><path d="M 230 173L 151.5036041381333 254.28539743826758A 113 113 0 0 1 132.13912937235844 229.5L 132.13912937235844 229.5A 113 113 0 0 1 120.3565829308124 200.33717420276244L 120.3565829308124 200.33717420276244L 230 173Z" fill="url(#theme-ff8809-d56e00)" stroke-width="0px" transform="matrix(1,0,0,1,0,0)" /><path d="M 230 173L 208.43858352245047 283.92387172958604A 113 113 0 0 1 177.8224067044411 273.23222414913903L 177.8224067044411 273.23222414913903A 113 113 0 0 1 151.5036041381333 254.28539743826758L 151.5036041381333 254.28539743826758L 230 173Z" fill="url(#theme-ffd13e-ffc50b)" stroke-width="0px" transform="matrix(1,0,0,1,0,0)" /><path d="M 230 173L 270.49557829861897 278.4945881941838A 113 113 0 0 1 239.84859893048534 285.57000088436723L 239.84859893048534 285.57000088436723A 113 113 0 0 1 208.43858352245047 283.92387172958604L 208.43858352245047 283.92387172958604L 230 173Z" fill="url(#theme-a61187-780c61)" stroke-width="0px" transform="matrix(1,0,0,1,0,0)" /><text x="286.5" y="173" font-size="18" font-family="Arial" text-anchor="middle" fill="#333333" transform="matrix(1,0,0,1,0,0)" ><tspan x="286.5" dy="4.5">January</tspan></text><text x="235.1665388416979" y="116.73671822229682" font-size="18" font-family="Arial" text-anchor="middle" fill="#cccccc" transform="matrix(0.0914,-0.9958,0.9958,0.0914,97.4145,340.2432)" ><tspan x="235.1665388416979" dy="4.5">February</tspan></text><text x="182.2358551905599" y="142.81993256099588" font-size="18" font-family="Arial" text-anchor="middle" fill="#cccccc" transform="matrix(0.8454,0.5342,-0.5342,0.8454,104.4655,-75.2608)" ><tspan x="182.2358551905599" dy="4.5">March</tspan></text><text x="181.4045806349622" y="201.8224776300739" font-size="18" font-family="Arial" text-anchor="middle" fill="#333333" transform="matrix(0.8601,-0.5101,0.5101,0.8601,-77.5769,120.7761)" ><tspan x="181.4045806349622" dy="4.5">April</tspan></text><text x="204.31408267270237" y="223.32378812306592" font-size="18" font-family="Arial" text-anchor="middle" fill="#333333" transform="matrix(0.4546,-0.8907,0.8907,0.4546,-87.4823,303.7766)" ><tspan x="204.31408267270237" dy="4.5">May</tspan></text><text x="235.16653884169793" y="229.26328177770318" font-size="18" font-family="Arial" text-anchor="middle" fill="#cccccc" transform="matrix(0.0914,0.9958,-0.9958,0.0914,441.9649,-25.8825)" ><tspan x="235.16653884169793" dy="4.5">June</tspan></text><rect x="459.5" y="85.5" width="78" height="173" fill="#FFF" stroke="#000" stroke-width="1" transform="matrix(1,0,0,1,0,0)" /><text x="485" y="102" font-size="12" font-family="Helvetica, sans-serif" fill="#000" transform="matrix(1,0,0,1,0,0)" ><tspan x="485" dy="3">January</tspan></text><rect x="0" y="0" width="12" height="12" fill="url(#theme-94ae0a-6b7e07)" transform="matrix(1,0,0,1,465,96)" /><text x="485" y="129" font-size="12" font-family="Helvetica, sans-serif" fill="#000" transform="matrix(1,0,0,1,0,0)" ><tspan x="485" dy="3">February</tspan></text><rect x="0" y="0" width="12" height="12" fill="url(#theme-115fa6-0c4578)" transform="matrix(1,0,0,1,465,123)" /><text x="485" y="156" font-size="12" font-family="Helvetica, sans-serif" fill="#000" transform="matrix(1,0,0,1,0,0)" ><tspan x="485" dy="3">March</tspan></text><rect x="0" y="0" width="12" height="12" fill="url(#theme-a61120-780c17)" transform="matrix(1,0,0,1,465,150)" /><text x="485" y="183" font-size="12" font-family="Helvetica, sans-serif" fill="#000" transform="matrix(1,0,0,1,0,0)" ><tspan x="485" dy="3">April</tspan></text><rect x="0" y="0" width="12" height="12" fill="url(#theme-ff8809-d56e00)" transform="matrix(1,0,0,1,465,177)" /><text x="485" y="210" font-size="12" font-family="Helvetica, sans-serif" fill="#000" transform="matrix(1,0,0,1,0,0)" ><tspan x="485" dy="3">May</tspan></text><rect x="0" y="0" width="12" height="12" fill="url(#theme-ffd13e-ffc50b)" transform="matrix(1,0,0,1,465,204)" /><text x="485" y="237" font-size="12" font-family="Helvetica, sans-serif" fill="#000" transform="matrix(1,0,0,1,0,0)" ><tspan x="485" dy="3">June</tspan></text><rect x="0" y="0" width="12" height="12" fill="url(#theme-a61187-780c61)" transform="matrix(1,0,0,1,465,231)" /><rect x="0" y="-9" width="63" height="21" fill="#f00" fill-opacity="0" transform="matrix(1,0,0,1,465,96)" /><rect x="0" y="-9" width="68" height="21" fill="#f00" fill-opacity="0" transform="matrix(1,0,0,1,465,123)" /><rect x="0" y="-9" width="53" height="21" fill="#f00" fill-opacity="0" transform="matrix(1,0,0,1,465,150)" /><rect x="0" y="-9" width="44" height="21" fill="#f00" fill-opacity="0" transform="matrix(1,0,0,1,465,177)" /><rect x="0" y="-9" width="41" height="21" fill="#f00" fill-opacity="0" transform="matrix(1,0,0,1,465,204)" /><rect x="0" y="-9" width="47" height="21" fill="#f00" fill-opacity="0" transform="matrix(1,0,0,1,465,231)" />

</svg>

Answer 1

I made a couple of changes to you code here: I think InkScape was having a problem with you paths, you'd used

PngRelativeDirectory + "\" + pngFileName

PngRelativeDirectory already had a "\" in it so the path was coming our as c:\\sample.png

Also i changed the Context.RewritePath to Response.Redirect - I get the pie chart rendered in the browser the browser.

string svgFileName = HttpContext.Current.Server.MapPath("sample.svg");
string PngRelativeDirectory = "C:\\";
string pngName = "svgpieresult.png";
string pngFileName = HttpContext.Current.Server.MapPath(pngName);


/* ignored assume sample.svg is in the web app directory
using (StreamWriter writer = new StreamWriter(svgFileName, false))
{
    writer.Write(svgXml);
}
 */

string inkscapeArgs = string.Format(@"-f ""{0}"" -e ""{1}""", svgFileName, pngFileName);

Process inkscape = Process.Start(
  new ProcessStartInfo( "C:\\Program Files\\inkscape\\inkscape.exe", inkscapeArgs));

inkscape.WaitForExit(3000);
//Context.RewritePath(pngName);
this.Response.Redirect(pngName);

Answer 2

Your SVG loads in Chrome and Renders.

I've downloaded your SVG and the DLL from CodePlex, and recreated your simple two line fail with your SVG in LinqPad4.

I get the same fail, but LinqPad4 shows the DLLs Trace output and it shows

...
LINQPad.exe Information: 0 : Begin CreateElement: rect
LINQPad.exe Information: 0 : Begin SetAttributes
LINQPad.exe Information: 0 : End SetAttributes
LINQPad.exe Information: 0 : End CreateElement
LINQPad.exe Information: 0 : End Read
loaded -- I added this to show the different method calls

LINQPad.exe Information: 0 : Begin Render
... 
StackTrace    at Svg.SvgUnit.ToDeviceValue(ISvgStylable styleOwner, Boolean vertical)
   at Svg.SvgRectangle.get_Path()
   at Svg.SvgGraphicsElement.Render(SvgRenderer renderer)
   at Svg.SvgRectangle.Render(SvgRenderer renderer)
   at Svg.SvgElement.RenderChildren(SvgRenderer renderer)
   at Svg.SvgElement.Render(SvgRenderer renderer)
   at Svg.SvgDocument.Draw()  
HelpLink null  

So something is going wrong when it tries to draw the first path.

You say there is no documentation, yet the Whole Source code including project files etc is there on CodePlex. You could download it and see if you can fix the issue in the Svg.SvgUnit.ToDeviceValue method...

...or just download ImageMagick and use the Process class to trigger the command line program Convert.exe