<div class="contain-demo">
  <svg width="350" height="150" viewBox="0 0 300 300" preserveAspectRatio="xMinYMax meet" style="border: 1px solid #333333;">
    <desc>Red cherries with green stem demonstrating the effects of preserveAspectRatio.</desc>
    <g>
      <path fill="none" stroke="#7AA20D" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" d="
      M65.989,185.785c0,0,85.638-80.731,90.675-114.314c5.038-33.583,50.941,100.189,30.228,133.493"/>
      <path fill="#ED6E46" stroke="#ED6E46" stroke-width="13" d="M186.87,211.373
      c1.927-0.131,3.965-0.533,6.206-1.261c9.353-3.041,23.276-7.675,30.963,3.463c16.565,24.002,6.333,61.392-20.202,73.091
      c-30.336,13.374-64.783-18.62-61.949-49.448c1.391-15.139,8.969-39.499,28.717-30.191  C176.568,209.837,181.243,211.757,186.87,211.373z"/>
      <path fill="#ED6E46" stroke="#ED6E46" stroke-width="13" d="M67.278,193.489  c1.908,0.3,3.985,0.361,6.332,0.148c9.795-0.889,24.399-2.316,29.421,10.25c10.823,27.08-7.454,61.266-35.924,66.782
      c-32.548,6.306-59.032-32.537-49.426-61.967c4.718-14.452,17.514-36.523,34.703-23.062   C57.574,189.705,61.706,192.614,67.278,193.489z"/>
      <path fill="#7AA20D" stroke="#7AA20D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="
      M153.81,68.308c-1.475-6.678,0.444-14.2,6.331-21.624c12.283-15.49,25.91-19.271,44.822-19.608c0.008,0,24.298-0.435,29.351-22.009
      c-3.141,13.41-6.131,26.553-10.739,39.603c-7.49,21.206-24.61,53.318-52.334,41.783C161.585,82.435,155.491,75.921,153.81,68.308z"
      />
    </g>
  </svg>
</div>
<!-- by Joni Trythall -->

.contain-demo {
  margin-top: 30px;
  text-align: center;
}