Display SVG in html table without using gridview

Question

Hello everyone, I have this svg data

That I stored in the database. Usually here is how I could display it using gridview.


                
                    
                        
                            <%# If(IsDBNull(Eval("visitor_signature")), "N/A", Eval("visitor_signature"))%>

Now the requirement has changed and I could not used gridview anymore but I have to use standard html table tag. But when I display it, it just shows the string code rather than the SVG image. How could I display the image? It seems the Eval class in the gridview takes care of converting and displaying the SVG.

Answer

The main issue here is what does your table look like, and how are you planning to add rows to this table?

Remember, if you have raw SVG text in a database, then you are free to read that database, and SHOVE in the image as SVG.

You can use a simple "span" or even a asp.net image control (probably better, since then you can use width + height settings of the image control).

so, say we have two images in a database, a simple ellipse, and say your posted SVG.

for fun testing, and drop in two span controls

So, say I have this markup:

Nothing really much.

And the above button code, can be this:

    Protected Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click  
  
        Dim rstData = New DataTable  
        Using conn As New SqlConnection(My.Settings.TEST4)  
            Using cmdSQL As New SqlCommand("SELECT ID,ImageText FROM tblSVG", conn)  
                conn.Open()  
                rstData.Load(cmdSQL.ExecuteReader)  
            End Using  
        End Using  
  
        ' take image data into controls on page  
        Span1.InnerHtml = rstData.Rows(0).Item("ImageText")  
        Span2.InnerHtml = rstData.Rows(1).Item("ImageText")  
  
    End Sub

And when I run above, I get this:

In fact, I can even drop in a image control, say like this:

And code behind to load that image control, can be this:

        Image11.ImageUrl = "data:image/svg+xml;utf8," & rstData.Rows(0).Item("ImageText")

Now, when I tested using your posted SVG, the above 2nd image example did not work, but I suspect that was a cut + paste issue.

but, regardless, the Gridview expression you have ONLY just shoved the SVG text into the web page. You can use as per above a "span", or even a div control. And as 2nd exmaple shows, you can even use a asp.net image control. (as noted, your SVG should work - but it did not).

Regardless, looking at above?

Then the issue next becomes "how" and "when" and what code you planning to use to fill out that table. (and are you using a asp.net table dropped into the page, or a HTML page. But, then again, that is "more" of a coding issue, and how you plan to add rows of data to that table, not really the challenge of how to push out to the page the SVG data text, since as above shows, your GridView, or the above plain jane code does not really need to do any speical conversion, but only requires some kind of anchor on the page to shove the SVG markup into the page.

Regards,
Albert D. Kallal (Access MVP 2003-2017)
Edmonton, Alberta Canada

Answer

After some testing, I realized this is to do with my angularjs side of thing. So here is tag in my table using angularjs

 
                        {{$index+1}}. {{q.name}}
                        
                        


                        
                        
                            {{q.signature}}

The problem is q.signature does not render svg image but displayed as text. Any ideas how I could render the svg string to image? Thanks

Answer

Thank you for your reply. Actually the reason it could not render the SVG is because of trust issue in angularjs. So what I did was to use

And in my js code, I need to import $sce service and render the image this way

q.signatureImage = $sce.trustAsHtml(signature);

Quite simple but took a while to figure out. Hope it helps others too.

Display SVG in html table without using gridview

3 answers