I use this svg structure:

& lt;? xml version = "1.0" encoding = "iso-8859-1"? & gt;
        & lt;! DOCTYPE svg PUBLIC "- // W3C // DTD SVG 1.1 // EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
        & lt; svg xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink" version = "1.1" id = "Capa_1" x = "0px" y = "0px" viewBox = "0 0 357 357" style = "enable-background: new 0 0 357 357;" xml: space = "preserve" & gt;
        & lt; g & gt;
          & lt; g id = "arrow" & gt;
            & lt; polygon points = "38.25,0 38.25,357 318.75,178.5" / & gt;
          & lt; / g & gt;
        & lt; / g & gt;
      & lt; / svg & gt;

I connect like this:

& lt; span class = "arrow-svg" & gt;
 & lt; svg & gt;
   & lt; use xlink: href = "# arrow" & gt;
 & lt; / svg & gt;
& lt; / span & gt;

I specify size and color in styles. Not displayed.

How to properly include svg in an element via use ? And how can you make list markers in this way?

Answer 1, authority 100%

Using & lt; use & gt; :

Unfortunately, this method does not work in IE, even in version 11. There is a script that handles matching links for browsers where they don’t work.

Be also careful: in Chrome it is impossible to use filters on such elements. Objects with filters applied both from the inside and to the use element itself also disappear. In addition, objects with filters from external files disappear. This bug they have not been able to resolve for 5 years

& lt; svg height = 0 & gt;
  & lt; g id = "arrow" & gt;
     & lt; polygon points = "38.25,0 38.25,357 318.75,178.5" / & gt;
  & lt; / g & gt;
& lt; / svg & gt;
Test:
& lt; svg & gt;
  & lt; use xlink: href = "# arrow" / & gt;
& lt; / svg & gt;