SVG徽标在Bootstrap导航栏中看起来不太好

Question

Designer已向我发送了一个新徽标作为SVG。

我想在我的HTML中内联使用它，但如果不设置min-width，我就无法显示它。

但是现在我使用min-width来获得所需尺寸的徽标，徽标的底部低于导航栏的底部。

如何让SVG在徽标上方使用更多空间，以及更少的空间，以便徽标整齐地放置在导航栏中并且看起来很好？

码

.navbar-brand {
  min-width: 250px;
}

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
      <a class="navbar-brand" href="/">
        <?xml version="1.0" encoding="UTF-8"?>
        <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
        <!-- Creator: CorelDRAW X6 -->
        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 7090 1628" xmlns:xlink="http://www.w3.org/1999/xlink">
             <defs>
              <style type="text/css">
               <![CDATA[
                .fil1 {fill:#FEFEFE}
                .fil3 {fill:#FEFEFE;fill-rule:nonzero}
                .fil2 {fill:#033C73;fill-rule:nonzero}
                .fil0 {fill:url(#id0)}
               ]]>
              </style>
              <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="800.768" y1="1267.59" x2="932.867" y2="1645.01">
               <stop offset="0" style="stop-color:#C5C6C6"/>
               <stop offset="0.639216" style="stop-color:#FDFDFD"/>
               <stop offset="1" style="stop-color:#FEFEFE"/>
              </linearGradient>
             </defs>
             <g id="Layer_x0020_1">
              <metadata id="CorelCorpID_0Corel-Layer"/>
              <polygon class="fil0" points="1098,1285 1098,1628 636,1325 "/>
              <path class="fil1" d="M1184 96c274,194 275,949 37,1156 -189,164 -846,166 -1038,8 -246,-203 -245,-950 10,-1150 181,-142 805,-146 991,-14z"/>
              <path class="fil2" d="M1132 694c2,1 4,3 5,5 57,56 91,134 91,219l0 97 -177 0 0 -97c0,-37 -15,-70 -39,-94 -24,-24 -57,-39 -93,-39l0 -1 -131 0 0 142 0 88 -89 0 -222 0 0 1c-85,0 -163,-35 -219,-92 -57,-56 -92,-134 -92,-219l0 -314 178 0 0 314c0,36 15,69 39,94 24,24 58,39 94,39l0 0 134 0 0 -447 177 0 0 213 131 0 0 -1c36,0 69,-15 93,-39 24,-24 39,-57 39,-94l0 -79 177 0 0 79c0,85 -34,163 -91,219 -1,2 -3,4 -5,6z"/>
              <path class="fil3" d="M1990 870c-90,0 -152,-67 -152,-158 0,-92 62,-159 152,-159 72,0 121,43 136,112l140 0c-17,-142 -125,-239 -275,-239 -166,0 -291,120 -291,286 0,165 125,285 291,285 150,0 258,-97 275,-239l-140 0c-15,69 -64,112 -136,112zm843 -433l-136 0 0 220 -224 0 0 -220 -136 0 0 549 136 0 0 -206 224 0 0 206 136 0 0 -549zm459 455l37 94 145 0 -233 -552 -130 0 -233 552 145 0 37 -94 232 0zm-45 -117l-142 0 71 -182 71 182zm640 -216l0 -122 -486 0 0 122 175 0 0 427 137 0 0 -427 174 0zm483 268l118 159 164 0 -141 -186c66,-33 105,-93 105,-170 0,-119 -91,-193 -227,-193l-240 0 0 549 136 0 0 -159 85 0zm-85 -123l0 -147 101 0c53,0 95,29 95,73 0,45 -42,74 -95,74l-101 0zm668 -278c-165,0 -291,126 -291,286 0,159 126,285 291,285 166,0 291,-126 291,-285 0,-160 -125,-286 -291,-286zm0 445c-89,0 -153,-73 -153,-159 0,-87 64,-159 153,-159 89,0 152,72 152,159 0,86 -63,159 -152,159zm639 -445c-165,0 -290,126 -290,286 0,159 125,285 290,285 167,0 292,-126 292,-285 0,-160 -125,-286 -292,-286zm0 445c-88,0 -152,-73 -152,-159 0,-87 64,-159 152,-159 89,0 153,72 153,159 0,86 -64,159 -153,159zm955 -434l-102 0 -194 293 -196 -293 -101 0 0 549 137 0 -1 -277 123 190 0 1 75 0 0 -1 122 -188 0 275 137 0 0 -549zm307 -12c-129,0 -218,69 -218,179 0,87 51,138 159,162l91 20c47,9 58,28 58,47 0,29 -27,48 -78,48 -64,0 -106,-29 -115,-77l-136 0c13,135 124,193 247,193 138,0 228,-68 228,-178 0,-95 -65,-135 -165,-157l-77 -17c-41,-9 -63,-22 -63,-52 0,-36 31,-55 78,-55 56,0 82,28 89,69l137 0c-14,-147 -146,-182 -235,-182z"/>
             </g>
            </svg>
      </a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/">Home</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

.navbar-brand {
  width: 35vw;
}

使用VW（视口宽度）它用于根据窗口大小调整图像大小

Answer 2

不要使用svg代码。我希望设计师为您提供扩展名为.svg的文件。使用该文件作为图像源。

<img class="logo" src="your-path/logo.svg" />

然后使用css添加所需的宽度。

.logo { width: 150px; }