将整个网页设计为SVG文件 [英] Designing entire webpages as SVG files

问题描述

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

I realize that given the absurdity of the title, this sounds like a troll. However, it's a genuine question. My background involves OpenGL / x86 assembly. I've recently started learning web programming. I really like SVG + CSS, and was wondering -- why do people not design entire webpages in SVG?

• SVG提供漂亮的原语：二次+三次贝塞尔曲线;行+填充 - 全部作为矢量图形


• SVG提供文本


• SVG提供仿射变换

• 是否有人将整个网站设计为巨型SVG文件的例子？


• 如果没有，有什么限制？


• 使用SVG原语而不是div / table时是否有性能命中？

推荐答案

这是可能的;例如，您可以在SVG文档中嵌入HTML片段以获取类似超链接的内容。

It is possible; for example you can embed HTML fragments in SVG documents in order to get things like hyperlinks.

然而，至少目前存在一些明显的缺点：

However, there are some significant disadvantages, at least at present:

• 当前的Web浏览器将SVG视为图像，并且可能无法向用户显示良好的UI。例如，我认为Firefox不允许用户在SVG文件中选择文本。


• 您将失去内容和演示文稿的分离。虽然SVG确实使用CSS，但如果您手动编辑，原则上可以保持分离，您可能正在设计布局和内容。这有几个缺点：$ b​​
  $ b
  
  
  • 作为必然结果，将结果页面调整为其他格式更加困难。特别是：
  
  
  • 更改文本大小时的行为是什么？文件打印？窗口调整大小？设计一个很好地支持 reflow 的复杂绘图很困难（如果你的绘图不复杂，你也可以使用HTML + CSS）。
  
  
  • 屏幕阅读器支持：由于订单不明确（如下），屏幕阅读器可能会给出难以理解的混乱输出。更基本的是，屏幕阅读器可能会认为SVG是一个图像，甚至没有尝试阅读文本。
  
  
  • Current web browsers treat SVGs as images, and may not present as good a UI to users. For example, I think Firefox doesn't allow the user to select text in SVG files.
  • You lose separation of content and presentation. While SVG does use CSS, and you can in principle maintain the separation if you edit by hand, you are probably designing the layout together with the content. This has several drawbacks:
    • As a corollary, it's harder to adapt the resulting page to other formats. Particularly:
    • What's the behavior when the text size is changed? the document is printed? the window is resized? It's hard to design a complex drawing that supports reflow nicely (and if your drawing isn't complex, you may as well just use HTML+CSS).
    • Screen reader support: since order is not clear (below), screen readers may give incomprehensible, scrambled output. More basically, screen readers may assume the SVG is an image and not even try to read the text.

    值得考虑是可以在XHTML和HTML 5中嵌入SVG元素，因此您可以获得一些好处而不会丢失浏览器/搜索引擎。

    Something to consider is that it is possible to embed SVG elements in XHTML and HTML 5, so you get some of the benefits without throwing off browsers/search engines.

    我听说它用于演示（在某些方面更接近图纸，所以上述一些缺点不适用）：

    I've heard of its use for presentations (which are closer to drawings in some respects, so some of the above drawbacks don't apply):

    
    
    • Jessyink是一个JavaScript，可以合并到包含多个图层的Inkscape SVG图像中。每个图层都将转换为演示文稿的一张幻灯片。
    
    
    • 另一个实现; info 和示例
    
    
    • "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; info and an example

    这篇关于将整个网页设计为SVG文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！