Should I use <img>, <object>, or <embed> for loading SVG files into a page in a way similar to loading a jpg, gif or png?
What is the code for each to ensure it works as well as possible? (I'm seeing references to including the mimetype or pointing to fallback SVG renderers in my research and not seeing a good state of the art reference).
Assume I am checking for SVG support with Modernizr and falling back (probably doing a replacement with a plain <img> tag)for non SVG-capable browsers.
This will behave much like a GIF image, and if your browser supports declarative animations (SMIL) then those will play.
If you want an interactive svg, use either <iframe> or <object>.
If you need to provide older browsers the ability to use an svg plugin, then use <embed>.
For svg in css background-image and similar properties, modernizr is one choice for switching to fallback images, another is depending on multiple backgrounds to do it automatically:
div {
background-image: url(fallback.png);
background-image: url(your.svg), none;
}
Note: the multiple backgrounds strategy doesn't work on Android 2.3 because it supports multiple backgrounds but not svg.
An additional good read is this blogpost on svg fallbacks.
document.getElementById("svg1").addEventListener("load", function() {
var doc = this.getSVGDocument();
var rect = doc.querySelector("rect"); // suppose our image contains a <rect>
rect.setAttribute("fill", "green");
});
<object> and <embed> have an interesting property: they make it possible to obtain a reference to SVG document from outer document (taking same-origin policy into account). The reference can then be used to animate the SVG, change its stylesheets, etc.
Most current browsers today support the srcset attribute, which allows specifying different images to different users. For example, you can use it for 1x and 2x pixel density, and the browser will select the correct file.
In this case, if you specify an SVG in the srcset and the browser doesn't support it, it'll fallback on the src.
If you need your SVGs to be fully styleable with CSS they have to be inline in the DOM. This can be achieved through SVG injection, which uses Javascript to replace a HTML element (usually an <img> element) with the contents of an SVG file after the page has loaded.
After the image is loaded the onload="SVGInject(this) will trigger the injection and the <img> element will be replaced by the contents of the file provided in the src attribute. This works with all browsers that support SVG.
I would personally use an <svg> tag because if you do you have full control over it. If you do use it in <img> you don't get to control the innards of the SVG with CSS etc.
<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>
Here's a summary of all the ways I could find for inserting SVGs into HTML templates together with their differences and their main pros and cons:
((( 1 )))
/* in CSS */
background-image: url(happy.svg);
This way neither allows JS interaction, nor the CSS itself
could have more fine-grained control on the svg parts.
((( 2 )))
<img src="happy.svg" />
Just like ((( 1 ))), neither allows JS interaction, nor the CSS itself could have more fine-grained control on the svg parts.
Methods ((( 1 ))) and ((( 2 ))) are only fine if you want a static svg.
Note: When using the <img> tag, if you specify a SVG in the srcset attribute and the browser doesn't support it, it'll fallback to the src attribute automatically.
<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>
This method does not have any of the caveats mentioned in ((( 1 ))) and ((( 2 ))), however, this method makes template code messy, and also SVGs are copy pasted, so they will not be in their own individual files.
Using this method the SVG will not be accessible using external CSS, but will be accessible using JavaScript.
((( 5 )))
Use iconfu/svg-inject to keep the SVGs in their own individual files (to keep the template code much cleaner), now add the SVGs using <img> tags, and svg-inject will automatically turn them into inline SVGs, so they will be accessible to both CSS and JavaScript.
Note1: This method works also if imgs are added dynamically (using javascript).
Note2: SVGs added using this method are also cached by browsers just like images.
((( 6 )))
Using a single SVG sprite file, then use <use> tags to insert them. This way is quite flexible too, having the same effect as ((( 5 ))). This method (and a few more) are shown in action in this video.
((( 7 )))
(React-specific way) Turn them into React components (or write a component that loads them).
((( 8 )))
<embed src="happy.svg" />
According to MDN, most modern browsers have deprecated and removed support for browser plug-ins. This means that relying upon <embed> is generally not wise if you want your site to be operable on the average user's browser.
If you use <img> tags, then webkit based browsers won't display embedded bitmapped images.
For any kind of advanced SVG use, including the SVG inline offers by far the most flexibility.
Internet Explorer and Edge will resize the SVG correctly, but you must specify both the height and width.
You can add onclick, onmouseover, etc. inside the svg, to any shape in the SVG: onmouseover="top.myfunction(evt);"
You can also use web fonts in the SVG by including them in your regular style sheet.
Note: if you are exporting SVG's from Illustrator, the web font names will be wrong. You can correct this in your CSS and avoid messing around in the SVG. For example, Illustrator gives the wrong name to Arial, and you can fix it like this:
All this works on any browser released since 2013.
For an example, see ozake.com. The whole site is made of SVG's except for the contact form.
Warning: Web fonts are imprecisely resized in Safari — and if you have lots of transitions from plain text to bold or italic, there may be a small amount of extra or missing space at the transition points. See my answer at this question for more information.
So we could say that there's no reason to use <object> anymore.
However it's still has its pros:
When inspecting (e.g. with Chrome Dev Tools) you are presented with the whole SVG markup in case you wanted to tamper a bit with it and see live changes.
It provides a very robust fallback implementation in case your browser does not support SVGs (wait, but every one of them does!) which also works if the SVG isn't found. This was a key feature of XHTML2 spec, which is like betamax or HD-DVD
But there are also cons:
there isn't an AMP counterpart to <object> (tho it's perfectly safe to use it with <amp-img>and use it inline too.
<img src="./file.svg"/> is better performance than
<div><svg>.....</svg></div>
但如果您想在悬停中分配 css 样式，则必须使用 embed
Based on personal experience, I suggest load svg file by src in image tag that if you have many svg icon or append dynamically on one page, it will slow down and bad performance
<img src="./file.svg"/> is better performance than
<div><svg>.....</svg></div>
but if you want assign css style in hover you must use embed
的一些有趣之处：您可以在 HTML 文档中引用 SVG。最重要的是，您可以重复使用相同的 SVG，而无需重新加载它，而且您还可以将长 SVG 放在底部，并使 HTML 易于阅读。
请注意，viewBox 属性必须位于 标记上。
<svg style="display: none;">
<symbol id="icon-svg" viewBox="0 0 100 100">
<!-- SVG content here -->
<g>
<circle cx="5" cy="5" r="4" stroke="red" />
<circle cx="10" cy="5" r="4" stroke="green" />
<circle cx="20" cy="5" r="4" stroke="blue" />
</g>
</symbol>
</svg>
<!-- Elsewhere in your HTML where you want to use the SVG -->
<svg><use href="#icon-svg"></use></svg>
Something intersting with <symbol>: you can reference an SVG inside the HTML document. The most important thing with this is that you can reuse the same SVG without reloading it, but also you can put long SVG at the bottom and keep your HTML easy to read.
Note that the viewBox attribute have to be on <symbol> tag.
<svg style="display: none;">
<symbol id="icon-svg" viewBox="0 0 100 100">
<!-- SVG content here -->
<g>
<circle cx="5" cy="5" r="4" stroke="red" />
<circle cx="10" cy="5" r="4" stroke="green" />
<circle cx="20" cy="5" r="4" stroke="blue" />
</g>
</symbol>
</svg>
<!-- Elsewhere in your HTML where you want to use the SVG -->
<svg><use href="#icon-svg"></use></svg>
In most circumstances, I recommend using the <object> tag to display SVG images. It feels a little unnatural, but it's the most reliable method if you want to provide dynamic effects.
For images without interaction, the <img> tag or a CSS background can be used.
Inline SVGs or iframes are possible options for some projects, but it's best to avoid <embed>
仅使用 标记会更容易，因为您的代码运行速度会更快，并且您可以直接使用 svg。要仅获取 svg 标签，请复制不带 xml 标签的 svg 文件。结果将是这样的：
<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>
It's easier to just use the <svg> tag because your code will run faster and you are directly using your svg. To get only the svg tag copy the svg file without xml tag. The result will be something like this:
<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>
REMARK-1: the SVG file must contains <?xml?> element. At begin, I have simply created a SVG file that begins directly with <svg> tag and nothing worked !
REMARK-2: at begin, I have tried to insert an image using IMAGE icon of Edit Toolbar. I paste URL of my SVG file but StackOverflow don't accept this method. The <img> tag must be added manually.
发布评论
评论（21）
我可以推荐 SVG Primer（由 W3C 发布），其中涵盖了该主题： http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML
如果您使用
*）好吧，不完全免费，因为有些浏览器会下载这两种资源，请参阅下面拉里的建议以了解如何解决这个问题。
2014 更新：
如果您想要非交互式 svg，请使用带有脚本后备的![]()
为 png 版本（适用于旧版 IE 和 android <3）。一件干净又简单
方法：
这与 GIF 图像非常相似，如果您的浏览器支持声明性动画 (SMIL)，那么这些图像就会播放。
如果您想要交互式 svg，请使用
如果您需要为旧版浏览器提供使用 svg 插件的能力，请使用
。对于 css
background-image中的 svg 和类似属性，modernizr 是切换的一种选择对于后备图像，另一种方法是依赖多个背景来自动执行：<前><代码>div {
背景图像：url(fallback.png);
背景图像：url(your.svg)，无；
}
注意：多背景策略在 Android 2.3 上不起作用，因为它支持多背景但不支持 svg。
另一篇不错的读物是关于 svg 后备的这篇博文。
I can recommend the SVG Primer (published by the W3C), which covers this topic: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML
If you use
<object>then you get raster fallback for free*:*) Well, not quite for free, because some browsers download both resources, see Larry's suggestion below for how to get around that.
2014 update:
If you want a non-interactive svg, use
<img>with script fallbacksto png version (for older IE and android < 3). One clean and simple
way to do that:
<img src="your.svg" onerror="this.src='your.png'">.This will behave much like a GIF image, and if your browser supports declarative animations (SMIL) then those will play.
If you want an interactive svg, use either
<iframe>or<object>.If you need to provide older browsers the ability to use an svg plugin, then use
<embed>.For svg in css
background-imageand similar properties, modernizr is one choice for switching to fallback images, another is depending on multiple backgrounds to do it automatically:Note: the multiple backgrounds strategy doesn't work on Android 2.3 because it supports multiple backgrounds but not svg.
An additional good read is this blogpost on svg fallbacks.
从 IE9 及更高版本，您可以在普通 IMG 标签中使用 SVG。
https://caniuse.com/svg-img< /a>
From IE9 and above you can use SVG in a ordinary IMG tag..
https://caniuse.com/svg-img
然后
您可以执行以下操作：
<object>and<embed>have an interesting property: they make it possible to obtain a reference to SVG document from outer document (taking same-origin policy into account). The reference can then be used to animate the SVG, change its stylesheets, etc.Given
You can then do things like
使用
srcset目前大多数当前浏览器都支持
srcset属性，允许为不同的用户指定不同的图像。例如，您可以将其用于 1x 和 2x 像素密度，浏览器将选择正确的文件。在这种情况下，如果您在
srcset中指定 SVG 并且浏览器不支持它，它将回退到src。与其他解决方案相比，此方法有几个优点：
srcset的浏览器应该知道如何处理它，以便它只下载文件它需要。Use
srcsetMost current browsers today support the
srcsetattribute, which allows specifying different images to different users. For example, you can use it for 1x and 2x pixel density, and the browser will select the correct file.In this case, if you specify an SVG in the
srcsetand the browser doesn't support it, it'll fallback on thesrc.This method has several benefits over other solutions:
srcsetshould know how to handle it so that it only downloads the file it needs.如果您需要 SVG 完全可以使用 CSS 进行样式设置，那么它们必须内联在 DOM 中。这可以通过 SVG 注入来实现，即在页面加载后使用 Javascript 将 HTML 元素（通常是
![]()
这是使用 SVGInject 的最小示例：
加载图像后
onload="SVGInject (this)将触发注入，并且![]()
src属性中提供的文件内容替换。所有支持 SVG 的浏览器免责声明：我是 SVGInject 的共同作者
If you need your SVGs to be fully styleable with CSS they have to be inline in the DOM. This can be achieved through SVG injection, which uses Javascript to replace a HTML element (usually an
<img>element) with the contents of an SVG file after the page has loaded.Here is a minimal example using SVGInject:
After the image is loaded the
onload="SVGInject(this)will trigger the injection and the<img>element will be replaced by the contents of the file provided in thesrcattribute. This works with all browsers that support SVG.Disclaimer: I am the co-author of SVGInject
最好的选择是在不同的设备上使用 SVG 图像:)
The best option is to use SVG Images on different devices :)
我个人会使用
标记，因为如果您这样做，您就可以完全控制它。如果您在![]()
另一件事是 浏览器支持。
只需打开您的
svg文件并将其直接粘贴到模板中即可。然后在你的CSS中你可以简单地例如：
一些资源： SVG Tips
I would personally use an
<svg>tag because if you do you have full control over it. If you do use it in<img>you don't get to control the innards of the SVG with CSS etc.another thing is browser support.
Just open your
svgfile and paste it straight into the template.then in your css you can simply eg:
Some resource: SVG tips
以下是我能找到的将 SVG 插入 HTML 模板的所有方法的总结，以及它们的差异和主要优缺点：
((( 1 )))
这种方式既不允许 JS 交互，也不允许CSS 本身
可以对 svg 部件进行更细粒度的控制。
((( 2 )))
就像 ((( 1 ))) 一样，既不允许 JS 交互，CSS 本身也无法对 svg 部分进行更细粒度的控制。
仅当您想要静态 svg 时，方法 ((( 1 ))) 和 ((( 2 ))) 才适用。
注意：使用
![]()
srcset属性中指定 SVG 并且浏览器不支持它，它将回退到 < code>src 自动属性。((( 3 )))
此方法没有 ((( 1 ))) 和 ((( 2 ))) 中提到的任何警告，但是，此方法使模板代码变得混乱，而且 SVG 是复制粘贴的，因此它们不会位于自己的单独文件中。
((( 4 )))
或者：
使用此方法，SVG 将无法使用外部 CSS 访问，但可以使用 JavaScript 访问。
((( 5 )))
使用 iconfu/svg-inject 来将 SVG 保留在自己的单独文件中（以保持模板代码更加清晰），现在使用
![]()
注意1：如果动态添加
img（使用javascript），此方法也适用。注2：使用此方法添加的 SVG 也会像图像一样被浏览器缓存。
((( 6 )))
使用单个 SVG 精灵文件，然后使用
标签插入它们。这种方式也很灵活，和(((5)))效果一样。 此视频中展示了此方法（以及其他一些方法）的实际操作。((( 7 )))
（React 特定方式）将它们变成 React 组件（或编写一个加载它们的组件）。
((( 8 )))
根据 MDN 的说法，大多数现代浏览器已弃用并删除了对浏览器插件的支持。这意味着，如果您希望您的网站可以在普通用户的浏览器上运行，那么依赖
通常并不明智。Here's a summary of all the ways I could find for inserting SVGs into HTML templates together with their differences and their main pros and cons:
((( 1 )))
This way neither allows JS interaction, nor the CSS itself
could have more fine-grained control on the svg parts.
((( 2 )))
Just like ((( 1 ))), neither allows JS interaction, nor the CSS itself could have more fine-grained control on the svg parts.
Methods ((( 1 ))) and ((( 2 ))) are only fine if you want a static svg.
Note: When using the
<img>tag, if you specify a SVG in thesrcsetattribute and the browser doesn't support it, it'll fallback to thesrcattribute automatically.((( 3 )))
This method does not have any of the caveats mentioned in ((( 1 ))) and ((( 2 ))), however, this method makes template code messy, and also SVGs are copy pasted, so they will not be in their own individual files.
((( 4 )))
OR:
Using this method the SVG will not be accessible using external CSS, but will be accessible using JavaScript.
((( 5 )))
Use iconfu/svg-inject to keep the SVGs in their own individual files (to keep the template code much cleaner), now add the SVGs using
<img>tags, and svg-inject will automatically turn them into inline SVGs, so they will be accessible to both CSS and JavaScript.Note1: This method works also if
imgs are added dynamically (using javascript).Note2: SVGs added using this method are also cached by browsers just like images.
((( 6 )))
Using a single SVG sprite file, then use
<use>tags to insert them. This way is quite flexible too, having the same effect as ((( 5 ))). This method (and a few more) are shown in action in this video.((( 7 )))
(React-specific way) Turn them into React components (or write a component that loads them).
((( 8 )))
According to MDN, most modern browsers have deprecated and removed support for browser plug-ins. This means that relying upon
<embed>is generally not wise if you want your site to be operable on the average user's browser.如果您使用![]()
标签，则基于 webkit 的浏览器将不会显示嵌入的位图图像。
对于任何类型的高级 SVG 使用，包括 SVG 内联提供了迄今为止最大的灵活性。
Internet Explorer 和 Edge 将正确调整 SVG 的大小，但您必须指定高度和宽度。
您可以在 svg 内将 onclick、onmouseover 等添加到 SVG 中的任何形状：onmouseover="top.myfunction(evt);"
您还可以在 SVG 中使用网络字体，方法是将它们包含在常规样式表中。
注意：如果您从 Illustrator 导出 SVG，则 Web 字体名称将会错误。您可以在 CSS 中更正此问题，并避免在 SVG 中造成混乱。例如，Illustrator 为 Arial 提供了错误的名称，您可以像这样修复它：
所有这些都适用于自 2013 年以来发布的任何浏览器。
有关示例，请参阅 ozake.com。 除了联系人之外，整个网站均由 SVG 组成形式。
警告：Web 字体在 Safari 中的大小调整不精确 - 如果您有大量从纯文本到粗体或斜体的过渡，则过渡点处可能会有少量额外或缺失的空间。有关详细信息，请参阅我在此问题中的回答信息。
If you use <img> tags, then webkit based browsers won't display embedded bitmapped images.
For any kind of advanced SVG use, including the SVG inline offers by far the most flexibility.
Internet Explorer and Edge will resize the SVG correctly, but you must specify both the height and width.
You can add onclick, onmouseover, etc. inside the svg, to any shape in the SVG: onmouseover="top.myfunction(evt);"
You can also use web fonts in the SVG by including them in your regular style sheet.
Note: if you are exporting SVG's from Illustrator, the web font names will be wrong. You can correct this in your CSS and avoid messing around in the SVG. For example, Illustrator gives the wrong name to Arial, and you can fix it like this:
All this works on any browser released since 2013.
For an example, see ozake.com. The whole site is made of SVG's except for the contact form.
Warning: Web fonts are imprecisely resized in Safari — and if you have lots of transitions from plain text to bold or italic, there may be a small amount of extra or missing space at the transition points. See my answer at this question for more information.
我的两分钱：截至 2019 年，93% 的正在使用的浏览器（以及每个浏览器的最后两个版本的 100%）可以处理
![]()
来源：我可以使用
所以我们可以说没有理由再使用
但是它仍然有它的优点：
在检查时（例如使用 Chrome 开发工具），您会看到整个 SVG 标记，以防您想稍微篡改它并看到实时变化。
它提供了一个非常强大的后备实现，以防您的浏览器不支持 SVG（等等，但每个浏览器都支持！），如果找不到 SVG，它也可以工作。这是 XHTML2 规范的一个关键特性，就像 betamax 或 HD-DVD
但是也有缺点：
对应的 AMP object>（尽管与My two cents: as of 2019, 93% of browsers in use (and 100% of the last two version of every one of them) can handle SVG in
<img>elements:Source: Can I Use
So we could say that there's no reason to use
<object>anymore.However it's still has its pros:
When inspecting (e.g. with Chrome Dev Tools) you are presented with the whole SVG markup in case you wanted to tamper a bit with it and see live changes.
It provides a very robust fallback implementation in case your browser does not support SVGs (wait, but every one of them does!) which also works if the SVG isn't found. This was a key feature of XHTML2 spec, which is like betamax or HD-DVD
But there are also cons:
<object>(tho it's perfectly safe to use it with<amp-img>and use it inline too.<object>tag might keep your PWA from being really offline capable.尽管 w3schools 不推荐
标签，但它是使我的带有混合图案和蒙版的 svg 在 Chrome 中工作的唯一因素：而 Firefox 则很好，
Chrome 没有渲染渐变：
两个浏览器中的
Even though w3schools does not recommend the
<embed>tag, it was the only thing that made my svg with mixed pattern and mask working in Chrome:Whereas Firefox was fine with
Chrome did not render the gradient:
The same with
<object>and<img>in both browsers.找到了一种纯 CSS 且无需双图像下载的解决方案。它并不像我想要的那样美丽，但它有效。
这个想法是插入具有后备样式的特殊 SVG。
您可以在 我的博客。
Found one solution with pure CSS and without double image downloading. It is not beautiful as I want, but it works.
The idea is to insert special SVG with fallback style.
More details and testing process you can find in my blog.
根据个人经验，我建议在图像标签中通过 src 加载 svg 文件，如果您有很多 svg 图标或在一页上动态附加，它会减慢速度并且性能不佳，
但如果您想在悬停中分配 css 样式，则必须使用 embed
Based on personal experience, I suggest load svg file by src in image tag that if you have many svg icon or append dynamically on one page, it will slow down and bad performance
but if you want assign css style in hover you must use embed
请注意，
viewBox属性必须位于Something intersting with
<symbol>: you can reference an SVG inside the HTML document. The most important thing with this is that you can reuse the same SVG without reloading it, but also you can put long SVG at the bottom and keep your HTML easy to read.Note that the
viewBoxattribute have to be on<symbol>tag.在大多数情况下，我建议使用
对于没有交互的图像，可以使用
![]()
内联 SVG 或 iframe 是某些项目的可能选择，但最好避免
但如果您想使用 SVG 内容，例如
，请使用嵌入的 SVG
In most circumstances, I recommend using the
<object>tag to display SVG images. It feels a little unnatural, but it's the most reliable method if you want to provide dynamic effects.For images without interaction, the
<img>tag or a CSS background can be used.Inline SVGs or iframes are possible options for some projects, but it's best to avoid
<embed>But if you want to play with SVG stuff like
Go with the embedded one
此 jQuery 函数捕获 svg 图像中的所有错误，并用备用扩展名替换文件扩展名
请打开控制台以查看加载图像 svg 时出错
This jQuery function captures all errors in svg images and replaces the file extension with an alternate extension
Please open the console to see the error loading image svg
仅使用
标记会更容易，因为您的代码运行速度会更快，并且您可以直接使用 svg。要仅获取 svg 标签，请复制不带 xml 标签的 svg 文件。结果将是这样的：It's easier to just use the
<svg>tag because your code will run faster and you are directly using your svg. To get only the svg tag copy the svg file without xml tag. The result will be something like this:您可以使用
![]()
我的 PC 上有以下 SVG 文件
我已将此图像上传到 https://svgur.com
上传终止后，我获得了以下 URL：
然后我手动 (不使用 IMAGE 图标）添加了以下 html 标签
，结果就在下面
使用
data:image对于有疑问的用户，可以看到我在编辑以下答案时所做的操作 关于 StackOverflow 插入 SVG 图像
备注-1：SVG 文件必须包含
< ?xml?>元素。一开始，我只是创建了一个直接以标签开头的 SVG 文件，但没有任何效果！REMARK-2：一开始，我尝试使用
编辑工具栏的IMAGE图标插入图像。我粘贴了 SVG 文件的 URL，但 StackOverflow 不接受此方法。必须手动添加![]()
我希望这个答案可以帮助其他用户。
You can insert a SVG indirectly using
<img>HTML tag and this is possible on StackOverflow following what is described below:I have following SVG file on my PC
I have uploaded this image to https://svgur.com
After upload was terminated, I have obtained following URL:
I have then MANUALLY (without using IMAGE icon) added following html tag
and the result is just below
Using
data:imageFor user with some doubt, it is possible to see what I have done in editing following answer on StackOverflow inserting SVG image
REMARK-1: the SVG file must contains
<?xml?>element. At begin, I have simply created a SVG file that begins directly with<svg>tag and nothing worked !REMARK-2: at begin, I have tried to insert an image using
IMAGEicon ofEdit Toolbar. I paste URL of my SVG file but StackOverflow don't accept this method. The<img>tag must be added manually.I hope that this answer can help other users.
我建议使用以下组合
I recommend using the combination of
对我来说，一个简单的替代方法是将 svg 代码插入到 div 中。这个简单的示例使用 javascript 来操作 div insideHTML。
An easy alternative that works for me is to insert the svg code into a div. This simple example uses javascript to manipulate the div innerHTML.