svg 路径和 image.svg 之间的区别答案

【问题标题】：Difference between svg path and an image.svgsvg 路径和 image.svg 之间的区别
【发布时间】：2015-12-18 15:20:33
【问题描述】：

我想了解更多关于 svg 的信息，但我有一个问题。

例如，我用 Illustrator 将形状导出为 html 代码，所以我有这个：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 600" enable-background="new 0 0 1920 600" xml:space="preserve">
<g>
    <polygon fill="none" stroke="#B24539" points="0,297 0,379.3 26.9,346.1  "/>
</g>

我想知道使用带有这样的代码的 svg 和使用 image.svg 之间的区别？

【问题讨论】：

那不是导出为html，而是导出为svg。
@taxicala 但是这两种使用方式有很大区别吗？

标签： html image svg

【解决方案1】：

内联 SVG 将允许您使用 CSS 定位 SVG 的某些部分：

.svg {
  fill: #fff;
}

如果 SVG 是通过 <img> 标签引入的，这是不可能的。

这里有一篇来自 CSS Tricks 的帖子，讨论了使用 SVG 的多种不同方式：https://css-tricks.com/using-svg/

【讨论】：

【解决方案2】：

正如@restlessbit 指出的那样，最好使用内联svg，因为您可以更好地控制样式。

例如，更改背景颜色、添加路径颜色甚至添加文本到 SVG 都可以在添加 SVG 内联时完成。

如果您想了解更多信息，这里有一篇文章说明了使用内联 SVG 的一些上述好处：https://viget.com/extend/getting-started-with-inline-svg

【讨论】：

最好用自己的话总结一下链接中的内容。如果链接失效，您的答案目前的用处将大大降低。