基础知识

Content Type

⚠️ 您必须设置响应的Content-Type HTTP标头

image/svg+xml

浏览器支持兼容性

Internet Explorer 9及以后版本可以本机显示SVG。在写本文时，Firefox、Chrome、Safari、Opera和Android浏览器已经能够原生地显示SVG有一段时间了。iOS版的Safari、Opera的迷你和移动浏览器，以及Android版的Chrome也都是如此。

SVG 在Web中显示

在Web浏览器（例如Chrome，Firefox和Internet Explorer）中显示SVG可以通过浏览器指向SVG文件的URL，将SVG嵌入HTML页面，使用iframe元素，使用img元素等方法

在Web浏览器（例如Chrome，Firefox和Internet Explorer）中显示SVG可以通过以下几种方式完成:

浏览器指向SVG文件的URL.
将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图像也是如此。您可以在img元素的src属性中写入SVG图片的URL ，如下所示:

<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元素

使用SVG元素嵌入SVG图像可以直接在HTML页面中嵌入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元素添加宽度width和height高度属性来设置SVG图像的宽度和高度。

通过使用svg元素，还可以在浏览器中使用JavaScript直接生成svg。D3 JavaScript API非常擅长于此。jQuery JavaScript API也可以做到这一点。

使用svg元素，您还可以使用CSS对svg及其子元素进行样式设置，就像您对任何其他HTML所做的那样。注意，SVG元素的某些CSS属性的名称有时与HTML元素的名称不同。

embed

在SVG的早期，您可以使用embed元素嵌入SVG图像。那时，并不是所有浏览器都支持SVG。今天，我建议使用img或svg元素。这里是一个实例嵌入元素的历史原因的实例:

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

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

请注意pluginspage属性。这对于不能原生显示SVG的旧浏览器来说是必要的。这些浏览器需要Adobe的SVG浏览器插件来显示图像。在Internet Explorer 7和Firefox 3.0.5中，这个属性是不必要的，但包含它也无妨。

svg图片在浏览器或小程序中不显示