在Web浏览器中显示SVG


可以通过如下几个方法在Web浏览器(如Chrome,Firefox和IE)中显示SVG:

  • 直接在浏览器中打开SVG文件
  • 将SVG嵌入HTML页面

你也可以通过下面几个方法将SVG图片嵌套在HTML文件中:

  • 使用iframe元素
  • 使用img元素
  • 使用SVG图片作为背景图片
  • 使用svg元素
  • 使用embed元素

教程视频版

如果你喜欢看视频版教程,我在此做了一个链接:

iframe

由于如果你输入SVG图像的URL,浏览器可以显示SVG图像,你也可以在HTML页面中使用iframe标签,引入SVG图像,示例代码如下:

<iframe src="mySvgImage.svg" width="200" height="200" >

img

可以像使用其他类型的图片一样,使用img元素嵌套SVG图片。可以将SVG图片的URL作为img元素的src属性:

<img src="/svg/circle-element-1.jsp">

SVG图片会像其他图片一样,在HTML页面中显示。

SVG作为背景图片

由于浏览器会像处理位图一样处理SVG图像,所以你可以通过CSS来使用SVG图片作为背景图片:

div {
    background-image: url('my-svg-image.svg');
    background-size : 100px 100px;
}

可能需要为SVG图像设置背景大小,以告知浏览器如何缩放。你可以前往我写的关于背景图片的教程(CSS背景图片教程)了解更多。

HTML嵌套svg元素

可以通过在HTML页面中嵌套svg元素来嵌套SVG图片:

<div>
<svg>
    <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
    </svg>
</div>

这里的div元素只是为了表示svg元素可以直接嵌入HTML。虽然svg元素不需要嵌套在div元素中。

使用SVG元素,你可以直接将SVG嵌入HTML页面,而不必将SVG图片保存为单独的文件。你可以为svg元素添加widthheight属性来设置SVG图片的宽度和高度。

使用svg元素,你也可以在浏览器中使用JavaScript直接生成SVG。D3.js库非常适合。jQuery提供的API也可以实现。

在使用svg元素时,你也可以像使用其他HTML元素一样使用CSS为svg和它的子元素添加样式。需要注意的是,SVG元素的某些CSS属性有时会和HTML元素的属性名称不同。

embed

早些时候,你可以使用embed元素嵌套SVG图片。后来,不是所有的浏览器都支持,现如今,我会建议你使用imgsvg元素。下面是一个embed元素的例子:

<embed src="/svg/simple-example-1.jsp"
       width="300" height="220"
       type="image/svg+xml"
       pluginspage="http://www.adobe.com/svg/viewer/install/" />

将此元素放置在你希望SVG图像显示在HTML文件中的位置。src属性应该指向SVG图片的URL。

请注意pluginspage属性,这在不能显示SVG的旧版本的浏览器中是有必要的。这些浏览器需要Adobe的SVG查看器插件来显示图片。在IE7和Firefox3.0.5中,这个属性是不必要的,但是包含它也没什么影响。

宽度和高度

不管你用来嵌套SVG图片的是imgsvgembed元素,你都可以使用widthheight属性设置图片的高度和宽度。如果SVG文件里的图片比设置的宽度更宽,比设置的高度更高,SVG图片只会显示一部分。确保设置足够的宽度和高度来显示完整的SVG图片(或你喜欢显示的大小)。

使用SVG作为HTML元素的背景图片

你也可以使用CSS的background-image属性为HTML元素设置SVG背景图片。可以像其它图片文件一样,指向SVG图片文件。不是所有的浏览器都支持,可以在你想要支持的浏览器里测试下面的代码:

.myCSSClass {
    background: url(/mySvgImage.svg);
}

浏览器支持

IE9及以后的版本能显示SVG。在写作这本书时,Firefox、Chrome、Safari、Opera和Android浏览器也已经能够显示SVG。iOS版的Safari,Opera的mini和移动浏览器已经Android版的Chrome也都支持。

Content Type

如果你浏览器指向的URL以.svg结尾,浏览器会猜测SVG文件的MIME类型。但是,从servlets,JSP,PHP,ASP.NET页面或其它Web应用程序组件生成SVG时,URL结尾可能不总是.svg

要使浏览器仍然将文件解释为SVG文件,你必须将HTTP响应头中Content-Type设置为image/svg+xml

如果你看之前的<embed>元素,你会发现我们设置了type属性。设置<embed>元素的Content-Type对于IE是足够了,但是不针对Firefox。你也必须在HTTP响应中设置响应头的Content-Type字段。

此外,如果你将浏览器直接链接到服务器上的SVG文件,没有<embed>标签让你设置。所以你不得不设置HTTP响应头中的Content-Type。

下面是一个JSP的例子:

<% response.setContentType("image/svg+xml");
%><svg ... >

这种做法和servlets中做法类似。如果你使用除Java之外的一个不同的技术,只需要Google搜索设置HTTP响应的Content-Type的例子。将会有很多这样的例子。

results matching ""

    No results matching ""