CODEWITHSUNDEEP
htmlcsssvgresize
Arthur
Arthur

Reputation: 5158

How use multiple SVG with different size

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 !

Upvotes: 3

Views: 4741

Answers (3)

user7153178
user7153178

Reputation:

One way will be to edit the icons that will be listed together

so you will wrap it inside another group with consistent size

Upvotes: 0

Vagari
Vagari

Reputation: 458

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).

Upvotes: 2

Paul LeBeau
Paul LeBeau

Reputation: 101956

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.

Upvotes: 2

Related Questions