title: Html text area to svg text
body: <p>Is is possible to convert the text in a textarea in html to a svg text? The text area has formatted text i.e. bold, italics, bullets etc. This was created using jwysiwyg library. I am attaching the code:</p>
  
  <p>`</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
  &lt;title&gt;Example: Resizable - jWYSIWYG&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="../lib/blueprint/screen.css" media="screen, projection" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="../lib/blueprint/print.css" media="print" /&gt;
  &lt;!--[if lt IE 8]&gt;&lt;link rel="stylesheet" href="../lib/blueprint/ie.css" type="text/css" media="screen, projection" /&gt;&lt;![endif]--&gt;
  &lt;link rel="stylesheet" href="../../jquery.wysiwyg.css" type="text/css"/&gt;
  &lt;link type="text/css" href="../lib/ui/jquery.ui.all.css" rel="stylesheet"/&gt;
  &lt;script type="text/javascript" src="../lib/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../../jquery.wysiwyg.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../lib/ui/jquery.ui.core.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../lib/ui/jquery.ui.widget.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../lib/ui/jquery.ui.mouse.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../lib/ui/jquery.ui.resizable.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../../controls/wysiwyg.image.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../../controls/wysiwyg.link.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../../controls/wysiwyg.table.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  (function ($) {
      $(document).ready(function () {
          $('#wysiwyg').wysiwyg({
              resizeOptions: {},
  
              controls: {
                  html: { visible: true }
              }
          });
      });
  })(jQuery);
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;&lt;div class="container"&gt;
      &lt;h1&gt;jWYSIWYG&lt;/h1&gt;
      &lt;h2&gt;Example: Resizable&lt;/h2&gt;
      &lt;textarea id="wysiwyg" rows="5" cols="47"&gt;&lt;/textarea&gt;
  
      &lt;hr/&gt;
      &lt;a href="index.html"&gt;Index&lt;/a&gt;
  &lt;/div&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>`</p>
  
  <p>The reference page for this is @ <a href="http://akzhan.github.com/jwysiwyg/" rel="nofollow">http://akzhan.github.com/jwysiwyg/</a></p>