title: Using predefined SVG file for creating a custom JointJS shape with ports
body: <p>I have a series of pre-created SVG symbols I want to use in JointJS.
  I've searched about using precreated SVGs and I found to be possible to create a complete custom elements using SVG by putting the SVG in the 'markup' property - (<a href="https://groups.google.com/forum/#!topic/jointjs/pQvN_0lXPVk" rel="nofollow">https://groups.google.com/forum/#!topic/jointjs/pQvN_0lXPVk</a>).</p>
  
  <p>Below is the example of an SVG. Your help about how can I embed this definition in the markup property and add ports to it will be highly appreciated.</p>
  
  <p>Thanks</p>
  
  <pre><code>&lt;?xml version="1.0" standalone="no"?&gt;
  &lt;svg viewBox="0 0 1024 768" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" stroke-linecap="round" stroke-linejoin="round" fill-rule="evenodd" xml:space="preserve" &gt;
  &lt;defs &gt;
  &lt;clipPath id="clipId0" &gt;
  &lt;path d="M0,768 1024,768 1024,0 0,0 z" /&gt;
  &lt;/clipPath&gt;
  &lt;/defs&gt;
  &lt;g stroke-width="0.1" clip-path="url(#clipId0)" fill="none" stroke="rgb(0,0,0)" /&gt;
  &lt;g stroke-width="0.25" clip-path="url(#clipId0)" fill="rgb(0,0,0)" stroke="none" &gt;
  &lt;path d="M1013.96,634.98 10.0392,634.98 1013.96,133.02 z" /&gt;
  &lt;/g&gt;
  &lt;g stroke-width="0.25" clip-path="url(#clipId0)" fill="none" stroke="rgb(0,0,0)" &gt;
  &lt;polyline points="10.0392,133.02 1013.96,133.02 1013.96,634.98 10.0392,634.98 10.0392,133.02 " /&gt;
  &lt;polyline points="10.0392,634.98 1013.96,133.02 " /&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>