Why are my SVGs in def group not showing?

Question

I can't explain following behavior. I used grunt svg sprite to create a SVG sprite of all my SVG Files in a certain directory.

Structure looks like this:

<svg width="0" height="0" style="position:absolute">
  <defs>
     //my svgs
  </defs>
</svg>

Here the fiddle: https://jsfiddle.net/swf8rtog/

The plan was to import those SVGs group in inline in the body tag so that I don't need an extra request for an icon font. For multiple usage of an svg icon you can reference with use xlink:href="#id_of_the_original_svg". You can see a working example on this page: http://www.chip.de/preisvergleich/

I tried to display the SVGs with CSS, gave them width, height, display: block, color, fill etc. attributes but nothing worked.

But the paths seem to be correct. When not loading in a def group the Icons show up: https://jsfiddle.net/vtnLnsrh/

So what am I missing? Why is it not working?

Answer 1

<defs aren't supposed to be visible. They are definitions to be used later.

Per MDN

SVG allows graphical objects to be defined for later reuse. It is recommended that, wherever possible, referenced elements be defined inside of a defs element. Defining these elements inside of a defs element promotes understandability of the SVG content and thus promotes accessibility.

Graphical elements defined in a defs will not be directly rendered. You can use a <use> element to render those elements wherever you want on the viewport.

<svg>
  <use xlink:href = "#star"/>
</svg>

