我应该使用<img>, <object>,或<embed>加载SVG文件到页面的方式类似于加载jpg, gif或png?

每一个代码是什么,以确保它工作得尽可能好?(在我的研究中,我看到了包括mimetype或指向备用SVG渲染器的参考,但没有看到一个良好的艺术状态参考)。

假设我正在使用Modernizr检查SVG支持,并退回到不支持SVG的浏览器(可能使用普通的<img>标记进行替换)。


当前回答

我建议使用的组合

<svg viewBox="" width="" height="">
<path fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>

其他回答

这个jQuery函数捕获svg图像中的所有错误,并将文件扩展名替换为另一个扩展名

请打开控制台查看加载图像svg的错误

(函数(美元){ 美元(img)。(“错误”,函数(){ Var image = $(this).attr('src'); 如果(/(\.svg)$/i。测试(图像)){ (美元)。Attr ('src', image.replace('.svg', '.png')); } }) }) (jQuery); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < img src = " https://jsfiddle.net/img/logo.svg " >

我建议使用的组合

<svg viewBox="" width="" height="">
<path fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>

您可以插入SVG间接使用<img> HTML标签,这是可能的StackOverflow如下所述:

我的电脑上有以下SVG文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="350" viewBox="0 0 350 350">

  <title>SVG 3 Circles Intersection </title>

    <circle cx="110" cy="110" r="100"
            stroke="red"
            stroke-width="3"
            fill="none"
            />
    <text x="110" y="110" 
          text-anchor="middle"
          stroke="red"
          stroke-width="1px"
          > Label
    </text>
    <circle cx="240" cy="110" r="100" 
            stroke="blue" 
            stroke-width="3"
            fill="none"
            />
    <text x="240" y="110" 
          text-anchor="middle" 
          stroke="blue" 
          stroke-width="1px"
          > Ticket
    </text>
    <circle cx="170" cy="240" r="100" 
            stroke="green" 
            stroke-width="3" 
            fill="none"
            />
    <text x="170" y="240" 
          text-anchor="middle" 
          stroke="green" 
          stroke-width="1px"
          > Vecto
    </text>
</svg>

我已经把这张照片上传到https://svgur.com

上传终止后,我获得了以下URL:

https://svgshare.com/i/kyc.svg

然后我手动(不使用图像图标)添加以下html标签

<img src='https://svgshare.com/i/kyc.svg' title='Intersection of 3 Circles'/>

结果就在下面

使用数据:形象

对于有疑问的用户,可以看到我在插入SVG图像的StackOverflow上编辑以下答案所做的工作

备注-1:SVG文件必须包含<?xml?>元素。在开始时,我只是简单地创建了一个SVG文件,直接以< SVG >标记开始,但什么都不起作用!

备注-2:在开始时,我已经尝试使用编辑工具栏的image图标插入图像。我粘贴我的SVG文件的URL,但StackOverflow不接受这个方法。<img>标签需要手动添加。

我希望这个答案可以帮助其他用户。

根据个人经验,我建议在image tag中通过src加载svg文件,如果一个页面上有很多svg图标或动态追加,会变慢,性能变差

<img src="./file.svg"/> is better performance than 

<div><svg>.....</svg></div>

但是如果你想在hover中指定CSS样式,你必须使用embed

使用srcset

目前大多数浏览器都支持srcset属性,它允许为不同的用户指定不同的图像。例如,您可以使用它的1x和2x像素密度,浏览器将选择正确的文件。

在这种情况下,如果您在srcset中指定了SVG,而浏览器不支持它,它将退回到src。

<img src="logo.png" srcset="logo.svg" alt="My logo">

与其他解决方案相比,这种方法有几个优点:

它不依赖于任何奇怪的黑客或脚本 它很简单 您仍然可以包含alt文本 支持srcset的浏览器应该知道如何处理它,以便它只下载所需的文件。