I use the following svg structure:

 <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <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"> <g> <g id="arrow"> <polygon points="38.25,0 38.25,357 318.75,178.5" /> </g> </g> </svg>

I connect this way:

 <span class="arrow-svg"> <svg> <use xlink:href="#arrow"> </svg> </span>

In the styles I specify the size and color. Not displayed.

How to connect the svg in the element through use ? And how can you make list markers in this way?

    1 answer 1

    Use of <use> :

    Unfortunately, this method does not work in IE, even in version 11. There is a script that processes the corresponding links for browsers where they do not work.

    Also be careful: in Сhrome it is impossible to use filters on such elements. Objects with filters applied both from inside and to the use element itself also use . In addition, objects with filters from external files disappear. This bug they can not solve for 5 years

     <svg height=0 > <g id="arrow"> <polygon points="38.25,0 38.25,357 318.75,178.5" /> </g> </svg> Тест: <svg> <use xlink:href="#arrow"/> </svg>

    If svg is in an external file, you need to specify the path to it:

     <!-- `<use>` внутри документа --> <svg viewBox="0 0 100 100"> <use xlink:href="#icon-1"></use> </svg> <!-- `<use>` во внешнем файле--> <svg viewBox="0 0 100 100"> <use xlink:href="path/to/defs.svg#icon-1"></use> </svg>

    Use <use> and CSS styling:

     .marker use{ fill:red; } 
     <svg height=0 > <g id="arrow"> <polygon points="38.25,0 38.25,357 318.75,178.5" /> </g> </svg> Тест: <span class="marker"> <svg> <use xlink:href="#arrow"/> </svg> </span>

    Using <svg> as an inline image in CSS:

    There is a more cross-platform method. List markers can be done like this:

     .arrow { background: url('data:image/svg+xml,%3Csvg%20%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20%20viewBox=%22-2%20-2%2022%2044%22%20width=%2220%22%20height=%2240%22%3E%3Cpath%20d=%22M%2010,0%200,20%2010,40%22%20style=%22fill:none;fill-rule:evenodd;stroke:#CCCCCC;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1%22%20/%3E%3Cpath%20d=%22M%2020,0%2010,20%2020,40%22%20%20%20%20style=%22fill:none;fill-rule:evenodd;stroke:#CCCCCC;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1%22%20/%3E%3C/svg%3E'); width: 20px; height: 40px; } 
     <div class=arrow></div>

    SVG encoded via encodeURI:

     console.log(encodeURI('<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 22 44" width="20" height="40"><path d="M 10,0 0,20 10,40" style="fill:none;fill-rule:evenodd;stroke:#CCCCCC;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /><path d="M 20,0 10,20 20,40" style="fill:none;fill-rule:evenodd;stroke:#CCCCCC;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /></svg>'))

    The resulting is placed in the CSS in this way:

      background: url('data:image/svg+xml,[код картинки]')
    • "the element must be defined in <defs> and not somewhere it is not clear where:" the point is that I want to place svg , for example, at the beginning of the document and call it in different elements throughout the html page. is it possible - Marina Voronova
    • @MarinaVoronova Tested, pasted the code in response, also works. Something is wrong with you, maybe there is an error somewhere - Crantisz
    • Can I make list markers inline style without encoding? just svg has a different color, I want to be able to set the color in css - Marina Voronova
    • @MarinaVoronova added in reply - Crantisz
    • Thanks, helped to figure it out. but the markers could not be done in this way, I’ll probably have a picture - Marina Voronova