以编程方式将svg转换为图像 [英] convert svg to image programmatically

查看：94
本文介绍了以编程方式将svg转换为图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试将svg转换为图像 我一直在研究几种工具，但仍然无法实现:(

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呈现引擎 但由于它没有文档，所以我遇到了麻烦

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

这是我的代码:

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

或者这个:

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

都不行！

我得到了错误:

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:

问题似乎是svgDocument为空！

The problem seems that svgDocument is null!


2. Inkscape

2. Inkscape

我的代码:

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

但是什么也没发生！我认为我缺少一些保存图像而不是RewritePath()

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


如果您有更好的解决方案，请向我发布示例，感谢使用

这是我的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>

推荐答案

我在此处对您的代码进行了一些更改: 我认为您使用过InkScape的路径有问题

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 + "\" + pngFileName

PngRelativeDirectory中已经有一个"\"，因此路径以c:\\ sample.png

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

我也将Context.RewritePath更改为Response.Redirect-我在浏览器的浏览器中得到了饼图.

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

这篇关于以编程方式将svg转换为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