Converting a svg base64 string to image - C#

Question

I post a svg string to the server, in order to

Convert svg string to image (png)
Save image to database (binary data)

I am however stranded at converting the string successfully to an image.

The SVG string is generated from https://willowsystems.github.io/jSignature/#/demo/ where I use svgbase64 extraction.

Sample content: "image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iNDAzIiBoZWlnaHQ9IjEwNiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTSAxMjUgMSBjIC0wLjEyIDAuNjggLTMuOSAyNi4xOSAtNyAzOSBjIC0xLjkgNy44NyAtNC44NiAxNS44MiAtOCAyMyBjIC0xLjQgMy4xOSAtMy42MyA2Ljc4IC02IDkgYyAtMi41NiAyLjQgLTYuNTggNC45IC0xMCA2IGMgLTUuMzUgMS43MiAtMTEuOTYgMS42MiAtMTggMyBjIC0xMC4yNyAyLjM1IC0xOS43MSA1LjcxIC0zMCA4IGMgLTguMDYgMS43OSAtMTYuMyAzLjI4IC0yNCA0IGMgLTIuNTUgMC4yNCAtNi42MSAwLjM5IC04IC0xIGMgLTIuOTMgLTIuOTMgLTYuNzMgLTkuOTEgLTggLTE1IGMgLTIuNDkgLTkuOTYgLTMuMDggLTIxLjcyIC00IC0zMyBjIC0wLjc4IC05LjUxIC0xLjI2IC0xOS4zMSAtMSAtMjggYyAwLjA2IC0xLjk2IDEuMDggLTQuMzUgMiAtNiBjIDAuNjEgLTEuMTEgMS45MSAtMi41MiAzIC0zIGMgMS41NiAtMC42OSA0LjE1IC0wLjQ1IDYgLTEgYyAxLjM2IC0wLjQxIDIuNjUgLTEuODcgNCAtMiBjIDExLjUyIC0xLjEgMjYuMzkgLTIuNDcgMzggLTIgYyAzLjU3IDAuMTUgOC4wNCAxLjk5IDExIDQgYyA0LjgzIDMuMjggOS4zNyA4LjM3IDE0IDEzIGMgNi4zNSA2LjM1IDExLjY4IDEyLjg5IDE4IDE5IGMgMy40MyAzLjMyIDcuNDcgNS43MiAxMSA5IGMgNS45NyA1LjU0IDEwLjk4IDExLjUzIDE3IDE3IGMgNS4xNiA0LjY5IDEwLjM0IDkuNDggMTYgMTMgYyA2LjM5IDMuOTcgMTQuNDYgNi4xNSAyMSAxMCBjIDQuNjIgMi43MSA4LjQ3IDcuNjYgMTMgMTAgYyA0LjYzIDIuMzkgMTAuNTQgMy43MiAxNiA1IGMgNS45NCAxLjQgMTEuOTYgMi42OCAxOCAzIGMgMTIuOTEgMC42OCAyNS43IDAuNzMgMzkgMCBjIDM2LjI2IC0yIDczLjAzIC0zLjk1IDEwNiAtOCBjIDUuNDIgLTAuNjcgMTAuNSAtNS4xMiAxNiAtNyBjIDYuMTggLTIuMTIgMTMuMyAtMy4wMiAxOSAtNSBjIDEuNDUgLTAuNSAyLjc2IC0xLjg4IDQgLTMgYyAyLjQ1IC0yLjIzIDUuNjggLTQuNTEgNyAtNyBjIDEuMzYgLTIuNTYgMS43MiAtNi42NyAyIC0xMCBjIDAuMzggLTQuNTggMC44NyAtOS45OCAwIC0xNCBjIC0wLjY0IC0yLjk1IC0yLjk4IC02LjM1IC01IC05IGMgLTMuMTkgLTQuMTkgLTcuMjQgLTkuMzcgLTExIC0xMiBjIC0yLjEzIC0xLjQ5IC02LjMgLTEuMSAtOSAtMiBjIC0xLjA2IC0wLjM1IC0xLjk1IC0xLjc1IC0zIC0yIGMgLTQuMTMgLTAuOTcgLTkuMzIgLTEuOTEgLTE0IC0yIGMgLTExLjkyIC0wLjI0IC0yNC4xMiAtMC4wNiAtMzYgMSBjIC02LjczIDAuNiAtMTQuMiAxLjUgLTIwIDQgYyAtOC4wNSAzLjQ4IC0xNS44IDEwLjI4IC0yNCAxNSBjIC0yLjg1IDEuNjQgLTYuMzIgMi4yNSAtOSA0IGMgLTYuNzkgNC40NSAtMTMuMDcgMTAuMTUgLTIwIDE1IGwgLTEwIDYiLz48L3N2Zz4="