<svg style="display:none">
  <defs>
    <svg viewbox="0 0 18 28" id="angle-down">
      <path d="M16.797 11.5q0 .203-.156.36l-7.28 7.28q-.156.156-.36.156t-.358-.156l-7.28-7.28q-.157-.157-.157-.36t.156-.36l.782-.78q.156-.156.36-.156t.358.156L9 16.5l6.142-6.14q.156-.156.36-.156t.358.156l.78.78q.157.157.157.36z" />
    </svg>
    <svg viewbox="0 0 18 28" id="angle-up">
      <path d="M16.797 18.5q0 .203-.156.36l-.78.78q-.156.156-.36.156t-.358-.156l-6.14-6.14-6.142 6.14q-.156.156-.36.156t-.358-.156l-.78-.78q-.157-.157-.157-.36t.156-.36l7.282-7.28q.156-.156.36-.156t.358.156l7.28 7.28q.157.157.157.36z" />
    </svg>
    <svg viewbox="0 0 32 32" id="area">
      <path d="M19.556 16a3.556 3.556 0 1 1-7.112 0 3.556 3.556 0 0 1 7.112 0z" />
      <path d="M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16h-2.37c0 7.527-6.102 13.63-13.63 13.63S2.37 23.528 2.37 16C2.37 8.473 8.472 2.37 16 2.37V0z" />
      <path d="M16 5.926c-5.564 0-10.074 4.51-10.074 10.074S10.436 26.074 16 26.074 26.074 21.564 26.074 16h-2.37a7.704 7.704 0 0 1-15.408 0A7.704 7.704 0 0 1 16 8.296v-2.37z" />
      <path d="M17.185 15.704V0h-2.37v16.89h2.37v-1.186z" />
    </svg>
    <svg viewbox="0 0 24 28" id="bullseye">
      <path d="M16 14q0 1.656-1.172 2.828T12 18t-2.828-1.172T8 14t1.172-2.828T12 10t2.828 1.172T16 14zm2 0q0-2.484-1.758-4.242T12 8 7.758 9.758 6 14t1.758 4.242T12 20t4.242-1.758T18 14zm2 0q0 3.313-2.344 5.656T12 22t-5.656-2.344T4 14t2.344-5.656T12 6t5.656 2.344T20 14zm2 0q0-2.03-.797-3.883T19.07 6.93t-3.187-2.133T12 4t-3.883.797T4.93 6.93t-2.133 3.187T2 14t.797 3.883T4.93 21.07t3.187 2.133T12 24t3.883-.797 3.187-2.133 2.133-3.187T22 14zm2 0q0 3.266-1.61 6.023t-4.366 4.367T12 26 5.98 24.39 1.61 20.023.003 14t1.61-6.023T5.977 3.61 12 2t6.024 1.61 4.367 4.367T24 14z"
      />
    </svg>
    <svg viewbox="0 0 19 28" id="chevron-right">
      <path d="M17.297 13.703L5.703 25.297q-.297.297-.703.297t-.703-.297l-2.594-2.594q-.297-.297-.297-.703t.297-.703L10 13 1.703 4.703Q1.406 4.406 1.406 4t.297-.703L4.297.703Q4.594.406 5 .406t.703.297l11.594 11.594q.297.297.297.703t-.297.703z" />
    </svg>
    <svg viewbox="0 0 32 32" id="close">
      <path d="M18.208 16l13.66 13.66-2.21 2.207L16 18.207 2.34 31.868.134 29.66 13.793 16 .132 2.34 2.34.134 16 13.793 29.66.132l2.207 2.208L18.207 16z" />
    </svg>
    <svg viewbox="0 0 22 28" id="close_bold">
      <path d="M20.28 20.656q0 .625-.437 1.062l-2.125 2.125q-.438.438-1.062.438t-1.062-.437L11 19.25l-4.594 4.593q-.438.438-1.062.438t-1.062-.437l-2.125-2.125q-.438-.438-.438-1.062t.437-1.062L6.75 15l-4.593-4.594q-.438-.438-.438-1.062t.437-1.062l2.125-2.125q.438-.438 1.062-.438t1.062.437L11 10.75l4.594-4.593q.438-.438 1.062-.438t1.062.437l2.125 2.125q.438.438.438 1.062t-.437 1.062L15.25 15l4.593 4.594q.438.438.438 1.062z"
      />
    </svg>
    <svg viewbox="0 0 32 32" id="location">
      <path d="M16.187 21.708a5.522 5.522 0 1 0-5.52-5.52 5.52 5.52 0 0 0 5.52 5.52z" />
      <path d="M16.072 28.59c6.913 0 12.517-5.605 12.517-12.518S22.984 3.555 16.07 3.555 3.555 9.16 3.555 16.072 9.16 28.59 16.072 28.59zm0-2.37c-5.604 0-10.146-4.544-10.146-10.147S10.47 5.927 16.072 5.927c5.604 0 10.146 4.543 10.146 10.146S21.675 26.22 16.072 26.22z"
      />
      <path d="M29.158 17.778H32v-3.556h-4.148v3.556h1.306zm-14.936 11.38V32h3.556v-4.148h-3.556v1.306zm0-27.676v3.225h3.556V0h-3.556v1.482zM1.306 17.778h2.842v-3.556H0v3.556h1.306z" />
    </svg>
    <svg viewbox="0 0 32 32" id="location_searching">
      <path d="M16.072 28.59c6.913 0 12.517-5.605 12.517-12.518S22.984 3.555 16.07 3.555 3.555 9.16 3.555 16.072 9.16 28.59 16.072 28.59zm0-2.37c-5.604 0-10.146-4.544-10.146-10.147S10.47 5.927 16.072 5.927c5.604 0 10.146 4.543 10.146 10.146S21.675 26.22 16.072 26.22z"
      />
      <path d="M29.158 17.778H32v-3.556h-4.148v3.556h1.306zm-14.936 11.38V32h3.556v-4.148h-3.556v1.306zm0-27.677v3.226h3.556V0h-3.556v1.48zM1.306 17.78h2.842v-3.556H0v3.556h1.306z" />
    </svg>
    <svg viewbox="0 0 36 32" id="messages">
      <path d="M24.542 28.9c0 .617-.52 1.118-1.16 1.118H3.22c-.64 0-1.16-.5-1.16-1.117V3.205c0-.616.52-1.116 1.16-1.116H23.38c.64 0 1.16.5 1.16 1.116V9.13l-6.188 5.957 3.713 3.574 2.475-2.378v12.62zM34.93 4.05l-1.387-1.335c-.642-.618-1.632-.676-2.2-.13l-4.74 4.563V3.204c0-1.71-1.444-3.1-3.22-3.1H3.22C1.444.105 0 1.495 0 3.205V28.9C0 30.61 1.444 32 3.22 32h20.163c1.775 0 3.22-1.39 3.22-3.1V14.3l8.46-8.134c.57-.546.508-1.5-.134-2.117z"
      />
      <path d="M16.17 19.797c-.238.757.21 1.192 1 .963l3.896-1.134-3.714-3.573-1.182 3.744zM4.925 7.847H21.02c.57 0 1.03-.445 1.03-.993s-.46-.992-1.03-.992H4.926c-.57 0-1.03.444-1.03.992s.46.992 1.03.992zM21.02 24.08H4.926c-.57 0-1.03.444-1.03.993 0 .547.46.992 1.03.992H21.02c.57 0 1.03-.445 1.03-.992 0-.548-.46-.992-1.03-.992zM4.926 13.92H15.06c.567 0 1.03-.444 1.03-.992s-.463-.992-1.03-.992H4.924c-.57 0-1.03.444-1.03.992s.46.992 1.03.992zm0 6.073h8.24c.57 0 1.03-.444 1.03-.99 0-.55-.46-.993-1.03-.993h-8.24c-.57 0-1.03.443-1.03.992 0 .546.46.99 1.03.99z"
      />
    </svg>
    <svg viewbox="0 0 22 28" id="minus">
      <path d="M22 11.5v3q0 .625-.438 1.062T20.5 16h-19q-.625 0-1.062-.438T0 14.5v-3q0-.625.438-1.062T1.5 10h19q.625 0 1.062.438T22 11.5z" />
    </svg>
    <svg viewbox="0 0 24 32" id="place_edit">
      <path d="M0 11.2C0 5.008 5.366 0 12 0s12 5.008 12 11.2C24 19.6 12 32 12 32S0 19.6 0 11.2zm4.32 5.657l2.868 1.135 10.56-6.327-2.555-4.213-10.54 6.322-.332 3.082zm14.79-8.89c-.978-1.625-1.795-1.795-1.795-1.795l-1.054.634 2.54 4.23 1.054-.637s.215-.838-.745-2.433z"
      />
    </svg>
    <svg viewbox="0 0 23 32" id="place_full">
      <path d="M11.2 0C5.008 0 0 5.008 0 11.2 0 19.6 11.2 32 11.2 32s11.2-12.4 11.2-20.8C22.4 5.008 17.392 0 11.2 0zm0 16a4.8 4.8 0 0 1 0-9.6 4.8 4.8 0 0 1 0 9.6z" />
    </svg>
    <svg viewbox="0 0 23 32" id="place_outline">
      <path d="M11.32 0A11.314 11.314 0 0 0 0 11.32c0 1.93.57 4.096 1.614 6.468.907 2.058 2.15 4.224 3.65 6.444a67.917 67.917 0 0 0 5.16 6.68l.897.993.897-.992a26.42 26.42 0 0 0 .454-.518 67.917 67.917 0 0 0 4.708-6.163c1.497-2.22 2.742-4.386 3.648-6.444 1.045-2.372 1.614-4.538 1.614-6.467C22.642 5.064 17.58 0 11.322 0zm0 2.415a8.9 8.9 0 0 1 8.907 8.906c0 1.546-.488 3.403-1.41 5.494-.84 1.91-2.017 3.957-3.44 6.067a65.305 65.305 0 0 1-4.952 6.414h1.792a58.188 58.188 0 0 1-1.54-1.82 65.305 65.305 0 0 1-3.41-4.594c-1.425-2.11-2.6-4.155-3.442-6.066-.92-2.09-1.41-3.947-1.41-5.493a8.9 8.9 0 0 1 8.907-8.905zm0 12.032a3.128 3.128 0 1 1 0-6.253 3.128 3.128 0 0 1 0 6.253zm0 2.416A5.543 5.543 0 1 0 5.78 11.32a5.543 5.543 0 0 0 5.543 5.543z"
      />
    </svg>
    <svg viewbox="0 0 30 32" id="place_show_all">
      <path d="M0 31.902V5.852L10.54.426l8.64 4.788L30.157.57v26.532L19.18 31.937l-8.797-4.086L0 31.903zM2.416 7.314V28.27l7.993-3.218.09-22.003-8.085 4.263zm16.957.51V29.23l8.516-3.773.07-21.356-8.587 3.724z" />
    </svg>
    <svg viewbox="0 0 22 28" id="plus">
      <path d="M22 11.5v3q0 .625-.438 1.062T20.5 16H14v6.5q0 .625-.438 1.062T12.5 24h-3q-.625 0-1.062-.438T8 22.5V16H1.5q-.625 0-1.062-.438T0 14.5v-3q0-.625.438-1.062T1.5 10H8V3.5q0-.625.438-1.062T9.5 2h3q.625 0 1.062.438T14 3.5V10h6.5q.625 0 1.062.438T22 11.5z"
      />
    </svg>
    <svg viewbox="0 0 37 32" id="recover">
      <path d="M4.84 16.556C5.133 25.136 12.18 32 20.83 32c8.838 0 16-7.163 16-16s-7.162-16-16-16c-3.23 0-6.32.96-8.942 2.73l1.35 2.003a13.517 13.517 0 0 1 7.592-2.317c7.503 0 13.585 6.082 13.585 13.585S28.333 29.587 20.83 29.587c-7.318 0-13.284-5.786-13.574-13.032l5.323-.007-6.283-8.093L0 16.564l4.84-.007z"
      />
    </svg>
    <svg viewbox="0 0 32 32" id="regio_logo">
      <path d="M13.944 25.756L16 28.488l2.056-2.732h7.253L29.963 32H2.037l4.655-6.244h7.253zM16 6.244c-2.133 0-3.88 1.756-3.88 3.902s1.746 3.902 3.88 3.902c2.133 0 3.88-1.756 3.88-3.902S18.133 6.244 16 6.244zm8.533 9.366L16 27.317 7.467 15.61h.04a10.024 10.024 0 0 1-1.59-5.463C5.916 4.527 10.414 0 16 0S26.087 4.53 26.087 10.148c0 2.03-.582 3.902-1.59 5.463h.04z"
      />
    </svg>
    <svg viewbox="0 0 26 28" id="star">
      <path d="M26 10.11q0 .343-.406.75l-5.672 5.53 1.344 7.812q.016.11.016.313 0 .328-.164.555t-.477.227q-.296 0-.624-.187L13 21.423 5.984 25.11q-.344.187-.625.187-.33 0-.493-.227t-.164-.555q0-.094.03-.313L6.08 16.39.39 10.86Q0 10.436 0 10.11q0-.58.874-.72l7.844-1.14 3.516-7.11Q12.53.5 13 .5t.766.64l3.516 7.11 7.844 1.14q.875.14.875.72z"
      />
    </svg>
  </defs>
</svg>

<svg>
 <use xlink:href="#star" />
</svg>

Note: The SVG holding the defs will take up space on the page so it's customary to hide it with display:none.