将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 Input”未能加载，因为未满足依赖项。 依赖关系： 类型：可执行文件 位置：路径 字符串：skconvert

扩展“LaTeX Input”未能加载，因为未满足依赖项。 依赖关系： 类型：扩展 位置：扩展 字符串：org.inkscape.input.sk

我知道我应该下载错误日志文件中提到的这些资源并修复它们，有人可以帮助我吗？或者是否有其他解决方案？

- loll

---

现在我找到了一个名为(svg2css)的Python脚本，关于如何使用它的信息很少，但它应该可以将SVG转换为HTML+CSS，所以如果有人能告诉我更多相关信息，我会非常高兴。ko.sourceforge.jp/projects/sfnet_svg2css，sourceforge.net/projects/svg2css - loll

大家好，我想告诉你们我的问题是如何安装Skencil http://www.nongnu.org/skencil/download.html，如果有人知道关于安装这个程序的任何信息，请帮助我。 - loll

Answer 1

这只是部分有效，但无论如何，这里有它：

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

这个东西技术上确实实现了它所说的功能，但是它只是将内容分成文本和其他部分。对于简单的SVG或许可以工作...但是对于任何复杂的图像，它都无法胜任...因为它没有将矩形拆分成div，而是除了文本之外，将所有内容光栅化处理，这在某些情况下可能有效...

对于我的目的来说，它并没有起到作用，因为我构建了一个网页布局样式，希望能够将其转换为HTML文件并添加一些功能，但是它没有起作用，我想我只能手动编写代码了！

- 255.tar.xz

Answer 2

这并不是直接可能的，因为SVG是一种图形格式（一张图片）。

就像你不能直接将jpg或png转换为HTML一样。

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

---

更新：

鉴于您只有文本元素，您可以尝试使用XSL将您的SVG转换为XHTML - 不过您需要提供自己的CSS文件（不过，根据SVG的内容，您也可能能够用XSL生成CSS文件）。

- Oded

---

你说得没错，但我的SVG文件包含<text>标签，没有任何嵌入或链接的图片。 - loll

@loll - 你的问题缺少一个非常重要的细节。你可以_编辑_你的问题并添加_所有_重要的细节吗？ - Oded

等等，SVG不是图片，它们是矢量图。 - Kroltan

@Kroltan - SVG 是一种图形格式。它们是矢量图像，但仍然是图像。 - Oded

@oded 但是，除非您将它们预先渲染成位图，否则无法使用单个像素的表格来表示它们。 - Kroltan