title: Svg (snapsvg) creating a speech bubble
body: <p>I am creating a chat program with some figures on the screen moving around chatting with other people. </p>
  
  <p>One of the last things I need to complete this project is when ever a person says something it is put into a scaleable speech bubble. </p>
  
  <p>Since I'm very new at using SVG and this is my first real "Game" project I thought "Let's use some CSS to make sure that it scales correctly"</p>
  
  <p>So I made the following CSS:</p>
  
  <pre><code>    .bubble {
      background-color: #eee;
      border: 2px solid #333;
      border-radius: 5px;
      color: #333;
      display: inline-block;
      font: 16px/24px sans-serif;
      padding: 12px 24px;
      position: relative;
  }
  .bubble:after,
  .bubble:before {
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-top: 20px solid #eee;
      bottom: -20px;
      content: '';
      left: 50%;
      margin-left: -20px;
      position: absolute;
  }
  
  /* Styling for second triangle (border) */
  
  .bubble:before {
      border-left: 23px solid transparent;
      border-right: 23px solid transparent;
      border-top: 23px solid;
      border-top-color: inherit; /* Can't be included in the shorthand to work */
      bottom: -23px;
      margin-left: -23px;
  }
  </code></pre>
  
  <p>But sadly that didn't work. I later found out it is because SVG does not support all CSS properties. So now I'm kind of at a lost? I am not quite sure how to create a scalable speech bubble in SVG and I was hoping one of you might be kind enough to point me in the right direction.</p>
  
  <p><code>SVG path</code> I have tried:</p>
  
  <p>I managed to create a very small SVG path however I'm unsure how to make it bigger and make it it filled with text:</p>
  
  <pre><code>    var mesasgeBox = chatSvg.path("M 200.444444444444446,200v-6h10.444444444444446v6h-4l-3.1111111111111107,1.6222222222222236l0.11111111111111072,-1.6222222222222236Z");
  </code></pre>