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

Question

我想知道更多关于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之间的区别吗？

Answer 1

内联SVG允许您使用CSS定位SVG的各个部分：

.svg {
  fill: #fff;
}

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

这是CSS Tricks的帖子，其中讨论了可以使用SVG的多种不同方式： https : //css-tricks.com/using-svg/

Answer 2

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

例如，当内联添加SVG时，可以更改背景颜色，添加路径颜色，甚至向SVG添加文本。

这是一篇文章，阐述了在需要更多信息的情况下使用内嵌SVG的一些上述好处： https : //viget.com/extend/getting-started-with-inline-svg