Question

我是SVG世界的新手，刚开始尝试今天。我正在尝试创建一个移动网站，其中主要图形都是可扩展的，从而支持所有显示分辨率。

我为我的输入创建了一个svg文件（当前type =“image”），令人惊讶的是结果与我的代码编辑器（Coda）中的结果一样。在测试（移动Safari，DT Safari和DT FF）时，输入显示损坏的图像路径占位符（誓言是正确的，因为我可以右键单击下载文件）。

如何在（html5）文档中包含我的SVG文件？

Answer 1

见Using SVG in background-image。用于在输入中放置背景图像的CSS与任何其他元素相同：

input { background-image:url('foo.svg') }

Answer 2

<img src="mysvg.svg ...

目前所有浏览器渲染引擎都不支持。或者，我是否应该说人们使用的浏览器不支持它。

1＆GT;替代方案是xml内联或html内联作为xml文档提供...当我输入时也不能很好地支持。

2 - ;嵌入，

3＆GT;对象

4＆GT; iframe（在下载页面时导致性能下降）

5个谷歌的svgweb也可以使用;我没有尝试过使用svgweb作为背景图层，尽管它应该可以正常工作。

如果你没有做比图像更复杂的事情，没有脚本等等。几乎每个浏览器都能正确显示SVGWeb。它使用VML包含对旧版IE浏览器的支持，在可用时使用本机支持，最后但并非最不重要的是使用闪存接口来显示SVG。

“更复杂”的难点在于浏览器具有基本的本机支持，不支持svgweb可以执行的操作，并且您希望执行这些浏览器不支持的操作。然后你需要强制闪光模式。

http://code.google.com/p/svgweb/

Answer 3

您还可以包含SVG内联，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <h2>Red Circle via SVG</h2>
        <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
            <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
        </svg>
    </body>
</html>

在Win 7上，IE 9，FF 5和Chrome 12支持这种功能，但Safari 5不支持。

不可否认，这不是背景图片，但您可以使用一些CSS来解决这个问题。

编辑：安德斯问道，“你如何使用这个'内联'svg作为背景图片？” LMGTFY，安德斯。这是一个答案：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            span { position: absolute; }    
            span.svg { z-index: -1; }
        </style>
    </head>
    <body>
        <h2>Red Circle via SVG</h2>
        <div>
            <span>
                <p>Use CSS to position the circle and put it in the background "behind" the text.</p>
            </span>
        </div>
        <div>
            <span class="svg">
                <svg id="svgelem" height="100"  xmlns="http://www.w3.org/2000/svg">
                    <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
                </svg>
            </span>
        </div>
    </body>
</html>

以下是Win 7上的Chrome 41呈现方式：

enter image description here

如何将SVG文件包含为<input />背景

3 个答案: