Jekyll中的SVG在浏览器中无法显示，但代码是正确的。

Question

我在我的代码中包含了以下SVG。

<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <path fill="#919191" d="m7.294075,23.110188l2.385864,0.023237l-0.083177,10.552679l15.878221,0l0,-10.514505l2.51405,0l0,13.07741l-20.707843,0l0.01289,-13.138815l-0.000005,-0.000006z"/>
  <rect fill="#919191" y="29.348862" x="11.184582" height="2.628626" width="12.437938"/>
  <rect fill="#a78b68" transform="matrix(0.5395733410304717,0.05172669848399204,-0.05207586478003252,0.5359555264108665,3.6611416648678325,1.4067255727666614) " y="41.524347" x="18.49125" height="5.003923" width="23.066864"/>
  <rect fill="#c19653" transform="matrix(0.5216998676238958,0.14625586092278992,-0.1472431193160242,0.5182018938275416,3.6611416648678325,1.4067255727666614) " y="27.438515" x="24.907076" height="5.003923" width="23.066864"/>
  <rect fill="#d48c28" transform="matrix(0.4640090244261216,0.2783830739288475,-0.2802622193151353,0.46089786509976993,3.6611416648678325,1.4067255727666614) " y="7.461092" x="30.089396" height="5.003923" width="23.066864"/>
  <rect fill="#fe8908" transform="matrix(0.3157222700143304,0.4376935608999602,-0.4406480862019664,0.31360536660688737,3.6611416648678325,1.4067255727666614) " y="-20.343803" x="28.488303" height="5.003923" width="23.066864"/>
  <rect fill="#ff7a15" transform="matrix(0.0893402304821676,0.5310828333843179,-0.5346677562821299,0.08874120831524585,3.6611416648678325,1.4067255727666614) " y="-47.045927" x="14.158203" height="5.003923" width="23.066864"/>
</svg>

我在这里包含了这个HTML部分。

<a href="https://stackoverflow.com/users/2249869/userfriendly">
  <span class="icon icon--stackoverflow">
    {% include icon-stackoverflow.svg %} //this is the above svg
  </span>
  <span class="username">
   {{ include.username }}
  </span>
</a>

我的页脚

  <div class="footer-col footer-col-2">
    <ul class="social-media-list">
      {% if site.github_username %}
      <li>
        {% include icon-github.html username=site.github_username %}
      </li>
      {% endif %}

      {% if site.twitter_username %}
      <li>
        {% include icon-twitter.html username=site.twitter_username %}
      </li>
      {% endif %}

      {% if site.stackoverflow_username %}
      <li>
        {% include icon-stackoverflow.html username=site.stackoverflow_username %}
      </li>
      {% endif %}
    </ul>
  </div>

这是在我的浏览器中显示的内容：

请注意缺少图像。我知道代码与一开始不同。我尝试了多种不同的SVG格式，但结果相同。

在CodePen中使用相同的SVG会显示所需的结果。

http://codepen.io/anon/pen/MadpgZ

任何想法？提前谢谢。

- userFriendly

---

我猜你这里有一个CSS问题。有没有仓库链接可以帮助调试？ - David Jacquel

我已经复制了你的设置，SVG正常显示，所以问题可能在其他地方。如David上面所写，如果你有一个repo链接，我们可能能够找到它。 - Maxime Kjaer

非常感谢您的帮助，我非常感激。我将把代码推送到Github并分享链接。但是，我暂时还没有权限访问。 - userFriendly

Answer 1

这个问题很久以前就有了，但我找到了它，而且我也遇到了同样的问题。我认为我甚至使用了完全相同的jekyll主题（Gravity），因为你所有的代码看起来都是一样的。

问题在于你的SVG是40x40，而实际上需要是16x16。当你调整图标大小时，图标会自动显示出来。结果发现，调整SVG的大小比我预期的要麻烦得多。由于jekyll内联了SVG，所以很难使用CSS来缩放图像。最终我用inkscape来进行缩放。这里是缩放到正确尺寸的SVG。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="16"
   height="16"
   id="svg3512"
   version="1.1"
   inkscape:version="0.91 r"
   sodipodi:docname="so.svg">
  <metadata
     id="metadata3532">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs3530" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1366"
     inkscape:window-height="716"
     id="namedview3528"
     showgrid="false"
     inkscape:zoom="13.375"
     inkscape:cx="8.8971963"
     inkscape:cy="20"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg3512" />
  <path
     d="m 0.008293,9.3258921 1.5355776,0.011805 -0.053534,5.3604269 10.2194594,0 0,-5.3410357 1.61808,0 0,6.6429117 L 0,16 0.00829,9.3258965 l -3.2e-6,-3.1e-6 z"
     id="path3514"
     inkscape:connector-curvature="0"
     style="fill:#919191" />
  <rect
     y="12.494941"
     x="2.5122814"
     height="1.3352591"
     width="8.0052414"
     id="rect3516"
     style="fill:#919191" />
  <rect
     transform="matrix(0.9971499,0.07544586,-0.12218858,0.9925069,0,0)"
     y="9.8704548"
     x="3.9171355"
     height="1.3725955"
     width="8.0334988"
     id="rect3518"
     style="fill:#a78b68" />
  <rect
     transform="matrix(0.97638557,0.21603521,-0.33873527,0.94088172,0,0)"
     y="6.511641"
     x="5.775034"
     height="1.399946"
     width="7.9325705"
     id="rect3520"
     style="fill:#c19653" />
  <rect
     transform="matrix(0.90379955,0.42795605,-0.61032155,0.79215378,0,0)"
     y="1.6542813"
     x="6.9925656"
     height="1.4789127"
     width="7.6219997"
     id="rect3522"
     style="fill:#d48c28" />
  <rect
     transform="matrix(0.67463587,0.73815069,-0.87187447,0.48972943,0,0)"
     y="-6.0284266"
     x="5.8885627"
     height="1.627701"
     width="6.9478498"
     id="rect3524"
     style="fill:#fe8908" />
  <rect
     transform="matrix(0.20846184,0.9780305,-0.99152913,0.12988454,0,0)"
     y="-14.397026"
     x="1.9119557"
     height="1.7366618"
     width="6.3626075"
     id="rect3526"
     style="fill:#ff7a15" />
</svg>

- Leland B