html5 – 将整个网页设计为SVG文件

放弃

我意识到,鉴于标题的荒谬,这听起来像一个巨魔.但是,这是一个真正的问题.我的背景涉及OpenGL / x86程序集.我最近开始学习网络编程.我真的很喜欢SVG CSS,并且想知道 – 为什么人们不会在SVG中设计整个网页?

上下文

> SVG提供美丽的原始:二次立方贝塞尔曲线;线填充 – 全部为矢量图形
> SVG提供文本
> SVG提供仿射变换

问题

>有没有人设计整个网站作为一个巨大的SVG文件的例子?
>如果没有,有什么局限性?
>使用SVG原语而不是div /表格时,是否有性能点击?

解决方法

有可能的;例如,您可以在SVG文档中嵌入 HTML片段,以获取链接.

然而,有一些显着的缺点,至少在目前:

>当前的Web浏览器将SVG视为图像,可能不会向用户呈现好的UI.例如,我认为Firefox不允许用户在SVG文件中选择文本.
>你失去了内容和演示文稿的分离.虽然SVG确实使用CSS,但如果您手动编辑,您原则上可以保持分离,则可能是将内容内容进行设计.这有几个缺点:

>作为推论,很难将生成页面适应其他格式.尤其:
>文本大小更改时的行为是什么?该文件是否打印?窗口大小调整大小?很难设计一个支持回流的复杂绘图(如果您的绘图不复杂,您可以使用HTML CSS).
>屏幕阅读器支持:由于订单不清楚(下图),屏幕阅读器可能会产生不可理解的乱码输出.更基本的是,屏幕阅读器可能会假设SVG是一个图像,甚至没有尝试阅读文本.

SVG完全基于XML,因此需要严格遵守规则.使用(X)HTML,您可以选择使用纯HTML序列化.然后,许多规则都是放松的,如果你给他们假输入浏览器更强大的(而不是一个XML解析错误,如果你有一个错位的>).
>目前的搜索引擎可能不会索引您的网页(他们只会将其视为单片图像). Never mind
>内容的顺序不清楚.只要它们在输出中正确定位并且z顺序正确,就像Inkscape这样的工具不需要关心输出顺序元素.但是,如果你正在制作一个网页,这是很重要的,因为屏幕阅读器不知道哪个元素在语义上是第一个.如果您只是手动编辑SVG,这不是问题,但通常的SVG工具可能会扰乱您的订单.使用HTML,通常很清楚.
>很难实现片段标识符(URL的结尾为#id_of_some_element).下面的演示程序使用它们,但我认为这取决于Javascript(对于搜索引擎和javascript禁用的人来说). (我不知道这个)
*̶̶I̶t̶’̶s̶难以转化为文本̶(对于搜索引擎,̶屏幕阅读器,̶拷贝和粘贴,̶等)̶,̶特别是当产生具有图形̶t̶o̶o̶l̶s̶.̶例如,HTTP̶:̶ /̶/̶w̶w̶w̶.̶a̶f̶r̶o̶k̶a̶d̶a̶n̶s̶.̶c̶o̶m̶/̶P̶a̶g̶e̶_̶0̶1̶.̶s̶v̶g̶显示出来在谷歌作为DANSE ET米塞EN印版̶B̶I̶E̶N̶V̶E̶N̶U̶E̶D A N s个ËřPOüřCEļEBřËR L A V̶i̶e̶.̶简VEļOPPë ËD E T A M BØ乌尔S I ñ可做C IL(E S)(E T)I N CE SS一̶n̶t̶s̶̶.̶相比之下,̶甚至蹩脚的所见即所得的HTML生成不需额外分手运行文本喜欢̶t̶h̶a̶t̶.̶

需要考虑的是,可以在XHTML和HTML 5中嵌入SVG元素,因此您可以在不抛弃浏览器/搜索引擎的情况下获得一些优势.

现有用法

我听说过它用于演示文稿(在某些方面更接近于图纸,所以上述一些缺点不适用):

> “Jessyink is a JavaScript that can be incorporated into an Inkscape SVG image containing several layers. Each layer will be converted into one slide of a presentation.”
> Another implemetation; infoan example

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码