title: README.md - image in svg with space in the upper and lower margins
body: <p>I am writing a <code>README.md</code> which is inserting this <code>svg</code> image:</p>
  
  <pre><code>Some text
  
  &lt;p align="left"&gt;
            &lt;img width="256" height="256" src="https://github.com/DavidCdeB/Trial/blob/master/Images/extract2.svg"&gt;
  &lt;/p&gt;
  
  Other text
  </code></pre>
  
  <p>Some blank space is added in the upper and lower margins, as shown here:</p>
  
  <p><a href="https://i.stack.imgur.com/Yv7CV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yv7CV.png" alt="enter image description here"></a>
  <sup><i> Fig. 1 </i></sup></p>
  
  <p>I have implemented the solution posted <a href="https://stackoverflow.com/questions/32333906/svg-image-taking-space-around-image-without-any-margin-or-padding">here</a>, where it is said that the SVG file has to be opened in Inkscape editor, and then do <code>Go to File</code> > <code>Document Properties</code> > <code>Resize Page to content</code> > <code>Resize page to drawing or selection</code>. This removes the space around SVG. However, after doing this, the problem still appears and I continue to see the blank space in the upper and lower margins.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>As very well pointed out by @squeamish ossifrage, the native size of the <code>svg</code> image is <code>width="318.978mm" height="97.003448mm"</code>. Thus, this now explains why the image declared with <code>width="256" height="256"</code> lead to an extra spacing. </p>
  
  <p>If in the <code>&lt;img&gt;</code> tag I do not specify sizes:</p>
  
  <pre><code>Some text
  
  &lt;p align="left"&gt;
    &lt;img src="https://github.com/DavidCdeB/Trial/blob/master/Images/extract2.svg"&gt;
  &lt;/p&gt;
  
  Other text
  </code></pre>
  
  <p>I get the following:</p>
  
  <p><a href="https://i.stack.imgur.com/isxEf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/isxEf.png" alt="enter image description here"></a>
  <sup><i> Fig. 2 </i></sup></p>
  
  <p>where no extra spacing is seen, but the image is too big.</p>
  
  <p>If I specify <code>width="318.978mm" height="97.003448mm"</code> in the <code>&lt;img&gt;</code> tag:</p>
  
  <pre><code>Some text
  
  &lt;p align="left"&gt;
    &lt;img width="318.978mm" height="97.003448mm" src="https://github.com/DavidCdeB/Trial/blob/master/Images/extract2.svg"&gt;
  &lt;/p&gt;
  
  Other text
  </code></pre>
  
  <p>The result is the following:</p>
  
  <p><a href="https://i.stack.imgur.com/m2PiW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m2PiW.png" alt="enter image description here"></a></p>
  
  <p><sup><i> Fig. 3 </i></sup></p>
  
  <p>which is much better size. </p>
  
  <p>Now, this is an interesting thing: if the <code>svg</code> has native dimensions of <code>width="318.978mm" height="97.003448mm"</code>, why when explicitly declaring <code>width="318.978mm" height="97.003448mm"</code> in the <code>&lt;img</code> tag the image is  resized so much (Fig. 3) with respect to what happens if no specification is declared (Fig. 2) ?</p>