CSS: SVG sprite не работает

Я хочу объединить все значки SVG в одном спрайте и называть его из CSS, как в других случаях фонового изображения. Но это не показано на странице. При открытии SVG изображения в браузере я получаю эту ошибку http://gyazo.com/814ab252f2c104caf10fcef2d2f1d057 CSS: SVG sprite не работает

HTML

<div class="col-md-12 col-xs-12 input-group"> 
     <span class="input-group-addon login-icon icon-banner"> 
      <i class="icons icon-username"></i> 
     </span>   
    </div>

Css

.icons{ 
    height: 20px; 
    width: 20px; 
    display: inline-block; 
    background:url('../images/icons/icons.svg') no-repeat; 
}

Это SVG изображение http://gyazo.com/25f8140160e3cb27b850a9b2916492f3

SVG разметка

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 17.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="126.099px" height="93.106px" viewBox="0 0 126.099 93.106" enable-background="new 0 0 126.099 93.106" 
    xml:space="preserve"> 
<g id="Page-1" sketch:type="MSPage"> 
    <g id="Icons" transform="translate(-188.000000, -371.000000)" sketch:type="MSArtboardGroup"> 
     <path id="Username" sketch:type="MSShapeGroup" fill="#F16059" d="M254.34,387.458c-0.067-0.743-0.045-1.249-0.045-1.913 
      c0.349-0.18,0.967-1.294,1.069-2.228c0.27-0.022,0.697-0.27,0.821-1.283c0.068-0.54-0.191-0.844-0.36-0.934 
      c0.439-1.283,1.361-5.231-1.699-5.636c-0.315-0.529-1.125-0.799-2.171-0.799c-4.196,0.079-4.702,3.038-3.78,6.435 
      c-0.169,0.09-0.428,0.394-0.36,0.934c0.124,1.013,0.551,1.26,0.821,1.283c0.101,0.934,0.743,2.048,1.091,2.228 
      c0,0.664,0.034,1.17-0.045,1.913c-0.821,2.137-6.424,1.08-6.682,5.209h18C260.741,388.538,255.173,389.595,254.34,387.458"/> 
    </g> 
</g> 
<g id="Page-1_1_" sketch:type="MSPage"> 
    <g id="Icons_1_" transform="translate(-188.000000, -371.000000)" sketch:type="MSArtboardGroup"> 
     <path id="Username_1_" sketch:type="MSShapeGroup" fill="#C8C7C7" d="M203.34,387.458c-0.067-0.743-0.045-1.249-0.045-1.913 
      c0.349-0.18,0.967-1.294,1.069-2.228c0.27-0.022,0.697-0.27,0.821-1.283c0.068-0.54-0.191-0.844-0.36-0.934 
      c0.439-1.283,1.361-5.231-1.699-5.636c-0.315-0.529-1.125-0.799-2.171-0.799c-4.196,0.079-4.702,3.038-3.78,6.435 
      c-0.169,0.09-0.428,0.394-0.36,0.934c0.124,1.013,0.551,1.26,0.821,1.283c0.101,0.934,0.743,2.048,1.091,2.228 
      c0,0.664,0.034,1.17-0.045,1.913c-0.821,2.137-6.424,1.08-6.682,5.209h18C209.741,388.538,204.173,389.595,203.34,387.458"/> 
    </g> 
</g> 
<g id="Page-1_2_" sketch:type="MSPage"> 
    <g id="Icons_2_" transform="translate(-188.000000, -371.000000)" sketch:type="MSArtboardGroup"> 
     <path id="Username_2_" sketch:type="MSShapeGroup" fill="#37424E" d="M229.007,387.459c-0.067-0.743-0.045-1.249-0.045-1.913 
      c0.349-0.18,0.967-1.294,1.069-2.228c0.27-0.022,0.697-0.27,0.821-1.283c0.068-0.54-0.191-0.844-0.36-0.934 
      c0.439-1.283,1.361-5.231-1.699-5.636c-0.315-0.529-1.125-0.799-2.171-0.799c-4.196,0.079-4.702,3.038-3.78,6.435 
      c-0.169,0.09-0.428,0.394-0.36,0.934c0.124,1.013,0.551,1.26,0.821,1.283c0.101,0.934,0.743,2.048,1.091,2.228 
      c0,0.664,0.034,1.17-0.045,1.913c-0.821,2.137-6.424,1.08-6.682,5.209h18C235.408,388.539,229.84,389.597,229.007,387.459"/> 
    </g> 
