From URI to Image in .NET

Question

I've a URI like this one data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDI ..... on my web client and what I've to do, is to send that uri to an ASP.NET server and, always on server side, generate the corresponding png image.
Everything works fine if i set the uri to an img.src element of the page, but server side I can't find a way to save this stream inside a file.
How can I render SVG with C# (preferably ASP.Net)?

[EDIT]

Solution 1: Use an external .NET library which elaborate svg stream and save it to png file.
Solution 2: I moved the problem on the client; with this javascrpit code

function (svg_uri) {
            var image = new Image();
            image.src = svg_uri;
            image.onload = function () {
                var canvas = document.createElement('canvas');
                canvas.width = image.width;
                canvas.height = image.height;
                var context = canvas.getContext('2d');
                context.drawImage(image, 0, 0);    
                return canvas.toDataURL('image/png');                    
            }

I can get the new URI with the png content; so when I receive it on the server what I need to do is save it with the following code:

var bytes = Convert.FromBase64String(base64string.Replace("data:image/png;base64,",""));
using (var img = new FileStream(filePath, FileMode.Create))
{
    img.Write(bytes ,0, bytes.Length);
    img.Flush();
}

Answer 1

Just remove the beginning portion of the string "data:image/svg+xml;base64," everything after the comma is the actual base64 image, and you can save that image in .NET like this:

var bytes = Convert.FromBase64String(base64string);
using (var img = new FileStream(filePath, FileMode.Create))
{
    img.Write(bytes ,0, bytes.Length);
    img.Flush();
}

To help further clarify:

    class Program
    {
        static void Main(string[] args)
        {
            string b64 = "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iNS4wIC0xMC4wIDEwMC4wIDEzNS4wIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIiBoZWlnaHQ9IjEwMHB4IiB3aWR0aD0iMTAwcHgiPgo8cGF0aCBpZD0icGF0aDE5ODNfM18iIGQ9Ik01MC4xLDQuOXY3LjRjMCwwLDAsMC0wLjIsMGMtMC4xLDAtMC40LDAuMi0wLjQsMC40YzAsMC4yLDAsNS4xLDAsNS4zYzAsMC4yLTAuMiwwLjItMC4yLDAuNCAgYzAsMC4yLDAsNC42LDAsNC44cy0wLjIsMC4yLTAuMiwwLjRjMCwwLjIsMCwxLjcsMCwxLjdsLTEuMywzLjZjMCwwLTAuNSwwLTAuNywwYy0wLjIsMC0wLjQsMC4yLTAuNCwwLjRjMCwwLjIsMCwwLjksMCwwLjkgIHMtMC40LDAtMC41LDBzLTAuNCwwLjItMC40LDAuNGMwLDAuMiwwLDUuMSwwLDUuMXMtMC40LDAtMC41LDBjLTAuMiwwLTAuNCwwLjItMC40LDAuNGMwLDAuMiwwLDYsMCw2LjJjMCwwLjMtMC42LDAuNC0wLjYsMC42ICBjMCwwLjIsMCwzMCwwLDMwcy0wLjcsMC0wLjksMGMtMC4yLDAtMC40LDAuMi0wLjQsMC40YzAsMC4yLDAsNi42LDAsNi42cy0xLjgsMC0yLDBjLTAuMiwwLTAuNCwwLjItMC40LDAuNGMwLDAuMiwwLDkuOSwwLDkuOSAgcy0yLjYsMC0yLjgsMHMtMC40LDAuMi0wLjQsMC40YzAsMC4yLDAsNC41LDAsNC41aDI1LjljMCwwLDAtNC4zLDAtNC41YzAtMC4yLTAuMi0wLjQtMC40LTAuNGMtMC4yLDAtMi44LDAtMi44LDBzMC05LjcsMC05LjkgIGMwLTAuMi0wLjItMC40LTAuNC0wLjRjLTAuMiwwLTIsMC0yLDBzMC02LjQsMC02LjZjMC0wLjItMC4yLTAuNC0wLjQtMC40Yy0wLjIsMC0wLjksMC0wLjksMHMwLTI5LjgsMC0zMGMwLTAuMi0wLjYtMC4zLTAuNi0wLjYgIGMwLTAuMywwLTYuMSwwLTYuMmMwLTAuMi0wLjItMC40LTAuNC0wLjRjLTAuMiwwLTAuNSwwLTAuNSwwczAtNSwwLTUuMWMwLTAuMi0wLjItMC40LTAuNC0wLjRjLTAuMiwwLTAuNiwwLTAuNiwwczAtMC43LDAtMC45ICBjMC0wLjItMC4yLTAuNC0wLjQtMC40Yy0wLjIsMC0wLjcsMC0wLjcsMGwtMS4zLTMuNmMwLDAsMC0xLjUsMC0xLjdjMC0wLjItMC4yLTAuMi0wLjItMC40czAtNC42LDAtNC44YzAtMC4yLTAuMi0wLjItMC4yLTAuNCAgYzAtMC4yLDAtNS4xLDAtNS4zYzAtMC4yLTAuMi0wLjQtMC40LTAuNHMtMC4yLDAtMC4yLDBWNC45aC0wLjRoLTAuMUg1MC4xeiIvPgo8dGV4dCB4PSIwLjAiIHk9IjExNy41IiBmb250LXNpemU9IjUuMCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EgTmV1ZSwgSGVsdmV0aWNhLCBBcmlhbC1Vbmljb2RlLCBBcmlhbCwgU2Fucy1zZXJpZiIgZmlsbD0iIzAwMDAwMCI+Q3JlYXRlZCBieSBMYXphciBOaWtvbGljPC90ZXh0Pjx0ZXh0IHg9IjAuMCIgeT0iMTIyLjUiIGZvbnQtc2l6ZT0iNS4wIiBmb250LXdlaWdodD0iYm9sZCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSBOZXVlLCBIZWx2ZXRpY2EsIEFyaWFsLVVuaWNvZGUsIEFyaWFsLCBTYW5zLXNlcmlmIiBmaWxsPSIjMDAwMDAwIj5mcm9tIHRoZSBOb3VuIFByb2plY3Q8L3RleHQ+PC9zdmc+";
            ImageFromBase64(b64);
        }

        public static  void ImageFromBase64(string base64Img)
        {
            var bytes = Convert.FromBase64String(base64Img);
            using (var img = new FileStream(@"result.svg", FileMode.Create))
            {
                img.Write(bytes, 0, bytes.Length);
                img.Flush();
            }
        }
    }

and the resulting result.svg:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="5.0 -10.0 100.0 135.0" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px">
<path id="path1983_3_" d="M50.1,4.9v7.4c0,0,0,0-0.2,0c-0.1,0-0.4,0.2-0.4,0.4c0,0.2,0,5.1,0,5.3c0,0.2-0.2,0.2-0.2,0.4  c0,0.2,0,4.6,0,4.8s-0.2,0.2-0.2,0.4c0,0.2,0,1.7,0,1.7l-1.3,3.6c0,0-0.5,0-0.7,0c-0.2,0-0.4,0.2-0.4,0.4c0,0.2,0,0.9,0,0.9  s-0.4,0-0.5,0s-0.4,0.2-0.4,0.4c0,0.2,0,5.1,0,5.1s-0.4,0-0.5,0c-0.2,0-0.4,0.2-0.4,0.4c0,0.2,0,6,0,6.2c0,0.3-0.6,0.4-0.6,0.6  c0,0.2,0,30,0,30s-0.7,0-0.9,0c-0.2,0-0.4,0.2-0.4,0.4c0,0.2,0,6.6,0,6.6s-1.8,0-2,0c-0.2,0-0.4,0.2-0.4,0.4c0,0.2,0,9.9,0,9.9  s-2.6,0-2.8,0s-0.4,0.2-0.4,0.4c0,0.2,0,4.5,0,4.5h25.9c0,0,0-4.3,0-4.5c0-0.2-0.2-0.4-0.4-0.4c-0.2,0-2.8,0-2.8,0s0-9.7,0-9.9  c0-0.2-0.2-0.4-0.4-0.4c-0.2,0-2,0-2,0s0-6.4,0-6.6c0-0.2-0.2-0.4-0.4-0.4c-0.2,0-0.9,0-0.9,0s0-29.8,0-30c0-0.2-0.6-0.3-0.6-0.6  c0-0.3,0-6.1,0-6.2c0-0.2-0.2-0.4-0.4-0.4c-0.2,0-0.5,0-0.5,0s0-5,0-5.1c0-0.2-0.2-0.4-0.4-0.4c-0.2,0-0.6,0-0.6,0s0-0.7,0-0.9  c0-0.2-0.2-0.4-0.4-0.4c-0.2,0-0.7,0-0.7,0l-1.3-3.6c0,0,0-1.5,0-1.7c0-0.2-0.2-0.2-0.2-0.4s0-4.6,0-4.8c0-0.2-0.2-0.2-0.2-0.4  c0-0.2,0-5.1,0-5.3c0-0.2-0.2-0.4-0.4-0.4s-0.2,0-0.2,0V4.9h-0.4h-0.1H50.1z"/>
<text x="0.0" y="117.5" font-size="5.0" font-weight="bold" font-family="Helvetica Neue, Helvetica, Arial-Unicode, Arial, Sans-serif" fill="#000000">Created by Lazar Nikolic</text><text x="0.0" y="122.5" font-size="5.0" font-weight="bold" font-family="Helvetica Neue, Helvetica, Arial-Unicode, Arial, Sans-serif" fill="#000000">from the Noun Project</text></svg>

If you want a png you can use Inkscape.

Here is a link to a tutorial: http://www.31a2ba2a-b718-11dc-8314-0800200c9a66.com/2012/09/how-to-convert-svg-data-to-png-image.html