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);