title: Center one Svg layer into another Svg
body: <p>I am trying to do probably some easy task: wrapp one svg layer into another and center it.</p>
  <p>In this case it is a simple arrow (well, a svg path) which should be nested in rectangle (a square shape in this particular matter).</p>
  <p>The thing is, I am completely new to this svg subject, so far i only managed to wrap one svg into parent svg, and time is essence :)</p>
  <p>I tried to do my own research, but so far i dont see a simple explanation, only how to combine layers, not necessary center it one into another (only as centered in div tag)</p>
  <p>Here is a code</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-html lang-html prettyprint-override"><code> &lt;svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;rect x="0.5" y="0.5" width="37" height="37" rx="9.5" stroke="#222426"/&gt;
      &lt;svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;path d="M0.66732 0.999999L8.72964 10.8681C8.76363 10.9095 8.80536 10.9428 8.85208 10.9655C8.89879 10.9882 8.94943 11 9.00065 11C9.05187 11 9.10251 10.9882 9.14922 10.9655C9.19594 10.9428 9.23767 10.9095 9.27167 10.8681L17.334 1" stroke="#222426" stroke-linecap="round" stroke-linejoin="round"/&gt;
      &lt;/svg&gt;
      
      &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>