<svg version="1.1" width="64" height="64" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="outsides">
      <stop offset="0%" stop-color="#F0F0F0" />
      <stop offset="20%" stop-color="#C0C0C0" />
      <stop offset="80%" stop-color="#F0F0F0" />
      <stop offset="100%" stop-color="lightgray" />
    </linearGradient>
    <!-- TODO: could be improved by using SVG filters instead of a gradient? -->
    <radialGradient id="insides" cy="1">
      <stop offset="0%" stop-color="#404040" />
      <stop offset="60%" stop-color="gray" />
      <stop offset="100%" stop-color="#D2D2D2" />
    </radialGradient>
  </defs>
  <g id="colloid">
    <rect x="4" y="3.9686" width="56.002" height="56.002" rx="13.002" ry="13.002" fill="#f2f2f2" stroke-width="3.7796"/>
    <path d="m3.998 45.998v1c0 7.2032 5.8006 13.004 13.004 13.004h29.996c7.2032 0 13.004-5.8006 13.004-13.004v-1c0 7.2033-5.8007 13.002-13.004 13.002h-29.996c-7.2033 0-13.004-5.7988-13.004-13.002z" opacity=".1"/>
    <path d="m3.998 18.004v-1c0-7.2032 5.8006-13.004 13.004-13.004h29.996c7.2032 0 13.004 5.8006 13.004 13.004v1c0-7.2033-5.8007-13.002-13.004-13.002h-29.996c-7.2033 0-13.004 5.7988-13.004 13.002z" fill="#fff" opacity=".5"/>
  </g>
 <g stroke="#202020" stroke-width="2">
    <!-- The outer border of the bowl: two Bezier curves joined by an arc on the bottom -->
    <path d="M 15.5 30
             Q 13.5 33.75 12 38
             A 20 7 0 0 0 52 38
             Q 50.5 33.75 48.5 30
             " fill="url(#outsides)" />
    <!-- Insides of the bowl -->
    <ellipse cx="32" cy="30" rx="16.5" ry="5" fill="url(#insides)" />
  </g>

</svg>