SVG上載

Question

超大我作爲一個SVG我用一個簡單的搜索圖標，但由於某些原因，當我加載我的網頁，它儘管在CSS並在的24x24鎖巨大SVG本身的造型。

它展開並佔用整個頁面，直到所有內容完成加載，然後它將捕捉到正常的大小。這看起來非常荒謬，我知道我必須做錯什麼。有任何想法嗎？

SVG：

<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<defs> 
    <symbol id="icon-search" class="icon" viewBox="0 0 24 24"> 
     <title>search</title> 
     <circle class="st0" cx="9.3" cy="9.2" r="8.6" /> 
     <line class="st1" x1="15.3" y1="15.4" x2="23.3" y2="23.4" /> 
    </symbol> 
</defs> 

HTML：

<div class="searchContainer"> 
    <div class="search"> 
      <input class="image" type="image" src="images/search.svg"><input class="text" type="text" onfocus="if(this.value == 'Search') { this.value = ''; }" value="Search" onblur="if (this.value == '') { this.value = 'Search'; }"> 
     </div><!-- /search --> 
</div><!-- /searchContainer --> 

CSS：

input.image{ 
    fill: black; 
    width: 24px; 
    height: 24px; 
    border: 0; 
    padding-top: 9px; 
    text-align: right; 
} 

​​是我所看到的負載。

請注意，其他圖標也是SVG，但它們是在單個文件中使用我無法與搜索輸入一起使用的方法完成的。

<svg><use xlink></use></svg> 

任何幫助表示讚賞。謝謝！

Answer 1

放一個DIV中的SVG IMG元素，然後大小div和適當的IMG ...

<div id="logo"> 
    <img id="logo_img" src="assets/images/logo.svg"> 
</div> 

    #logo { 
    display: block; 
    height: 50px; 
    } 
    #logo_img { 
    height: 50px; 
    width: 200px; 
    }