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://whosebug.com/users/2249869/userfriendly">
  <span class="icon icon--Whosebug">
    {% include icon-Whosebug.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.Whosebug_username %}
      <li>
        {% include icon-Whosebug.html username=site.Whosebug_username %}
      </li>
      {% endif %}
    </ul>
  </div>

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

请注意缺少图像。我知道代码与开头不同。我为同一件事尝试了多种不同的 SVG 格式。

codepen 中的相同 svg 显示了所需的结果。

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

有什么想法吗？提前谢谢你。

Answer 1

这个问题很老了，但我找到了它并且遇到了同样的问题。我想我什至使用了完全相同的 jekyll 主题 (Gravity)，因为您的所有代码看起来都完全相同。

问题是您的 SVG 是 40 x 40，而它需要是 16 x 16。当您调整图标大小时，图标会自动显示。事实证明，调整 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>

Jekyll 中的 SVG 未在浏览器中显示，但代码是

SVG in Jekyll not showing in browser, but code is

html

svg

jekyll