JointJS Shape with Ports from Existing SVG

Create a shape with ports from an existing SVG File

HTML

<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.7/joint.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.7/joint.css">
<!-- JointJS Fiddle -->
<div id="paper"></div>

CSS

#paper {
  display: inline-block;
  border: 1px solid gray;
  background: white;
}

JavaScript

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
  el: $('#paper'),
  width: 600,
  height: 600,
  gridSize: 20,
  model: graph
});

var svgFile = [
'<?xml version="1.0" encoding="utf-8"?>',
'<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">',
'<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30.083px" height="45.083px" viewBox="0 0 30.083 45.083" enable-background="new 0 0 30.083 45.083" xml:space="preserve">',
'<polyline fill="none" stroke="#000000" points="19.666,0.667 19.666,14 28.75,14 "/>',
'<polyline fill="none" stroke="#000000" points="28.75,10.668 19.666,30.916 19.666,44.666 "/>',
'<polyline fill="none" stroke="#000000" points="8.25,12.167 1,12.167 1,19.917 1,27.666 8.25,27.666 "/>',
'<line fill="none" stroke="#000000" x1="7.668" y1="19.917" x2="1" y2="19.917"/>',
'<line fill="none" stroke="#000000" x1="16.333" y1="19.917" x2="9.5" y2="19.917"/>',
'<path fill="none" stroke="#000000" d="M17.75,19.917"/>',
'<line fill="none" stroke="#000000" x1="24.599" y1="19.917" x2="17.75" y2="19.917"/>',
'</svg>'
].join('');


var el1 = new joint.shapes.devs.Model({
  markup: '<g class="rotatable"><g class="scalable"><image class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
  size: {
    width: 100,
    height: 100
  },
  position: {
    x: 50,
    y: 75
  },
  attrs: {
  '.inPorts .port0 .port-body' : {'ref-x': 0, 'ref-y': -20},
   '.label': { text: 'SW_1', 'ref-x': 13.1, 'ref-y': .01},
    '.body': {
      width: 1024,
      height: 768,
      'xlink:href': 'data:image/svg+xml;utf8,' + encodeURIComponent(svgFile),
      preserveAspectRatio: 'none'
    }
  },
  inPorts: ['1'],
  outPorts: ['2']
});

var el2 = el1.clone().position(300, 300).attr('.label/text','SW_2').resize(100, 100);

graph.addCells([el1, el2]);