3

в чем проблема,почему некоторые элементы просто залиты? У меня предположение, что это из-за того ,что они конвертировны из 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 '>', so replace it.
    .pipe(replace('>', '>'))
    // 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/'));});

как есть и как должно быть

Код иконки

<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>
2
  • Скорее всего, у них было в атрибутах указано что-то вроде fill="#FFFFFF", а после работы плагина эти атрибуты выпилились. Посмотрите на код иконок до и после. 7 апр 2017 в 14:22
  • @SashaOmelchenko, так же, вот остальные
    –  Ristek
    7 апр 2017 в 14:41

3 ответа 3

3

Действительно была виновата иконка, а не gulp-svg-sprite.
На мой взгляд - это плохая практика рисовать векторное изображение в растровом редакторе, а затем плагином фотошопа переводить из растра в вектор.
Поэтому и получился очень странный код с запутанными стилями, с присвоением классов каждой строчке и уникальными идентификаторами на русском языке.
К счастью они не использовались, поэтому иконка отображалась.
Почистил этот весь мусор, оптимизировал код вручную, так как автоматические оптимизаторы тут не сработали бы, из-за "оригинальности" кода.

Вывод:

Для векторных изображений используйте только векторные редакторы, например Incscape, Adobe Illustrator и другие SVG редакторы.

Ниже код, что получилось в итоге, сравните с исходным кодом

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

Попробуйте убрать: fill:none; и получите картинку, которую привели в вопросе. Вот это и случилось после обработки 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>

Еще один довод за - выбирать иконки с простым, читаемым кодом, чтобы после варки спрайта можно было-бы разобраться и внести незначительные корректировки.

2
  • не сработало, после компиляции попробовал вообще стили удалить из иконок никаких изменений и да у мня же написно какие атрибуты нужно удалить , почему оно их не удалило вовсе?
    –  Ristek
    8 апр 2017 в 7:19
  • @Ristek что у вас могло не получиться? Берете код 1:1 иконки, которую я вам доработал и добавляете в HTML страничку. Ниже есть пример, как это делается. Если у вас другие иконки с подобным кодом, то им ничего не поможет, дорабатывайте вручную или ищите новые. 8 апр 2017 в 7:36
2

Интересно было бы посмотреть файлы иконок. Все беды идут почти всегда из-за того, что файлы иконок рисуют люди, которые не знают, что их будут варить спрайты.
Легко определить, если иконка имеет большой вес, значит она сделана с помощью, так называемой "лепки" в Inscape а не чистыми линиями path
Выход один,- искать другие иконки, либо рисовать самому.
Но это предположение. Несите код иконки и сразу станет понятно - иконка виновата или надо искать дальше.

5
  • 1
    скинул код иконки
    –  Ristek
    7 апр 2017 в 14:36
  • @Ristek да-а-а такого я еще не видел Спасибо :-) Уникальные идентификаторы на русском языке?? Код забрал, посмотрю. еще внимательней. Видимо у вас в настройках gulp-sprite , что-то не так. Не должно быть русского языка id="aФигура_96_копия_3" 7 апр 2017 в 16:37
  • иконки рисовал не я) и они рисовали их просто конвертировали в svg, поэтому так, а в настройках все в порядке. Если не отнимет у вас много времени, давайте я вам на почту напишу , а там созвонимся и посмотрим
    –  Ristek
    7 апр 2017 в 17:13
  • @Ristek поправлю вам иконку, просто из спортивного интереса Но сначала мне надо доделать свои дела. Ждите либо сегодня поздно вечером, либо завтра до обеда. И еще,- просто ради общего развития, напишите в какой программе рисовали, чем конвертировали ваши поставщики. Если очень хочется мне написать, посмотрите в моем профиле мой сайт, там и напишите на почту. 7 апр 2017 в 17:35
  • вроде отправилось, а что касается программ,то фотошоп иконку сохраняли в свг формате
    –  Ristek
    7 апр 2017 в 17:47
1

После варки спрайта с несколькими иконками должен в идеале получиться такой файл:

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

Тег <symbol> .... </symdol> нужен для того, чтобы не показывать изображения раньше времени. viewBox внутри него нужен для корректировки масштаба каждой по отдельности иконки. Cм. хороший ответ @Sasha Omelchenko на эту тему.
Далее полученный svg файл спрайта добавляется в Html страничку одним из способов. Предпочтительный вариант - через тег <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>    

Вторая строчка - <img src.. это для браузеров не понимающих SVG.

Далее добавляете фрагменты спрайта и добавляете в разных местах Html странички.

<svg xmlns="http://www.w3.org/2000/svg"   
xmlns:xlink="http://www.w3.org/1999/xlink" >

<use xlink:href="#Sprite.svg#facebook" />

</svg>
4
  • я так и сделал, заменил код иконки, но ничего не поменялось и почему не удалились мои атрибуты
    –  Ristek
    8 апр 2017 в 7:44
  • @Ristek так не надо мою иконку заново компиллировать еще раз, она готова к употреблению :) берите мой код иконки и вставляйте её в свой проект, как показано выше. 8 апр 2017 в 7:48
  • я не компилировал я вставил ее вместо своей, ничего не поменялось
    –  Ristek
    8 апр 2017 в 7:50
  • @Ristek но ниже всё работает, иконка нормально отражается, я специально привел два варианта иконки рабочий и не рабочий и указал причину закрашивания черным крыльев здания Всё просто, когда параметр fill не указан у замкнутых фигур, то он по умолчанию закрашивается чёрным, поэтому в стилях надо писать fill:none 8 апр 2017 в 7:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.