Here my code:

    var svgContent = "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iNDAzIiBoZWlnaHQ9IjEwNiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTSAxMjUgMSBjIC0wLjEyIDAuNjggLTMuOSAyNi4xOSAtNyAzOSBjIC0xLjkgNy44NyAtNC44NiAxNS44MiAtOCAyMyBjIC0xLjQgMy4xOSAtMy42MyA2Ljc4IC02IDkgYyAtMi41NiAyLjQgLTYuNTggNC45IC0xMCA2IGMgLTUuMzUgMS43MiAtMTEuOTYgMS42MiAtMTggMyBjIC0xMC4yNyAyLjM1IC0xOS43MSA1LjcxIC0zMCA4IGMgLTguMDYgMS43OSAtMTYuMyAzLjI4IC0yNCA0IGMgLTIuNTUgMC4yNCAtNi42MSAwLjM5IC04IC0xIGMgLTIuOTMgLTIuOTMgLTYuNzMgLTkuOTEgLTggLTE1IGMgLTIuNDkgLTkuOTYgLTMuMDggLTIxLjcyIC00IC0zMyBjIC0wLjc4IC05LjUxIC0xLjI2IC0xOS4zMSAtMSAtMjggYyAwLjA2IC0xLjk2IDEuMDggLTQuMzUgMiAtNiBjIDAuNjEgLTEuMTEgMS45MSAtMi41MiAzIC0zIGMgMS41NiAtMC42OSA0LjE1IC0wLjQ1IDYgLTEgYyAxLjM2IC0wLjQxIDIuNjUgLTEuODcgNCAtMiBjIDExLjUyIC0xLjEgMjYuMzkgLTIuNDcgMzggLTIgYyAzLjU3IDAuMTUgOC4wNCAxLjk5IDExIDQgYyA0LjgzIDMuMjggOS4zNyA4LjM3IDE0IDEzIGMgNi4zNSA2LjM1IDExLjY4IDEyLjg5IDE4IDE5IGMgMy40MyAzLjMyIDcuNDcgNS43MiAxMSA5IGMgNS45NyA1LjU0IDEwLjk4IDExLjUzIDE3IDE3IGMgNS4xNiA0LjY5IDEwLjM0IDkuNDggMTYgMTMgYyA2LjM5IDMuOTcgMTQuNDYgNi4xNSAyMSAxMCBjIDQuNjIgMi43MSA4LjQ3IDcuNjYgMTMgMTAgYyA0LjYzIDIuMzkgMTAuNTQgMy43MiAxNiA1IGMgNS45NCAxLjQgMTEuOTYgMi42OCAxOCAzIGMgMTIuOTEgMC42OCAyNS43IDAuNzMgMzkgMCBjIDM2LjI2IC0yIDczLjAzIC0zLjk1IDEwNiAtOCBjIDUuNDIgLTAuNjcgMTAuNSAtNS4xMiAxNiAtNyBjIDYuMTggLTIuMTIgMTMuMyAtMy4wMiAxOSAtNSBjIDEuNDUgLTAuNSAyLjc2IC0xLjg4IDQgLTMgYyAyLjQ1IC0yLjIzIDUuNjggLTQuNTEgNyAtNyBjIDEuMzYgLTIuNTYgMS43MiAtNi42NyAyIC0xMCBjIDAuMzggLTQuNTggMC44NyAtOS45OCAwIC0xNCBjIC0wLjY0IC0yLjk1IC0yLjk4IC02LjM1IC01IC05IGMgLTMuMTkgLTQuMTkgLTcuMjQgLTkuMzcgLTExIC0xMiBjIC0yLjEzIC0xLjQ5IC02LjMgLTEuMSAtOSAtMiBjIC0xLjA2IC0wLjM1IC0xLjk1IC0xLjc1IC0zIC0yIGMgLTQuMTMgLTAuOTcgLTkuMzIgLTEuOTEgLTE0IC0yIGMgLTExLjkyIC0wLjI0IC0yNC4xMiAtMC4wNiAtMzYgMSBjIC02LjczIDAuNiAtMTQuMiAxLjUgLTIwIDQgYyAtOC4wNSAzLjQ4IC0xNS44IDEwLjI4IC0yNCAxNSBjIC0yLjg1IDEuNjQgLTYuMzIgMi4yNSAtOSA0IGMgLTYuNzkgNC40NSAtMTMuMDcgMTAuMTUgLTIwIDE1IGwgLTEwIDYiLz48L3N2Zz4=";
    var bytes = Convert.FromBase64String(svgContent);


    using (MemoryStream ms = new MemoryStream(Convert.FromBase64String(svgContent)))
    {
        using (Bitmap bm2 = new Bitmap(ms))
        {
            bm2.Save("c:\\temp" + "myImage.jpg");
        }
    }

