question

bigFan-1849 avatar image
0 Votes"
bigFan-1849 asked AlbertKallal-4360 commented

Display SVG in html table without using gridview

Hello everyone, I have this svg data

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">;
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="50" viewBox="0 0 600 100" preserveAspectRatio="xMidYMin" style="transform: scale(0.8); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8);">
<g fill="#ffffff">
<rect x="0" y="0" width="400" height="200"/>
<g fill="none" stroke="#000000" stroke-width="2">
<polyline points="153.5,45.5 152.5,47.5 152.5,53.5 151.5,60.5 150.5,68.5 150.5,77.5 149.5,85.5 149.5,92.5 148.5,98.5 148.5,102.5 148.5,106.5 148.5,108.5 148.5,110.5 148.5,111.5 148.5,113.5 149.5,112.5"/>
<polyline points="204.5,33.5 204.5,34.5 204.5,37.5 205.5,41.5 205.5,46.5 206.5,52.5 206.5,57.5 206.5,63.5 206.5,68.5 206.5,72.5 206.5,78.5 206.5,82.5 206.5,85.5 205.5,89.5 205.5,92.5 205.5,95.5 205.5,97.5 205.5,100.5 205.5,102.5 205.5,103.5 206.5,103.5"/>
<polyline points="277.5,22.5 278.5,25.5 278.5,29.5 279.5,36.5 279.5,44.5 280.5,52.5 280.5,61.5 280.5,70.5 280.5,78.5 280.5,86.5 279.5,92.5 279.5,99.5 278.5,106.5 278.5,111.5 278.5,117.5 277.5,123.5 277.5,126.5 277.5,129.5 276.5,133.5 276.5,135.5 276.5,136.5 276.5,137.5"/>
</g>
</g>
</svg>

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

 <asp:GridView ID="gvVisitor" runat="server" >
                 <Columns>
                     <asp:TemplateField HeaderText="Signature">
                         <ItemTemplate>
                             <%# If(IsDBNull(Eval("visitor_signature")), "N/A", Eval("visitor_signature"))%>
                         </ItemTemplate>
                     </asp:TemplateField>
                 </Columns>
             </asp:GridView>

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.

dotnet-csharpdotnet-aspnet-webforms
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

bigFan-1849 avatar image
0 Votes"
bigFan-1849 answered Viorel-1 commented

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


  <tr class="left-align" data-ng-repeat="q in visitors">
                         <td class="d-none d-sm-table-cell">{
                 {$index+1}}. {
                 {q.name}}
                         </td>
                         <td>
                                
    
                         </td>
                         <td>
                             {
                 {q.signature}}
                         </td>
                     </tr>

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

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.


Probably you should find a dedicated place: https://www.bing.com/search?q=AngularJS+render+raw+html.



0 Votes 0 ·
AlbertKallal-4360 avatar image
1 Vote"
AlbertKallal-4360 answered

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:

201992-image.png

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:

201919-image.png

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

201977-image.png

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





image.png (12.3 KiB)
image.png (5.5 KiB)
image.png (3.4 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

bigFan-1849 avatar image
0 Votes"
bigFan-1849 answered AlbertKallal-4360 commented

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

  <div ng-bind-html="q.signatureImage"></div>

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.

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

All good! - at least we figured out that it had little to do with a gridview. I kind of like the SVG format, since it is actually text, and it thus lets you drop in a div, a span, or even I think textarea. Then if you just shove in the raw SVG, it will display - that I like quite a bit.

0 Votes 0 ·