title: Resize SVG included from external file
body: <p>I just discovered the possibility to include svg from an external sprite and use them in the HTML through the <code>&lt;use&gt;</code> tag. This method gives me two benefits:</p>
  
  <ol>
  <li>Define all the icons in one SVG file and use each of them on demand</li>
  <li>I can manipulate directly the SVG icon, in particular with <code>fill</code> property</li>
  </ol>
  
  <p>That saied, I'm now facing the problem of scaling the SVG. I read a couple of tutorials but I can't actually still set the SVG icon dimensions I want.
  If it was a normal image I would have written a rule like:</p>
  
  <pre><code>.icon {
      width: 2em;
      height: auto;
  }
  </code></pre>
  
  <p>I understood that with SVG this doesn't work since it's not an image. </p>
  
  <ul>
  <li>I tried to set the <code>viewBox</code> property but nothing actually happened.</li>
  <li>I tried to wrap the svg inside a <code>div</code> and set properties to it but nothing happened for the same reason as above, I guess.</li>
  </ul>
  
  <p><strong><em>So, how can I resize my SVG icon?</em></strong></p>
  
  <hr>
  
  <p>This is the future icons' collector file with just one icon at the moment <code>sprite.svg</code></p>
  
  <pre><code>&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
  &lt;defs&gt;
      &lt;path id="right-arrow-1" class="icon-1" d="m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z"/&gt;
  &lt;/defs&gt;
  </code></pre>
  
  <p></p>
  
  <p>And this is the HTML page:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div class="icon-wrap"&gt;
          &lt;svg class="icon-x"&gt;
              &lt;use href="/storage/icons/sprite.svg#right-arrow-1"&gt;&lt;/use&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here I create a snippet with those three attempts with the svg directly in HTML (it doesn't matter if it comes from external file or not)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.icon-2 {
    width: 5em;
    height:auto
    
  }
  
  .wrap {
    width: 5em;
    height:auto;
  }
  
  .icon-3 {
    width: 100%;
    height: 100%;
  }
  
  
  /* NOT important rules, just to let it more enjoyable */
  .icon {
    fill: pink;
    -webkit-transition: fill linear 0.25s;
      -moz-transition: fill linear 0.25s;
      -ms-transition: fill linear 0.25s;
      -o-transition: fill linear 0.25s;
      transition: fill linear 0.25s;
  }
  
  .icon:hover {
    fill: red;
    -webkit-transition: fill linear 0.25s;
      -moz-transition: fill linear 0.25s;
      -ms-transition: fill linear 0.25s;
      -o-transition: fill linear 0.25s;
      transition: fill linear 0.25s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="{{ app()-&gt;getLocale() }}"&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;svg class="icon icon-1"&gt;
              &lt;path id="right-arrow-1" class="icon-x" d="m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z"/&gt;
      &lt;/svg&gt;
      &lt;br&gt;
      
      &lt;svg class="icon icon-2"&gt;
          &lt;path id="right-arrow-1" class="icon-x" d="m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z"/&gt;
      &lt;/svg&gt;
      &lt;br&gt;
      
      &lt;div class="wrap"&gt;
          &lt;svg class="icon icon-3"&gt;
            &lt;path id="right-arrow-1" class="icon-x" d="m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z"/&gt;
      &lt;/svg&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>