Improving Workflow

So, I finally got the SVG sprite to work, but since the width and height attributes are not set dynamically one has to enter them in manually otherwise the icons sit at the bottom of the viewport. Output is below, but here’s a pen to view also… http://codepen.io/grayghostvisuals/pen/f8a269745f17d11e8ae77bec37630170

<svg viewBox="0 0 32 32">
  <defs>
    <g id="icon-cloud">
      <path d="M32 20.548c0-2.565-1.771-4.716-4.156-5.296-0.101-4.022-3.389-7.252-7.433-7.252-2.369 0-4.477 1.109-5.839 2.835-0.764-0.987-1.959-1.624-3.303-1.624-2.307 0-4.176 1.871-4.176 4.179 0 0.201 0.015 0.399 0.043 0.592-0.351-0.063-0.711-0.098-1.080-0.098-3.344-0-6.054 2.712-6.054 6.058 0 3.346 2.71 6.058 6.054 6.058l20.508-0c3.004-0.006 5.438-2.444 5.438-5.451z" fill="#000000"></path>
    </g>
    <g id="icon-info"><g></g>
      <path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13zM14 8h4v4h-4zM20 24h-8v-2h2v-6h-2v-2h6v8h2z" fill="#000000"></path>
    </g>
    <g id="icon-menu"><g></g>
      <path d="M2 6h28v6h-28zM2 14h28v6h-28zM2 22h28v6h-28z" fill="#000000"></path>
    </g>
  </defs>
</svg>

<!--
Authors need to add these blocks below manually. 
Would be nice to add them in the SVG output file.
-->
<svg viewBox="0 0 32 32" class="svg-icon">
  <use xlink:href="#icon-cloud"></use>
</svg>

<svg viewBox="0 0 32 32" class="svg-icon">
  <use xlink:href="#icon-menu"></use>
</svg>

[TxHawks]

I think I have a better idea.

Maybe the issue stems from <g> being the wrong tag to represent icons to begin width. I may be reading the spec all wrong, but the <symbol> tag seems more appropriate for representing an icon than the <g> tag (Icons are reusable symbols, after all, not mere groups of paths).

But their big advantage is not the better semantics, but rather that they can hold many of the attributes and elements an svg tag itself can hold - including - its own, independent, viewBox attribute.

Moreover, If I’m reading the spec correctly, the <symbol> element’s content model allows the use of <title> and <desc>, which would be great for accessibility.

Am I missing something?

To sum up, my proposal is that the structure be changed to:

<svg>
  <defs>
    <symbol id="icon1"  
            viewBox="original-file's-viewBox"  
            title="original-file's-title" 
            desc="original-file's-desc">

      [paths]

    </symbol>
  </defs>
</svg>

[grayghostvisuals]

yay! 🎆 thanks @FWeinb and everyone else for the great collab to make this happen.