</g> 
<g id="Page-1_3_" sketch:type="MSPage"> 
    <g id="Icons_3_" transform="translate(-190.000000, -408.000000)" sketch:type="MSArtboardGroup"> 
     <path id="Password" sketch:type="MSShapeGroup" fill="#C8C7C7" d="M208.975,444.215h-0.898v-2.197 
      c0-2.769-2.277-5.021-5.077-5.021c-2.799,0-5.077,2.253-5.077,5.021v2.197h-0.898c-0.29,0-0.525,0.233-0.525,0.519v9.743 
      c0,0.287,0.235,0.52,0.525,0.52h11.95c0.29,0,0.525-0.233,0.525-0.52v-9.743C209.5,444.447,209.265,444.215,208.975,444.215 
      L208.975,444.215z M203.819,450.145v2.074c0,0.181-0.148,0.328-0.332,0.328h-0.974c-0.183,0-0.332-0.147-0.332-0.328v-2.074 
      c-0.362-0.254-0.599-0.672-0.599-1.145c0-0.774,0.635-1.402,1.418-1.402c0.783,0,1.418,0.628,1.418,1.402 
      C204.418,449.473,204.181,449.891,203.819,450.145L203.819,450.145z M205.653,444.215h-5.306v-2.197 
      c0-1.447,1.19-2.624,2.653-2.624c1.463,0,2.653,1.177,2.653,2.624V444.215L205.653,444.215z"/> 
    </g> 
</g> 
<g id="Page-1_4_" sketch:type="MSPage"> 
    <g id="Icons_4_" transform="translate(-190.000000, -408.000000)" sketch:type="MSArtboardGroup"> 
     <path id="Password_1_" sketch:type="MSShapeGroup" fill="#37424E" d="M234.642,444.215h-0.898v-2.197 
      c0-2.769-2.277-5.021-5.077-5.021c-2.799,0-5.077,2.253-5.077,5.021v2.197h-0.898c-0.29,0-0.525,0.233-0.525,0.519v9.743 
      c0,0.287,0.235,0.52,0.525,0.52h11.95c0.29,0,0.525-0.233,0.525-0.52v-9.743C235.167,444.448,234.932,444.215,234.642,444.215 
      L234.642,444.215z M229.486,450.145v2.074c0,0.181-0.148,0.328-0.332,0.328h-0.974c-0.183,0-0.332-0.147-0.332-0.328v-2.074 
      c-0.362-0.254-0.599-0.672-0.599-1.145c0-0.774,0.635-1.402,1.418-1.402s1.418,0.628,1.418,1.402 
      C230.085,449.473,229.848,449.891,229.486,450.145L229.486,450.145z M231.32,444.215h-5.306v-2.197 
      c0-1.447,1.19-2.624,2.653-2.624s2.653,1.177,2.653,2.624V444.215L231.32,444.215z"/> 
    </g> 
</g> 
<g id="Page-1_5_" sketch:type="MSPage"> 
    <g id="Icons_5_" transform="translate(-190.000000, -408.000000)" sketch:type="MSArtboardGroup"> 
     <path id="Password_2_" sketch:type="MSShapeGroup" fill="#F16059" d="M259.975,444.215h-0.898v-2.197 
      c0-2.769-2.277-5.021-5.077-5.021c-2.799,0-5.077,2.253-5.077,5.021v2.197h-0.898c-0.29,0-0.525,0.233-0.525,0.519v9.743 
      c0,0.287,0.235,0.52,0.525,0.52h11.95c0.29,0,0.525-0.233,0.525-0.52v-9.743C260.5,444.448,260.265,444.215,259.975,444.215 
      L259.975,444.215z M254.819,450.145v2.074c0,0.181-0.148,0.328-0.332,0.328h-0.974c-0.183,0-0.332-0.147-0.332-0.328v-2.074 
      c-0.362-0.254-0.599-0.672-0.599-1.145c0-0.774,0.635-1.402,1.418-1.402c0.783,0,1.418,0.628,1.418,1.402 
      C255.418,449.473,255.181,449.891,254.819,450.145L254.819,450.145z M256.653,444.215h-5.306v-2.197 
      c0-1.447,1.19-2.624,2.653-2.624c1.463,0,2.653,1.177,2.653,2.624V444.215L256.653,444.215z"/> 
    </g> 
</g> 
</svg>

Может ли кто-нибудь помочь в этом?

источник

2015-03-09 FrontDev

Хочет загрузить его, но SO не разрешает загружать изображение SVG – FrontDev

@FrontDev - Просто добавьте разметку. Не нужно ничего загружать. –

Ах, пожалуйста, см. Мое обновление выше – FrontDev

Попробуйте удалить любой атрибут, где написано sketch:type="..." на весь код svg.

источник

2015-03-09 16:27:54

Работы, спасибо! В любом случае, можете ли вы рассказать, как я могу удалить эти параметры перед сохранением в Illustrator? – FrontDev

Я подозреваю, что эти атрибуты не были помещены в Illustrator. Возможно, вы импортировали файл из «Эскиза»? –

Честно говоря, у меня нет большого опыта в этом :(просто были значки SVG, которые объединяются в иллюстраторе и сохраняются как SVG – FrontDev

CSS: SVG sprite не работает

ответ

Смежные вопросы