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

Question

I would like to know more about svg and I have a question.

For exemple, I've export a shape with Illustrator as html code so I have this :

<?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>

And I want to know the difference between using svg with code like this and using an image.svg ?

Answer 1

Inline SVG would allow you to target parts of your SVG with CSS:

.svg {
  fill: #fff;
}

This is not possible if the SVG was brought in with an <img> tag.

Here's a post from CSS Tricks that talks about the many different ways you can use SVGs: https://css-tricks.com/using-svg/

Answer 2

It would be best to use inline svg as @restlessbit points out, because you have more control over the style.

For example, changing background colors, adding path colors and even adding text to an SVG can be done when adding SVG inline.

Here is a post that illustrates some of these mentioned benefits to using inline SVG in case you wanted some more info: https://viget.com/extend/getting-started-with-inline-svg