How to show a .svg file which is loaded in a variable on a html page (Blazor ServerSide)?

Question

I load a .svg file into a string edit that string. And now I want to display that edited string/.svg on the html page from my blazor project.

In windows forms I used

         //now show that svg icon in a picturebox (nuget 
         //https://github.com/vvvv/SVG)
         //input= the edit .svg String
         var mySvg = SvgDocument.FromSvg<SvgDocument>(input);
         PicbxShow.Image = mySvg.Draw(120,120);

If thought I use it in blazor like this:

<img src=@mySvg.Draw(240,240) />

or directly like this

<svg xmlns="http://www.w3.org/2000/svg">@input</svg>

But the graphic is not shown. If I load it from file

<img src="/images/TEST.svg" />

it works but I don't want to load->edit->save->load(edited)->display.

How do I display a .svg that is in my variable mySvg

    StreamReader reader = new StreamReader(@"TEST.svg");
    input = reader.ReadToEnd();
    mySvg = SvgDocument.FromSvg<SvgDocument>(input);

I don't have to use the nuget (svg) if there is an other solution. Thank you for your Help and Time

---

new tries

in the end I want to edit text "PHALT" in an .svg file and change that with other text (in blazor). And then display the icon with the updated text. I tried this now but still cant get it to work:

@page "/"
@using System.IO;

@* Load file  -> ICON is shown *@
<img src="/images/_temp_circle.svg" />
<br />

@* Open file _temp_circle.svg and copy the .svh text to blazor page manualy-> 
 ICON is shown *@

<svg xmlns="http://www.w3.org/2000/svg" height="7cm" width="7cm" 
 viewBox="00264.567 264.567"><g transform="matrix(3.77953 0 0 3.77953 
 -370.783 -731.84)"><circle cx="133.103" cy="228.633" r="24.892" 
  fill="#fff6d5" stroke="#a80" 
  stroke-width="2.074" stroke-linecap="round" />
 <path d="M133.103 208.228a3.058 3.058 0 00-3.065 3.065v23.567a7.42 7.42 0 
  00-4.355 6.757 7.42 7.42 0 007.42 7.42 7.42 7.42 0 007.42-7.42 7.42 7.420 
  00-4.355-6.757v-23.567a3.058 3.058 0 00-3.065-3.065z" opacity=".7" 
  fill="teal" stroke="#917c6f" stroke-width="1.219" stroke-linecap="square" 
  stroke-linejoin="round" />
  <text style="line-height:1.25;-inkscape-font-specification:'sans-serif 
  Bold'" x="111.943" y="233.039" font-weight="700" font-size="19.121" font- 
  family="sans-serif" letter-spacing="0" word-spacing="0" fill="#c8beb7" 
  stroke="#000" stroke-width=".695">
  <tspan x="111.943" y="233.039" style="-inkscape-font- 
   specification:'sans-serif Bold'">PHALT</tspan>
  </text></g></svg>
  <br />

  @* Read the svg file via stringreader and output the string here ->ICON 
     is NOT shown BUT the svg text is displayed as text WHY??? *@

 @input
 <br />

  <button class="btn btn-primary" @onclick="LoadSvg">Click me</button>

@code{

  string path = $"{Directory.GetCurrentDirectory()}{@"\wwwroot\images\"}";
  string input;


  private void LoadSvg()
  {
    StreamReader reader = new StreamReader(path + @"_temp_circle.svg");
    input = reader.ReadToEnd();

    input = input.Replace("PHALT", "TEST");
    reader.Close();
 }

}

Answer 1

I don't think the way you're trying to handle .svg will be the easiest in Blazor. You can use <svg> tags (i.e. entire contents of any svg file) anywhere you would put <div> or other HTML tags in a Blazor component.

Then you can use @variable wherever you want to change or add any components, and add @code{} to change whatever you want, just like any other Blazor component. So:

(MySVGComponent.Blazor)

<svg blah blah blah>
    <polyline fill="none" stroke="#0074d9"
        stroke-width="2" points="@PointString" />
</svg>
@code {
     public string @PointString {get;set;}
     public void AddPoint (int X, int Y){
        @PointString += " " + X + "," + Y;
}

Answer 2

You could render an image in HTML from base64 string like this:

<img src="data:image/svg+xml;base64,gdmVy...your-svg-bytes-as-base64-data-here.."/>

or similar but with another content type if you do that for a rasterized bitmap image.