I get an exception when setting the stream to the bitmap. I guess the issue is something with my svgContent, but not sure what.

svg is not a bitmap. You need some library to render it to bitmap — Access Denied, Nov 01 '18 at 11:15
see my answer, it's better to use fresh crossplatform library by Microsoft. — Access Denied, Nov 01 '18 at 11:39

Access Denied · Accepted Answer · 2018-11-01T11:39:05.913

Use SkiaSharp.Svg by xamarin nuget with SkiaSharp nuget by microsoft which is crossplatform BTW:

var svgContent = "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iNDAzIiBoZWlnaHQ9IjEwNiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTSAxMjUgMSBjIC0wLjEyIDAuNjggLTMuOSAyNi4xOSAtNyAzOSBjIC0xLjkgNy44NyAtNC44NiAxNS44MiAtOCAyMyBjIC0xLjQgMy4xOSAtMy42MyA2Ljc4IC02IDkgYyAtMi41NiAyLjQgLTYuNTggNC45IC0xMCA2IGMgLTUuMzUgMS43MiAtMTEuOTYgMS42MiAtMTggMyBjIC0xMC4yNyAyLjM1IC0xOS43MSA1LjcxIC0zMCA4IGMgLTguMDYgMS43OSAtMTYuMyAzLjI4IC0yNCA0IGMgLTIuNTUgMC4yNCAtNi42MSAwLjM5IC04IC0xIGMgLTIuOTMgLTIuOTMgLTYuNzMgLTkuOTEgLTggLTE1IGMgLTIuNDkgLTkuOTYgLTMuMDggLTIxLjcyIC00IC0zMyBjIC0wLjc4IC05LjUxIC0xLjI2IC0xOS4zMSAtMSAtMjggYyAwLjA2IC0xLjk2IDEuMDggLTQuMzUgMiAtNiBjIDAuNjEgLTEuMTEgMS45MSAtMi41MiAzIC0zIGMgMS41NiAtMC42OSA0LjE1IC0wLjQ1IDYgLTEgYyAxLjM2IC0wLjQxIDIuNjUgLTEuODcgNCAtMiBjIDExLjUyIC0xLjEgMjYuMzkgLTIuNDcgMzggLTIgYyAzLjU3IDAuMTUgOC4wNCAxLjk5IDExIDQgYyA0LjgzIDMuMjggOS4zNyA4LjM3IDE0IDEzIGMgNi4zNSA2LjM1IDExLjY4IDEyLjg5IDE4IDE5IGMgMy40MyAzLjMyIDcuNDcgNS43MiAxMSA5IGMgNS45NyA1LjU0IDEwLjk4IDExLjUzIDE3IDE3IGMgNS4xNiA0LjY5IDEwLjM0IDkuNDggMTYgMTMgYyA2LjM5IDMuOTcgMTQuNDYgNi4xNSAyMSAxMCBjIDQuNjIgMi43MSA4LjQ3IDcuNjYgMTMgMTAgYyA0LjYzIDIuMzkgMTAuNTQgMy43MiAxNiA1IGMgNS45NCAxLjQgMTEuOTYgMi42OCAxOCAzIGMgMTIuOTEgMC42OCAyNS43IDAuNzMgMzkgMCBjIDM2LjI2IC0yIDczLjAzIC0zLjk1IDEwNiAtOCBjIDUuNDIgLTAuNjcgMTAuNSAtNS4xMiAxNiAtNyBjIDYuMTggLTIuMTIgMTMuMyAtMy4wMiAxOSAtNSBjIDEuNDUgLTAuNSAyLjc2IC0xLjg4IDQgLTMgYyAyLjQ1IC0yLjIzIDUuNjggLTQuNTEgNyAtNyBjIDEuMzYgLTIuNTYgMS43MiAtNi42NyAyIC0xMCBjIDAuMzggLTQuNTggMC44NyAtOS45OCAwIC0xNCBjIC0wLjY0IC0yLjk1IC0yLjk4IC02LjM1IC01IC05IGMgLTMuMTkgLTQuMTkgLTcuMjQgLTkuMzcgLTExIC0xMiBjIC0yLjEzIC0xLjQ5IC02LjMgLTEuMSAtOSAtMiBjIC0xLjA2IC0wLjM1IC0xLjk1IC0xLjc1IC0zIC0yIGMgLTQuMTMgLTAuOTcgLTkuMzIgLTEuOTEgLTE0IC0yIGMgLTExLjkyIC0wLjI0IC0yNC4xMiAtMC4wNiAtMzYgMSBjIC02LjczIDAuNiAtMTQuMiAxLjUgLTIwIDQgYyAtOC4wNSAzLjQ4IC0xNS44IDEwLjI4IC0yNCAxNSBjIC0yLjg1IDEuNjQgLTYuMzIgMi4yNSAtOSA0IGMgLTYuNzkgNC40NSAtMTMuMDcgMTAuMTUgLTIwIDE1IGwgLTEwIDYiLz48L3N2Zz4=";           
   var byteArray = Convert.FromBase64String(svgContent);
   using (var stream = new MemoryStream(byteArray))
   {
     var bitmap = new SKBitmap(500, 500);
     var canvas = new SKCanvas(bitmap);
     // load the SVG
     var svg = new SkiaSharp.Extended.Svg.SKSvg(new SKSize(100, 100));
     svg.Load(stream);
     // draw the SVG to the bitmap
     canvas.DrawPicture(svg.Picture);
     var skData = SKImage.FromBitmap(bitmap).Encode(SKEncodedImageFormat.Png, 100);
     using (var file = new FileStream(@"C:\temp\0\1.png", FileMode.Create))
     {
        skData.SaveTo(file);
     }
}

