将svg转换为html+css

Question

我想要一个转换器从svg格式转换为( 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>

现在我要做的就是把矩阵，x和y值转换成CSS属性。例如，T是上标，N是下标，这是通过transform、x和y属性完成的，我想把这个子/超级脚本效果转换成HTML文档中的CSS。

我找到了一个叫做svg2css的python脚本，还有一个叫做svg2html的脚本，但是我找不到关于如何测试它们的任何信息。这是svg2css脚本：http://sourceforge.net/projects/svg2css/files/

这是svg2html脚本：http://jspoker.pokersource.info/jpoker-1.0.16/test-svg2html.py

我还发现，它似乎是svg2html脚本的测试代码：http://jspoker.pokersource.info/jpoker-1.0.16/test-svg2html.py

嗨，朋友们，我终于找到了一种测试svg2css python脚本的方法，但是它会导致错误消息:我尝试在python中使用svg2css inkscape扩展，它将一个svg文件转换成它的等效css+html，但是它没有输出一个警告消息：

源文件C:\WINDOWS\Temp\ink_ext_XXXXXX.svg9EFDKV不是SVG。我的svg文件非常简单，它只包含一个文本标记，我尝试从这些svg格式生成css+html：

1. 平原svg
2. inkscape svg
3. 优化的svg，但所有这些都没有输出与相同的错误消息。

这是在\Users\staff\Application Data\inkscape中生成的错误日志文件：

扩展"Sketch输入“无法加载，因为没有满足依赖关系。依赖关系:类型:可执行位置:路径字符串: skconvert

扩展"LaTeX输入“无法加载，因为没有满足依赖关系。依赖关系:类型:扩展位置:扩展字符串: org.inkscape.input.sk

我知道，我应该下载这些资源，在错误日志文件中提到，并修复它们，谁能帮助我这样做，或者如果有另一个解决方案？

Answer 1

这只是一种工作，但不管怎样，你还是要这样做：

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

从技术上讲，它确实能做到它说的那样，但是，它只是将内容分割成文本，以及其他的东西。它可能适用于简单的SVG..。尽管任何复杂的事情都会把它搞砸.因为它不会将矩形分割成div，所以它会将除文本之外的所有东西都进行栅格化，这在某些情况下可能有效.

它没有为我的目的工作，因为我构建了一个网页布局风格，并希望我可以把它转换成一个HTML文件，并添加一些功能，但它没有工作，我只需要手工编码它我猜！

Answer 2

这并不是完全可能的，因为SVG是一种图形格式(图像)。

同样，您不能直接将jpg或png转换为HTML。

是的，可以用1px单元格创建表来模拟图像，但我怀疑这是您要寻找的。

更新：

考虑到您只有text元素，您可能可以使用XSL将您的SVG转换为XHTML --但是您需要提供您自己的CSS文件(不过，您也可以根据SVG的内容使用XSL生成该文件)。