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