我是否使用<img>， <object>，或<embed>用于SVG文件?

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

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

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

当前回答

使用<svg>标记更容易，因为您的代码将运行得更快，并且您直接使用svg。要获得只有svg标记，复制svg文件不带xml标记。结果会是这样的:

<svg fill="#000000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 16 16" width="64px" height="64px"><path d="M 4.5 2 C 3.675781 2 3 2.675781 3 3.5 L 3 14.484375 L 8 10.820313 L 13 14.484375 L 13 3.5 C 13 2.675781 12.324219 2 11.5 2 Z M 4.5 3 L 11.5 3 C 11.78125 3 12 3.21875 12 3.5 L 12 12.515625 L 8 9.578125 L 4 12.515625 L 4 3.5 C 4 3.21875 4.21875 3 4.5 3 Z"/></svg>

2022-05-07 06:08:34

其他回答

您可以插入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>标签需要手动添加。

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

2020-01-06 07:39:24

从IE9和以上版本，你可以在普通的IMG标签中使用SVG ..

https://caniuse.com/svg-img

<img src="/static/image.svg">

2013-08-14 23:29:18

最好的选择是在不同的设备上使用SVG图像:)

<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">

2015-11-07 15:52:09

找到了一个纯CSS解决方案，没有双重图像下载。它没有我想要的那么漂亮，但很好用。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <style type="text/css">
     .nicolas_cage {
         background: url('nicolas_cage.jpg');
         width: 20px;
         height: 15px;
     }
     .fallback {
     }
    </style>
  </head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
    <style>
    <![CDATA[ 
        .fallback { background: none; background-image: none; display: none; }
    ]]>
    </style>
</svg>

<!-- inline svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
  <switch>
     <circle cx="20" cy="20" r="18" stroke="grey" stroke-width="2" fill="#99FF66" />
     <foreignObject>
         <div class="nicolas_cage fallback"></div>
     </foreignObject>
  </switch>
</svg>
<hr/>
<!-- external svg -->
    <object type="image/svg+xml" data="circle_orange.svg">
        <div class="nicolas_cage fallback"></div>
    </object>
</body>
</html>

其思想是插入具有回退样式的特殊SVG。

更多的细节和测试过程可以在我的博客中找到。

2014-10-26 20:17:14

以下是我所能找到的将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>通常是不明智的。

2022-07-28 16:45:50

我是否使用<img>， <object>，或<embed>用于SVG文件?

推荐文章

最新文章

标签