Or use Svg nuget by vvv:

var svgContent = "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iNDAzIiBoZWlnaHQ9IjEwNiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTSAxMjUgMSBjIC0wLjEyIDAuNjggLTMuOSAyNi4xOSAtNyAzOSBjIC0xLjkgNy44NyAtNC44NiAxNS44MiAtOCAyMyBjIC0xLjQgMy4xOSAtMy42MyA2Ljc4IC02IDkgYyAtMi41NiAyLjQgLTYuNTggNC45IC0xMCA2IGMgLTUuMzUgMS43MiAtMTEuOTYgMS42MiAtMTggMyBjIC0xMC4yNyAyLjM1IC0xOS43MSA1LjcxIC0zMCA4IGMgLTguMDYgMS43OSAtMTYuMyAzLjI4IC0yNCA0IGMgLTIuNTUgMC4yNCAtNi42MSAwLjM5IC04IC0xIGMgLTIuOTMgLTIuOTMgLTYuNzMgLTkuOTEgLTggLTE1IGMgLTIuNDkgLTkuOTYgLTMuMDggLTIxLjcyIC00IC0zMyBjIC0wLjc4IC05LjUxIC0xLjI2IC0xOS4zMSAtMSAtMjggYyAwLjA2IC0xLjk2IDEuMDggLTQuMzUgMiAtNiBjIDAuNjEgLTEuMTEgMS45MSAtMi41MiAzIC0zIGMgMS41NiAtMC42OSA0LjE1IC0wLjQ1IDYgLTEgYyAxLjM2IC0wLjQxIDIuNjUgLTEuODcgNCAtMiBjIDExLjUyIC0xLjEgMjYuMzkgLTIuNDcgMzggLTIgYyAzLjU3IDAuMTUgOC4wNCAxLjk5IDExIDQgYyA0LjgzIDMuMjggOS4zNyA4LjM3IDE0IDEzIGMgNi4zNSA2LjM1IDExLjY4IDEyLjg5IDE4IDE5IGMgMy40MyAzLjMyIDcuNDcgNS43MiAxMSA5IGMgNS45NyA1LjU0IDEwLjk4IDExLjUzIDE3IDE3IGMgNS4xNiA0LjY5IDEwLjM0IDkuNDggMTYgMTMgYyA2LjM5IDMuOTcgMTQuNDYgNi4xNSAyMSAxMCBjIDQuNjIgMi43MSA4LjQ3IDcuNjYgMTMgMTAgYyA0LjYzIDIuMzkgMTAuNTQgMy43MiAxNiA1IGMgNS45NCAxLjQgMTEuOTYgMi42OCAxOCAzIGMgMTIuOTEgMC42OCAyNS43IDAuNzMgMzkgMCBjIDM2LjI2IC0yIDczLjAzIC0zLjk1IDEwNiAtOCBjIDUuNDIgLTAuNjcgMTAuNSAtNS4xMiAxNiAtNyBjIDYuMTggLTIuMTIgMTMuMyAtMy4wMiAxOSAtNSBjIDEuNDUgLTAuNSAyLjc2IC0xLjg4IDQgLTMgYyAyLjQ1IC0yLjIzIDUuNjggLTQuNTEgNyAtNyBjIDEuMzYgLTIuNTYgMS43MiAtNi42NyAyIC0xMCBjIDAuMzggLTQuNTggMC44NyAtOS45OCAwIC0xNCBjIC0wLjY0IC0yLjk1IC0yLjk4IC02LjM1IC01IC05IGMgLTMuMTkgLTQuMTkgLTcuMjQgLTkuMzcgLTExIC0xMiBjIC0yLjEzIC0xLjQ5IC02LjMgLTEuMSAtOSAtMiBjIC0xLjA2IC0wLjM1IC0xLjk1IC0xLjc1IC0zIC0yIGMgLTQuMTMgLTAuOTcgLTkuMzIgLTEuOTEgLTE0IC0yIGMgLTExLjkyIC0wLjI0IC0yNC4xMiAtMC4wNiAtMzYgMSBjIC02LjczIDAuNiAtMTQuMiAxLjUgLTIwIDQgYyAtOC4wNSAzLjQ4IC0xNS44IDEwLjI4IC0yNCAxNSBjIC0yLjg1IDEuNjQgLTYuMzIgMi4yNSAtOSA0IGMgLTYuNzkgNC40NSAtMTMuMDcgMTAuMTUgLTIwIDE1IGwgLTEwIDYiLz48L3N2Zz4=";           
var byteArray = Convert.FromBase64String(svgContent);
using (var stream = new MemoryStream(byteArray))
{
   var svgDocument = SvgDocument.Open<SvgDocument>(stream);
   var bitmap = svgDocument.Draw();
   bitmap.Save(@"C:\temp\0\1.png");
}

Converting a svg base64 string to image - C#

1 Answers1

Linked