title: <svg> not fit into its embeded <path>
body: <p>I am using BootStraps CSS framework version 4.6, in below HTML</p>
  <pre><code>&lt;div class=&quot;d-inline-block col-6&quot;&gt;
            {% if not item.comment.is_removed and allow_feedback %}
  
              {% if show_feedback and item.likedit_users %}
                 &lt;a class=&quot;text-base font-bold&quot; title=&quot;{{ item.likedit_users|join:'&lt;br/&gt;' }}&quot;&gt;
                    {{ item.likedit_users|length }}
                 &lt;/a&gt;
              {% endif %}
  
              &lt;a class=&quot;d-inline-block&quot; onclick=&quot;document.getElementById('like_comment_{{ item.comment.id }}').submit();&quot;&gt;Test&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; class=&quot;d-inline&quot; {% if user.username in item.likedit_users %} fill=&quot;currentColor&quot; {% else %} fill=&quot;none&quot; {% endif %} fill-opacity=&quot;0.5&quot; stroke=&quot;currentColor&quot;&gt;&lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5&quot; /&gt;&lt;/svg&gt;
              &lt;/a&gt;
  
              &lt;form class=&quot;d-inline-block&quot; id=&quot;like_comment_{{ item.comment.id }}&quot; method=&quot;post&quot; action=&quot;{% url 'comments-xtd-like' item.comment.id %}&quot;&gt;{% csrf_token %}&lt;/form&gt;
  
            {% endif %}
          &lt;/div&gt;
  </code></pre>
  <p><strong>However, I found the size of <code>&lt;svg&gt;</code> was too large comparing with its embedded <code>&lt;path&gt;</code>.</strong></p>
  <p>Size of parent <code>&lt;div&gt;</code>.</p>
  <p><a href="https://i.stack.imgur.com/k2N90.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k2N90.png" alt="enter image description here" /></a></p>
  <p>Size of first <code>&lt;a&gt;</code> within parent <code>&lt;div&gt;</code></p>
  <p><a href="https://i.stack.imgur.com/O8r2L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O8r2L.png" alt="enter image description here" /></a></p>
  <p>Size of second <code>&lt;a&gt;</code> within parent <code>&lt;div&gt;</code></p>
  <p><a href="https://i.stack.imgur.com/EN31y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EN31y.png" alt="enter image description here" /></a></p>
  <p>Size of <code>&lt;svg&gt;</code> within second <code>&lt;a&gt;</code></p>
  <p><a href="https://i.stack.imgur.com/FaiIB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FaiIB.png" alt="enter image description here" /></a></p>
  <p>Size of <code>&lt;path&gt;</code> within <code>&lt;svg&gt;</code></p>
  <p><a href="https://i.stack.imgur.com/qRvs9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qRvs9.png" alt="enter image description here" /></a></p>
  <p><strong>Q: How can I make <code>&lt;svg&gt;</code> shrink to fit into its embedded <code>&lt;path&gt;</code> please?</strong>
  I have tried <code>height</code>, <code>width</code>, <code>viewBox</code> attributes, all did not work out for me.</p>