How to convert svg to html using LINQ in visual basic?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Bill Downing
    New Member
    • Dec 2010
    • 1
    #1

    How to convert svg to html using LINQ in visual basic?

    I need help finishing a visual basic program that converts SVG to HTML using LINQ. The input in svg.xml should produce the output in target.html


    Here is my svg.xml code:
    Code:
    <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

  <rect width="300" height="100" fill="rgb(120,90,255)" strokewidth="1" stroke="rgb(0,0,0)"
  style="fill:rgb(120,90,255);stroke-width:1;
stroke:rgb(0,0,0)"/>

  <rect x="120" y="20" width="250" height="250" fill="purple" strokewidth="5" stroke="purple"
style="fill:green;stroke:purple;stroke-width:5;"/>

  <rect x="20" y="120" width="250" height="250" fill="blue" strokewidth="15" stroke="pink"
  style="fill:blue;stroke:pink;stroke-width:15;"/>

  <rect x="200" y="200" width="250" fill="red" strokewidth="25" stroke="black"
  height="100" style="fill:red;stroke:black;
stroke-width:25;"/>
  
</svg>

    Here is the desired output code ...
    Code:
    <?xml version="1.0" encoding="utf-8"?>

<html>

  <body style="width: 100%; height: 100%">

    <div style="position: absolute; left: 20px ; top: 20px ; padding-bottom: 250px ; padding-right: 250px ; border-style: solid; border-width: 0px; background-color:blue;border-color:pink;border-width:5; fill-opacity:0.1;stroke-opacity:0.9"></div>

    <div style="position: absolute; left: 50px ; top: 100px ; padding-bottom: 5px ; padding-right: 10px ; border-style: solid; border-width: 0px; background-color:red;"></div>

    <div style="position: absolute; left: 200px ; top: 175px ; padding-bottom: 500px ; padding-right: 40px ; border-style: solid; border-width: 0px; background-color:purple; border-color:black; border-width: 10;"></div>

  </body>

</html>

    This is my visual basic code so far ... it outputs the html with the vector information as is. I want to alter it to change it to the desired output.
    Code:
    Imports <xmlns:svg="http://www.w3.org/2000/svg">
' *** LOOK OUT FOR THIS! ^^^^

Public Class Form1

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        ' svg -> rect*
        ' rect@x = 0, rect@y = 0, rect@width, rect@height
        ' html -> body
        ' body -> div*
        ' <div style="position: absolute; left: ...
        ' top: ... padding-bottom: ... padding-right: ...
        ' 



    End Sub

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

        Dim svg As XElement
        svg = XElement.Load("../../test.svg.xml")

        Dim html = <html>
                       <body style="width: 100%; height: 100%">

                           <%= From rectangle In svg.<svg:rect> Select <div style=<%= "position: absolute; left: " & rectangle.@x & _
                                                                                      "px; top: " & rectangle.@y & _
                                                                                      "px; padding-bottom: " & rectangle.@width & _
                                                                                      "px; padding-right: " & rectangle.@height & _
                                                                                      "px; border-style: solid; border-width: 0px; background-color: " & rectangle.@fill & _
                                                                                      "; border-color: " & rectangle.@stroke & _
                                                                                      "; border-width: " & _
                                                                                      rectangle.@strokewidth %>>
                                                                       </div> %>
                       </body>
                   </html>

        html.Save("../../result.html")

    End Sub
End Class

    If anybody can help me with this, it would be much appreciated!
    Last edited by Niheel; Dec 5 '10, 08:40 PM. Reason: Please use code tags to display questions on Bytes.
    Tags: None
    • Benburrito
      New Member
      • Dec 2010
      • 1
      #2
      You almost have it, it's:
      ---------------------------------------------------
      Dim html = <html>
      <body style="width: 100%; height: 100%">

      <%= From rect In svg...<svg> Select <div style=<%= "position: absolute; left: " & rect.@x & _
      "px; top: " & rect.@y & _
      "px; padding-bottom: " & rect.@width & _
      "px; padding-right: " & rect.@height & _
      "px; border-style: solid; border-width: 0px; background-color: " & rect.@fill & _
      "; border-color: " & rect.@stroke & _
      "; border-width: " & rect.@strokewid th %>>
      </div> %>
      </body>
      </html>

      html.Save("../../result.html")

      -----------------------------------------------
      The compliler will give you errors, not liking pink and so forth in the HTML, but it outputs it correctly.

        Comment

        Previous template Next
        Working...