convert svg to html+css

Question

I want a converter to convert from svg format to( html + css )

<g transform="matrix(1.25,0,0,-1.25,0,15.56875)">


    <text transform="matrix(1,0,0,-1,76.881,0)">
        <tspan style="font-size: 7.87px; font-family: 'XITSMath';" x="0" y="0">N</tspan>
    </text>


    <text transform="matrix(1,0,0,-1,88.499,7.313)">
        <tspan style="font-size: 7.87px; font-family: 'XITSMath';" x="0" y="0">T</tspan>
    </text>
</g>

Now what I want to do, is to convert matrix, x and y values to css attributes.For Example, T here is superscript and N is subscript and this is done by tarnsform,x and y attributes AND I want to translate this sub/super script effect to css in HTML document. I have found a python script wich called svg2css and another one which called svg2html, but I cant find any information about how to test them. This is svg2css script:http://sourceforge.net/projects/svg2css/files/
And this is svg2html script:http://jspoker.pokersource.info/jpoker-1.0.16/test-svg2html.py
I have found this also, it seems to be a test code for svg2html script: http://jspoker.pokersource.info/jpoker-1.0.16/test-svg2html.py Hi friends, finally I have found a way to test svg2css python script, but it results in error message: I tried to use svg2css inkscape extension in python, which converts an svg file to its equivalent css+html, but it resulted in no output with a warning message:

Source file C:\WINDOWS\Temp\ink_ext_XXXXXX.svg9EFDKV not an SVG. My svg file is very simple, it just contains one text tag, I tried to generate the css+html from these svg formats:

1. plain svg
2. inkscape svg
3. optimized svg but all of these resluted in no output with same error message.
   

This is the Error Log file generated in \Users\staff\Application Data\inkscape:

Extension "Sketch Input" failed to load because a dependency was not met. Dependency: type: executable location: path string: skconvert

Extension "LaTeX Input" failed to load because a dependency was not met. Dependency: type: extension location: extensions string: org.inkscape.input.sk

I know that I should download these resources, mentioned in the error log file, and fix them , could any one help me to do this, or if there is another solution? THANKS in advance.

Answer 1

This is not really direcly possible, as SVG is a graphic format (an image).

In the same way that you cannot directly convert a jpg or png to HTML.

Yes, it is possible to create tables with 1px cells that emulate an image, but I doubt this is what you are looking for.

---

Update:

Seeing as you only have text elements, you may be able to use XSL to transfrom your SVG to XHTML - you will need to provide your own CSS file, however (though, you might be able to generate that with XSL as well, depending on the contents of the SVG).

Answer 2

Evt. you want to look into the canvas element of HTML5, this might be a start SVG vs Canvas element