可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm a newbie to the SVG world, just started experimenting today. I'm trying to create a mobile site where the primary graphics are all scalable, thus supporting all display resolutions.

I created an svg file for my input (currently type="image"), and suprisingly the results are as expected in my code editor (Coda). In testing (mobile Safari, DT Safari and DT FF), the input displays broken image path placeholder (the oath is correct because I can right-click to download the file).

How do I go about including my SVG file in the (html5) document?

回答1:

See Using SVG in background-image. The CSS for placing a background image in an input is the same as for any other element:

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

回答2:

<img src="mysvg.svg ...

Is not currently supported across all browsers rendering engines. Or, should I say it is not supported by the browsers that people are using.

1> Alternatives are xml inline or html inline delivered as an xml document ... also not well supported as I type this.

2> Embed,

3> object

4> iframe (causes a small performance hit as page is downloaded)

5> Google's svgweb can also be used; I have not attempted to use svgweb as a background layer, although it should work fine.

If you are not doing anything more complex than an image, No scripts etc etc. SVGWeb would display correctly across almost every browser. It uses VML to include support with older IE browsers, uses native support when available, and last but not least uses a flash interface to display the SVG.

The "more complex" difficulty is when browsers have basic native support that does not include what svgweb can do and you want to do things not supported by those browser. Then you need to force flash mode.

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

回答3:

You can also include SVG inline, like so:

<!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>

This is supported in IE 9, FF 5, and Chrome 12, but not Safari 5, on Win 7.

Admittedly, this is not a background image, but you could use some CSS to fix that.

Edit: Anders asks, "How would you use this 'inline' svg as a background image?" LMGTFY, Anders. Here's one answer:

<!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>

Here's how Chrome 41 on Win 7 renders it: