Como é que uso ícones SVG em HTML?

tenho um ficheiro svg com 3 ícones.

quando o importo através da marca <img>, fico com os 3 Ícones um por baixo do outro. Quero usar os ícones de seguida, um ao lado do outro. Como posso usá-los separadamente?

O .ficheiro svg: 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, 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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16.3px"
     height="26.9px" viewBox="0 0 16.3 26.9" enable-background="new 0 0 16.3 26.9" xml:space="preserve">
<g id="bg">
</g>
<g id="ui">
    <g>
        <polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3         "/>
        <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8 
            3.8,26 4.6,21.3 1.1,18 6,17.3       "/>
    </g>
</g>
<g id="pop_ups">
</g>
</svg>
Obrigado!

 12
htmlcsssvg
Author: Rick Smith, 2015-08-26
Source

3 answers

Use o ficheiro SVG como uma imagem.

Criar um elemento do tamanho de um ícone, escondendo o excesso: 

.icon {
    display: inline-block;
    width: 16.3px;
    height: 13.45px;
    overflow: hidden;
}

Posicione o SVG dentro do elemento para que o ícone apareça através de: 

.icon > img {
    position: relative;
}
.darkStar > img {
    top: 0;
}
.lightStar > img {
    top: -13.45px;
}

Demo (usando SVG incorporado em vez de um <img> ligado, o que derrota o propósito, mas é mais fácil de demo aqui): 

.icon {
    display: inline-block;
    width: 16.3px;
    height: 13.45px;
    overflow: hidden;
}
.icon > svg {
    position: relative;
}
.darkStar > svg {
    top: 0;
}
.lightStar > svg {
    top: -13.45px;
}
<span class="icon lightStar">
    <svg width="16.3px" height="26.9px">
        <polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3" />
        <polygon points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8 3.8,26 4.6,21.3 1.1,18 6,17.3" fill="none" stroke="#000000" stroke-miterlimit="10" />
    </svg>
</span>
<span class="icon darkStar">
    <svg width="16.3px" height="26.9px">
        <polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3" />
        <polygon points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8 3.8,26 4.6,21.3 1.1,18 6,17.3" fill="none" stroke="#000000" stroke-miterlimit="10" />
    </svg>
</span>
 7
Author: gilly3, 2015-08-26 23:17:03

Pode usar Os identificadores de fragmentos para mostrar apenas uma parte do ficheiro SVG em qualquer elemento em particular img.

A vantagem desta abordagem é que as" imagens individuais " no seu ficheiro SVG estão definidas no seu ficheiro SVG , por isso, ao usá-lo noutro local, não precisa de saber nada sobre a estrutura interna, pode apenas perguntar o que deseja pelo nome: 

<button>
  <img src="x.svg#star1" alt="*">
</button>

A solução mais compatível com plataformas é adicionar alguns SVG view que definem qual parte da imagem a mostrar para qual fragmento de ID. A sintaxe da vista é semelhante ao atributo global viewBox do elemento root SVG*: 

<view id="star1" viewBox="0 0 10 10"/>

Aqui está um bom post no blog (com um exemplo ao vivo) que explica a técnica em grande detalhe.

*note que eu não calculei esse valor viewBox para o seu SVG, você terá que descobrir por si mesmo.

 4
Author: Jeremy, 2015-08-26 23:22:10
Não tenho a certeza se queres dizer vertical ou horizontalmente, mas aqui está uma coisa que encontrei. Codepen.io que tem muitas amostras de SVG que talvez queiras analisar.

Http://codepen.io/jonnowitts/pen/waONVV

Aqui ele tem o SVG alinhado verticalmente numa fila. 
  <button type="button" id="positive">
    <div class="content">
      <svg xmlns="http://www.w3.org/2000/svg" width="25" height="42" viewBox="-9 0 38 40" preserveAspectRatio="xMidYMid meet">
        <path class="check" fill="none" d="M0 20 L8 28 L25 10" stroke="white" stroke-width="3"/>
      </svg>
      <span>Positive</span>
    </div>
  </button>
  <button id="negative">
    <div class="content">
      <svg xmlns="http://www.w3.org/2000/svg" width="25" height="42" viewBox="-9 0 38 40" preserveAspectRatio="xMidYMid meet">
        <path class="cross-1" fill="none" d="M0 10 L20 30" stroke="white" stroke-width="3"/>
        <path class="cross-2" fill="none" d="M20 10 L0 30" stroke="white" stroke-width="3"/>
      </svg>
      <span>Negative</span>
    </div>
  </button>

  <button id="warning">
    <div class="content">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="42" viewBox="-3 0 38 40" preserveAspectRatio="xMidYMid meet">
        <polygon class="triangle"
                 stroke="white"
                 stroke-width="2"
                 fill="none"
                 points="15,4 0,34 30,34"
                 />
        <path class="exclaim-1" d="M15 14 L15 22 Z" stroke-width="4" stroke="white" fill="none" />
        <path class="exclaim-2" d="M15 24 L15 29 Z" stroke-width="4" stroke="white" fill="none" />
      </svg>
      <span>Warning</span>
    </div>
  </button>
 3
Author: teachtyler, 2015-08-26 22:31:34