How use multiple SVG with different size - html

Question

I try to integrate SVG icon on my web site, don't they are a thing i don't understand..
I have download 2 SVG icons :
Heart
<svg width="0" height="0" viewBox="0 0 32 32" style="position:absolute;margin-left: -100%;">
<path id ="home-icon" d="M57.062,31.398c0.932-1.025,0.842-2.596-0.201-3.508L33.884,7.785c-1.043-0.912-2.715-0.893-3.736,0.043L7.093,28.962
c-1.021,0.936-1.071,2.505-0.111,3.503l0.578,0.602c0.959,0.998,2.509,1.117,3.46,0.265l1.723-1.543v22.59
c0,1.386,1.123,2.508,2.508,2.508h8.987c1.385,0,2.508-1.122,2.508-2.508V38.575h11.463v15.804c-0.02,1.385,0.971,2.507,2.356,2.507
h9.524c1.385,0,2.508-1.122,2.508-2.508V32.107c0,0,0.476,0.417,1.063,0.933c0.586,0.515,1.817,0.102,2.749-0.924L57.062,31.398z"/>
</svg>
Project
<svg width="0" height="0" viewBox="0 0 64 64" style="position:absolute;margin-left: -100%;">
<g id="projects-icon">
<polygon points="22,6 22,10 28,16 22,22 22,26 32,16 "/>
<polygon points="10,10 10,6 0,16 10,26 10,22 4,16 "/>
<polygon points="18,12 10,20 14,20 22,12 "/>
</g>
</svg>
But the Heart icon is drawed for 32x32 and Project for 64x64, so when I try to use both on my menu, i must specify the image size in the viewBox item:
<nav id="top-menu">
<svg class="menu-icon" viewBox="0 0 32 32">
<use xlink:href="#heart-icon">
</svg>
<svg class="menu-icon" viewBox="0 0 64 64">
<use xlink:href="#project-icon">
</svg>
</nav>
Exemple on jsfiddle : http://jsfiddle.net/Nh57e/
In this case, i can't loop on my HTML and i must set size on HTML each time I want use an image.. (And if I want change the SVG, i need update all the html source for the new size :/ )
How can i do for use image without set the icon size ??
Thank all !

Answer 1

One solution would be to reference the whole SVGs rather than just parts of them.
In this version, we hide them in a hidden <div> rather than setting their sizes to zero:
<div style="display:none">
<svg id="project-icon" viewBox="0 0 32 32">
<g>
<polygon points="22,6 22,10 28,16 22,22 22,26 32,16 "/>
<polygon points="10,10 10,6 0,16 10,26 10,22 4,16 "/>
<polygon points="18,12 10,20 14,20 22,12 "/>
</g>
</svg>
</div>
I have taken out the width and height attributes here so that they default to 100%.
Then reference them from mini-SVGs that have the exact width and height you want:
<svg class="menu-icon" width="32px" height="32px">
<use xlink:href="#home-icon" />
</svg>
Demo here
Note. In your demo you had the viewBox sizes for the two SVGs back to front.

Answer 2

Another alternative is to use the symbol element. You can set a viewPort for each icon. And then reference them the same way you are currently.
<svg style="display: none;">
<symbol id="home-icon" viewBox="0 0 64 64">
<path d="M57.062,31.398c0.932-1.025,0.842-2.596-0.201-3.508L33.884,7.785c-1.043-0.912-2.715-0.893-3.736,0.043L7.093,28.962
c-1.021,0.936-1.071,2.505-0.111,3.503l0.578,0.602c0.959,0.998,2.509,1.117,3.46,0.265l1.723-1.543v22.59
c0,1.386,1.123,2.508,2.508,2.508h8.987c1.385,0,2.508-1.122,2.508-2.508V38.575h11.463v15.804c-0.02,1.385,0.971,2.507,2.356,2.507
h9.524c1.385,0,2.508-1.122,2.508-2.508V32.107c0,0,0.476,0.417,1.063,0.933c0.586,0.515,1.817,0.102,2.749-0.924L57.062,31.398z"/>
</symbol>
<symbol id="project-icon" viewBox="0 0 32 32">
<g>
<polygon points="22,6 22,10 28,16 22,22 22,26 32,16 "/>
<polygon points="10,10 10,6 0,16 10,26 10,22 4,16 "/>
<polygon points="18,12 10,20 14,20 22,12 "/>
</g>
</symbol>
</svg>
.menu-icon {
width: 32px;
height: 32px;
fill: #aaa;
}
<svg style="display: none;">
<symbol id="home-icon" viewBox="0 0 64 64">
<path d="M57.062,31.398c0.932-1.025,0.842-2.596-0.201-3.508L33.884,7.785c-1.043-0.912-2.715-0.893-3.736,0.043L7.093,28.962
c-1.021,0.936-1.071,2.505-0.111,3.503l0.578,0.602c0.959,0.998,2.509,1.117,3.46,0.265l1.723-1.543v22.59
c0,1.386,1.123,2.508,2.508,2.508h8.987c1.385,0,2.508-1.122,2.508-2.508V38.575h11.463v15.804c-0.02,1.385,0.971,2.507,2.356,2.507
h9.524c1.385,0,2.508-1.122,2.508-2.508V32.107c0,0,0.476,0.417,1.063,0.933c0.586,0.515,1.817,0.102,2.749-0.924L57.062,31.398z"/>
</symbol>
<symbol id="project-icon" viewBox="0 0 32 32">
<g>
<polygon points="22,6 22,10 28,16 22,22 22,26 32,16 "/>
<polygon points="10,10 10,6 0,16 10,26 10,22 4,16 "/>
<polygon points="18,12 10,20 14,20 22,12 "/>
</g>
</symbol>
</svg>
<nav id="top-menu">
home icon
<br/>
<svg class="menu-icon">
<use xlink:href="#home-icon" />
</svg>
<br/>
project icon
<br/>
<svg class="menu-icon">
<use xlink:href="#project-icon" />
</svg>
</nav>
Reference: css-tricks
Original demo on codepen (before I realized you can insert code snippets directly).

Answer 3

One way will be to edit the icons that will be listed together
so you will wrap it inside another group with consistent size