如何在HTML中使用SVG圖標？

Question

我有一個帶有3個圖標的svg文件。

當我通過<img>標籤導入它時，我得到了3個圖標，一個在另一個下面。 我想在一行中使用圖標，一個在另一個旁邊。 如何分別使用它們？

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

謝謝！

Answer 1

我不確定你的意思是垂直還是水平，但是這裏是我從Codepen.io發現的東西，它有很多SVG樣本可能需要經過。

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

他在這裏有SVG的一排垂直排列。

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

Answer 2

可以使用片段標識符在任何特定img元件來顯示SVG文件的一部分。

這種方法的優點是，在你的SVG文件的「個體精靈」在您的SVG文件因此使用它在其他地方你不需要知道內部結構的任何事情時定義，你可以問你想要什麼名字：

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

最跨平臺兼容的解決方案是增加一些SVG view S的定義，以顯示其ID片斷圖像的哪一部分。視圖語法類似於根SVG元件*的全球viewBox屬性：

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

這裏的一個good blog post（與a live example）這解釋了非常詳細的技術。

_{*請注意，我沒有計算出您的SVG的viewBox值，您必須自己弄明白。}

Answer 3

將SVG文件用作精靈。

創建的圖標大小的元素，隱藏溢出：

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

位置的元素內的SVG所以圖標顯示通過：

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

演示（使用內聯SVG代替鏈接的<img>，這打破了目的，但在這裏更容易演示）：

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