Who faced the next problem?

There are social icons. networks, in the format of svg. Drawn in Illustrator. Here is an example code for one of the icons:

picture 1

This is how it should look like:

picture 2

With gulp-svg-sprite, gulp-svgmin, gulp-cheerio, gulp-replace I create a sprite and paste it into html:

picture 3

When the build starts and the page opens in the browser, I see the following picture:

picture 4

It turns out that the circle and the icon inside the circle are completely covered in black.
The problem is that when you change the styles of the icon (fill-opacity, stroke and stroke-width), both objects change (circle and logo inside the circle):

picture 5

If you insert inline, the icon is displayed correctly.
If you delete all styles in the svg code, and add a line to the top that points to the external style sheet <?xml-stylesheet type="text/css" href="..."?> , Then the fill is still there.

How to correctly make a normal display of the icon?

  • Please write the code out with the text - kizoso
  • one
    Well, I will continue to lay out the code text. - Niyaz

2 answers 2

  • You have to add sprite to HTML with object :

     <object type="image/svg+xml" data="sprite.svg"> Your browser does not support SVG </object>`

  • Then you can call icons from the sprite inside HTML:

     <div> <svg viewBox="0 0 57 57"> <use xlink:href="#dribble" ></use> </svg> </div> <div> <svg viewBox="0 0 57 57"> <use xlink:href="#facebook" ></use> </svg> </div>

    upd Sprite has already been added to the DOM, so it is not necessary to specify it when calling icons.

You did the right thing by pointing the link to the external style sheet in the sprite

 <?xml-stylesheet type="text/css" href="..."?>

You did the right thing to remove the styles from the sprite, as the internal styles of the SVG commands have the highest priority compared to the styles in the external and internal CSS tables

  • Add forced inheritance to the external style sheet:

     svg path { fill:inherit; stroke:inherit; }

You can now manage icon styles from an external CSS table.

  • Thank you for your reply! Unfortunately, the problem was not solved, apparently I am doing something wrong. I added sprite to HTML using object. <object type="image/svg+xml" data="img/icons/symbol/sprite.svg"> Your browser does not support SVG </object> <svg class="dribbble" viewBox="0 0 57 57"> <use xlink:href="#dribbble"></use> </svg> Added forced inheritance to the external CSS table, as you wrote. But the result is the following joxi.ru/12MExlah4WJQZ2 When you try to manage the styles of icons from the external CSS table, nothing happens. What could I be wrong? - Niyaz

He wrote the answer to the question in the comments - not entered. Therefore, I am making out how, a separate answer, maybe there will be additional questions on adjustment, I will answer here.

  • Try to bring the object out from under the <a> tag, it should be added to HTML, DOM, as an independent element.
  • But when calling icons, you can already wrap svg in tags <a> <svg> <use>.. </use> </svg> </a>

  • The external style sheet that manages svg is better placed in the same directory as the Index HTML file, Chrome particularly sensitive to this
    You can make it specifically for SVG and then through the import add to the main style sheet.

  • See other sprite answers. The guys sooner or later everything turned out.

    https://ru.stackoverflow.com/questions/tagged/svg-%d1%81%d0%bf%d1%80%d0%b0%d0%b9%d1%82

  • Alexandr_T Thank you so much for the detailed explanation !!! Everything worked out. - Niyaz
  • @Niyaz happy for you! Contact, I will help if I can :-) For me, where exactly was the hitch? - Alexandr_TT
  • one
    Alexandr_T rendered <object> separately, and inside the <a> tag already called <svg>. The snag was in <object>) - Niyaz