title: How to store additional data in SVG?
body: <p>I have a small editor that creates .svg files with diagrams (using <a href="http://svgjs.com" rel="nofollow">svg.js</a>). </p>
  
  <p>The editor stores data about how the file created in its own simple text format, not unlike <a href="http://bramp.github.io/js-sequence-diagrams/" rel="nofollow">this one</a>.</p>
  
  <p>I would like to embed the source text directly in the SVG file, so I can load it back without losing any metainformation user specified (like comments and formatting).</p>
  
  <p>What is the proper way to do that? The editor I linked above stores its data in the <code>&lt;source&gt;</code> tag right under <code>&lt;svg&gt;</code>. Is this a good and standards-compliant approach?</p>
  
  <pre><code>&lt;svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="445" height="319" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
  &gt;
    &lt;source&gt;&lt;![CDATA[Andrew-&gt;China: Says Hello
    Note right of China: China thinks\nabout it
    China--&gt;Andrew: How are you?
    Andrew-&gt;&gt;China: I am good thanks!]]&gt;&lt;/source&gt;
    &lt;!-- SVG content here --&gt;
  &lt;/svg&gt;
  </code></pre>