After processing gulp-svg-sprite, icons are incorrectly displayed.

Question

what's the problem, why are some elements just flooded? I have a suggestion that this is due to the fact that they are convertible from Ph.

gulp.task('svgSprite', function () { return gulp.src('app/svg/*.svg') // minify svg .pipe(svgmin({ js2svg: { pretty: true } })) // remove all fill, style and stroke declarations in out shapes .pipe(cheerio({ run: function ($) { $('[fill]').removeAttr('fill'); $('[stroke]').removeAttr('stroke'); $('[style]').removeAttr('style'); }, parserOptions: {xmlMode: true} })) // cheerio plugin create unnecessary string '&gt;', so replace it. .pipe(replace('&gt;', '>')) // build svg sprite .pipe(svgSprite({ mode: { symbol: { sprite: "../sprite.svg", render: { scss: { dest:'_sprite.scss', template: "app/sass/_sprite-tmp.scss" } } } } })) .pipe(gulp.dest('app/sprites/'));});

Icon code

 <symbol viewBox="0 0 62 38.5" id="dd-1"> <defs> <style> .acls-1{opacity:.6}.acls-2,.acls-3{fill:none;stroke:#000;stroke-width:1px}.acls-3{fill-rule:evenodd} </style> </defs> <g id="aторговый" class="acls-1"> <path id="aПрямоугольник_22" data-name="Прямоугольник 22" class="acls-2" d="M.5 14h18v8H.5z"/> <path id="aПрямоугольник_22_копия" data-name="Прямоугольник 22 копия" class="acls-2" d="M.5 21h18v8H.5z"/> <path id="aПрямоугольник_22_копия_2" data-name="Прямоугольник 22 копия 2" class="acls-2" d="M43.5 21h18v8h-18z"/> <path id="aФигура_87" data-name="Фигура 87" class="acls-3" d="M682 77v-1h26v1h-26z" transform="translate(-663.5 -55)"/> <path id="aФигура_88" data-name="Фигура 88" class="acls-3" d="M682 70a23.828 23.828 0 0 1 12-3 30.611 30.611 0 0 1 13 3" transform="translate(-663.5 -55)"/> <path id="aФигура_89" data-name="Фигура 89" class="acls-3" d="M682 83s4.362 2 12 2a40.779 40.779 0 0 0 13-2" transform="translate(-663.5 -55)"/> <path id="aФигура_90" data-name="Фигура 90" class="acls-3" d="M682 89s2.289 3 9 3" transform="translate(-663.5 -55)"/> <path id="aФигура_92" data-name="Фигура 92" class="acls-3" d="M690 59h1v34h-1V59z" transform="translate(-663.5 -55)"/> <path id="aФигура_92_копия" data-name="Фигура 92 копия" class="acls-3" d="M697 59h1v34h-1V59z" transform="translate(-663.5 -55)"/> <path id="aФигура_92_копия_2" data-name="Фигура 92 копия 2" class="acls-3" d="M703 60h1v32h-1V60z" transform="translate(-663.5 -55)"/> <path id="aФигура_92_копия_3" data-name="Фигура 92 копия 3" class="acls-3" d="M685 60h1v32h-1V60z" transform="translate(-663.5 -55)"/> <path id="aФигура_93" data-name="Фигура 93" class="acls-3" d="M682 70h-1v-7h1v7z" transform="translate(-663.5 -55)"/> <path id="aФигура_94" data-name="Фигура 94" class="acls-3" d="M708 70h-1v-7h1v7z" transform="translate(-663.5 -55)"/> <path id="aФигура_95" data-name="Фигура 95" class="acls-3" d="M681 63s1.75-4 13-4 14 4 14 4" transform="translate(-663.5 -55)"/> <path id="aФигура_96" data-name="Фигура 96" class="acls-3" d="M670 70h1v13h-1V70z" transform="translate(-663.5 -55)"/> <path id="aФигура_96_копия" data-name="Фигура 96 копия" class="acls-3" d="M676 70h1v13h-1V70z" transform="translate(-663.5 -55)"/> <path id="aФигура_96_копия_2" data-name="Фигура 96 копия 2" class="acls-3" d="M712 70h1v13h-1V70z" transform="translate(-663.5 -55)"/> <path id="aФигура_96_копия_3" data-name="Фигура 96 копия 3" class="acls-3" d="M718 70h1v13h-1V70z" transform="translate(-663.5 -55)"/> <path id="aФигура_97" data-name="Фигура 97" class="acls-3" d="M681 63h-1v-4h1v4z" transform="translate(-663.5 -55)"/> <path id="aФигура_98" data-name="Фигура 98" class="acls-3" d="M709 63h-1v-4h1v4z" transform="translate(-663.5 -55)"/> <path id="aФигура_99" data-name="Фигура 99" class="acls-3" d="M680 60s1.958-4.484 14-4.484S709 60 709 60" transform="translate(-663.5 -55)"/> <path id="aФигура_91" data-name="Фигура 91" class="acls-3" d="M707 90s-1.215 3-10 3" transform="translate(-663.5 -55)"/> <path id="aПрямоугольник_21" data-name="Прямоугольник 21" class="acls-2" d="M.5 14h18v21H.5z"/> <path id="aПрямоугольник_21_копия" data-name="Прямоугольник 21 копия" class="acls-2" d="M43.5 14h18v21h-18z"/> </g> </symbol>

Most likely, they had something like attributes fill="#FFFFFF" in the attributes, and after the plugin worked, these attributes were cut out.

Alexandr_TT Alexandr_TT 34.3k eleven 42 158 · Accepted Answer · 2017-04-08T06:53:40

The icon was really to blame, not gulp-svg-sprite .
In my opinion, it is a bad practice to draw a vector image in a raster editor, and then to convert a photoshop plugin from raster to vector.
Therefore, we have a very strange code with confusing styles, with the assignment of classes to each line and unique identifiers in Russian.
Fortunately, they were not used, so the icon was displayed.
I cleaned all this garbage, optimized the code manually, as automatic optimizers would not work here, because of the "originality" of the code.

Conclusion:

For vector images, use only vector editors such as Incscape , Adobe Illustrator and other SVG editors.

Below is the code that came out as a result, compare with the source code.

 <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 62 38.5" > <defs> <style> .acls-1 {fill:none; stroke:#656565; } </style> </defs> <g class="acls-1" > <path d="M.5 14h18v8H.5M.5 21h18v8H.5M43.5 21h18v8h-18M.5 14h18v21H.5z" /> <path d="M43.5 14h18v21h-18z"/> </g> <g class="acls-1" transform="translate(-663.5 -55)"> <path d="M682 77v-1h26v1h-26z" /> <path d="M682 70a23.828 23.828 0 0 1 12-3 30.611 30.611 0 0 1 13 3" /> <path d="M682 83s4.362 2 12 2a40.779 40.779 0 0 0 13-2" /> <path d="M682 89s2.289 3 9 3" /> <path d="M690 59h1v34h-1V59z" /> <path d="M697 59h1v34h-1V59z" /> <path d="M703 60h1v32h-1V60z" /> <path d="M685 60h1v32h-1V60z" /> <path d="M682 70h-1v-7h1v7z" /> <path d="M708 70h-1v-7h1v7z" /> <path d="M681 63s1.75-4 13-4 14 4 14 4" /> <path d="M670 70h1v13h-1V70z" /> <path d="M676 70h1v13h-1V70z" /> <path d="M712 70h1v13h-1V70z" /> <path d="M718 70h1v13h-1V70z" /> <path d="M681 63h-1v-4h1v4z" /> <path d="M709 63h-1v-4h1v4z" /> <path d="M680 60s1.958-4.484 14-4.484S709 60 709 60" /> <path d="M707 90s-1.215 3-10 3" /> </g> </svg>

Try removing: fill:none ; and get the picture that resulted in the question. That's what happened after processing gulp-svg-sprite

  $('[fill]').removeAttr('fill'); $('[stroke]').removeAttr('stroke'); $('[style]').removeAttr('style');

 <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 62 38.5" > <defs> <style> .acls-1 { stroke:#656565; } </style> </defs> <g class="acls-1" transform="translate(-663.5 -55)"> <path d="M682 77v-1h26v1h-26z" /> <path d="M682 70a23.828 23.828 0 0 1 12-3 30.611 30.611 0 0 1 13 3" /> <path d="M682 83s4.362 2 12 2a40.779 40.779 0 0 0 13-2" /> <path d="M682 89s2.289 3 9 3" /> <path d="M690 59h1v34h-1V59z" /> <path d="M697 59h1v34h-1V59z" /> <path d="M703 60h1v32h-1V60z" /> <path d="M685 60h1v32h-1V60z" /> <path d="M682 70h-1v-7h1v7z" /> <path d="M708 70h-1v-7h1v7z" /> <path d="M681 63s1.75-4 13-4 14 4 14 4" /> <path d="M670 70h1v13h-1V70z" /> <path d="M676 70h1v13h-1V70z" /> <path d="M712 70h1v13h-1V70z" /> <path d="M718 70h1v13h-1V70z" /> <path d="M681 63h-1v-4h1v4z" /> <path d="M709 63h-1v-4h1v4z" /> <path d="M680 60s1.958-4.484 14-4.484S709 60 709 60" /> <path d="M707 90s-1.215 3-10 3" /> </g> <g class="acls-1" > <path d="M.5 14h18v8H.5M.5 21h18v8H.5M43.5 21h18v8h-18M.5 14h18v21H.5z" /> <path d="M43.5 14h18v21h-18z"/> </g> </svg>

Another reason for choosing icons with simple, readable code, so that after sprite boiling it is possible to figure out and make minor adjustments.

It didn’t work, after compiling I tried to remove any changes from the icons in general, and yes, I’m written what attributes should be removed, why didn't it remove them at all?
Take the 1: 1 code of the icon, which I have refined to you and add to the HTML page.
If you have other icons with a similar code, then nothing will help them, modify it manually or look for new ones.

Alexandr_TT Alexandr_TT 34.3k eleven 42 158 · Answer 2 · 2017-04-07T14:25:46

It would be interesting to see the icon files. All the troubles are almost always due to the fact that the icon files are drawn by people who do not know that they will be cooked by sprites.
It is easy to determine if the icon has a lot of weight, then it is made using the so-called "sculpting" in Inscape and not pure lines path
Only one way out - look for other icons, or draw yourself.
But this is an assumption. Carry the code of the icon and it will immediately become clear - the icon is to blame or you need to look further.

@Ristek da-aa I haven’t seen such a thing yet. Thank you :-) Unique identifiers in Russian ??
Apparently you have something wrong with the gulp-sprite settings.
There should be no Russian language id = "aFigura_96_kopiya_3"
I did not draw the icons) and they drew them simply converted to svg, therefore, and everything is fine in the settings.
If you don’t take a lot of time from you, let me write to you in the mail, and then we will call
@Ristek will fix you the icon, just for fun. But first I need to finish my business.
And also, just for the sake of common development, write in which program you drew, what your suppliers converted.
If you really want me to write, look at my site in my profile, and write there on the mail.
It seems to have gone, and as for the programs, the photoshop icon was saved in the SVG format

Community spirit ♦ one · Answer 3 · 2017-04-08T07:31:09

After booting the sprite with a few icons, this file should ideally be:

 <svg xmlns="http://www.w3.org/2000/svg" width="630" height="126" xmlns:xlink="http://www.w3.org/1999/xlink" > <symbol id="facebook" viewBox="245 0 126 126" > <!-- Здесь код иконки "facebook" --> <path ... /> </symbol> <symbol id="google" viewBox="122 0 126 126" > <!-- Здесь код иконки "google" --> <path ... /> </symbol> <symbol id="linkedin" viewBox=" 0 0 126 126" > <path .... /> </symbol> <symbol id="twitter" viewBox=" -122 0 126 126" > <path ... /> </symbol> <symbol id="vimeo" viewBox=" -245 0 126 126" > <path .../> </symbol> </svg>

The <symbol> .... </symdol> needed in order not to display images ahead of time. viewBox inside it is needed to adjust the scale of each individual icon. See good answer @Sasha Omelchenko on this topic.
Next, the resulting svg sprite file is added to the Html page in one of the ways. The preferred option is via the <object>

 <object type="image/svg+xml" data="Sprite.svg" width="200" height="200"> <img src="Sprite.png" width="200" height="200" alt="image format png" /> </object>

The second line is <img src.. this is for browsers that do not understand SVG.

Next, add sprite fragments and add Html pages in different places.

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <use xlink:href="#Sprite.svg#facebook" /> </svg>

I did so, replaced the icon code, but nothing changed and why my attributes did not go away
@Ristek so do not need to re-compile my icon again, it is ready to use :) take my icon code and paste it into your project, as shown above.
I did not compile I inserted it in my place, nothing has changed
@Ristek but everything works below, the icon is normally reflected, I deliberately cited two options for the worker and non-work icons and indicated the reason for painting the black wings of a building need to write fill: none

After processing gulp-svg-sprite, icons are incorrectly displayed.

3 answers 3

Conclusion:

More articles: