CODEWITHSUNDEEP
htmlxhtmlsvg
loll
loll

Reputation: 237

convert svg to html+css

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 transform, 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 which 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 resulted 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?

Upvotes: 3

Views: 28718

Answers (2)

255.tar.xz
255.tar.xz

Reputation: 792

This only sort of works, but here you go anyway:

https://convertio.co/svg-html/

This does technically do what it says it does, however, it just splits the content into text, and everything else. It might work with simple SVGs... Although with anything of any complexity it will completely botch it... As it doesn't split rectangles into divs, rather, it rasterizes everything except for the text, which might work in some scenarios...

It didn't work for my purposes, as I built out a webpage layout style and was hoping I could just convert it into an HTML file and add some functionality, but it didn't work, I'll just have to hand-code it I guess!

Upvotes: 1

Oded
Oded

Reputation: 499112

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).

Upvotes: 1

Related Questions