我应该使用<img>, <object>,或<embed>加载SVG文件到页面的方式类似于加载jpg, gif或png?
每一个代码是什么,以确保它工作得尽可能好?(在我的研究中,我看到了包括mimetype或指向备用SVG渲染器的参考,但没有看到一个良好的艺术状态参考)。
假设我正在使用Modernizr检查SVG支持,并退回到不支持SVG的浏览器(可能使用普通的<img>标记进行替换)。
我应该使用<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间接使用<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>标签需要手动添加。
我希望这个答案可以帮助其他用户。
使用srcset
目前大多数浏览器都支持srcset属性,它允许为不同的用户指定不同的图像。例如,您可以使用它的1x和2x像素密度,浏览器将选择正确的文件。
在这种情况下,如果您在srcset中指定了SVG,而浏览器不支持它,它将退回到src。
<img src="logo.png" srcset="logo.svg" alt="My logo">
与其他解决方案相比,这种方法有几个优点:
它不依赖于任何奇怪的黑客或脚本 它很简单 您仍然可以包含alt文本 支持srcset的浏览器应该知道如何处理它,以便它只下载所需的文件。
最好的选择是在不同的设备上使用SVG图像:)
<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">
以下是我所能找到的将svg插入HTML模板的所有方法的总结,以及它们的区别和主要优缺点:
(((1)))
/* in CSS */
background-image: url(happy.svg);
这种方式既不允许JS交互,也不允许CSS本身 可以对SVG部分进行更细粒度的控制。
(((2)))
<img src="happy.svg" />
就像(((1)))一样,既不允许JS交互,也不允许CSS本身对svg部分有更细粒度的控制。
方法(((1)))和(((2)))只适用于需要静态svg。
注意:当使用<img>标记时,如果您在srcset属性中指定了SVG,而浏览器不支持它,它将自动回退到src属性。
<img src="logo.png" srcset="logo.svg" alt="my logo">
(((3)))
<div>
<!-- Paste the SVG code directly here. -->
<svg>...</svg>
<!-- AKA an inline svg -->
<!-- would be the same if is created and appended using JavaScript. -->
</div>
此方法没有(((1)))和(((2))中提到的任何警告,但是,此方法使模板代码混乱,并且svg是复制粘贴的,因此它们不会在自己的单独文件中。
((4))
<object data="happy.svg" width="300" height="300"></object>
OR:
<object data="your.svg" type="image/svg+xml">
<img src="yourfallback.jpg" />
</object>
使用这种方法,SVG将不能使用外部CSS访问,但可以使用JavaScript访问。
((5))
使用iconfu/svg-inject将svg保存在它们自己的单独文件中(以使模板代码更加清晰),现在使用<img>标记添加svg, svg-inject将自动将它们转换为内联svg,因此CSS和JavaScript都可以访问它们。
注1:如果动态添加imgs(使用javascript),此方法也有效。
注2:使用此方法添加的svg也会像图像一样被浏览器缓存。
((6))
使用单个SVG精灵文件,然后使用<use>标记插入它们。这种方式也非常灵活,具有与(((5))相同的效果。这个视频中展示了这个方法(以及其他一些方法)。
((7))
(React特有的方式)将它们转换为React组件(或编写一个加载它们的组件)。
((8))
<embed src="happy.svg" />
根据MDN的说法,大多数现代浏览器已经弃用并删除了对浏览器插件的支持。这意味着如果您希望站点在普通用户的浏览器上可操作,那么依赖<embed>通常是不明智的。