A Pen by Mykhas' Kobernyk.

index.html

<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<div id="svg"></div>

script.js

// variables
var svgParams={
  width: 900,
  height: 600,
  color1: "#008800",
  // color2: "#cccc00",
  color2: "#cccccc",
  textColor: "#555555",
  textSize: "10px",
  rx: 5,
  ry: 10,
  text_top: 10,
  text_left: 0,
  strokeWidth: 0.2,
};
var hall={
  rows: 10,
  cols: 10,
};
var place={};

// init
var places = {};
var rows = {}; // rows group
svgParams.x = svgParams.width/(hall.cols + 1);
svgParams.y = svgParams.height/(hall.rows + 1);
place.width = svgParams.x * 0.7;
place.height = svgParams.y * 0.7;
svgParams.px = (svgParams.x - place.width)/2;
svgParams.py = (svgParams.y - place.height)/2;

// common functions
function inverse(){
  if(this.attr('fill') == svgParams.color1){
    this.attr({
      fill: svgParams.color2,
    });
  } else {
    this.attr({
      fill: svgParams.color1,
    });
  }
}

// generator

var s = Snap(svgParams.width, svgParams.height);

var topx, topy, g, text;
for (var i = 0; i <= hall.rows; i++) {
  places[i] = {};
  rows[i] = s.g();
  rows[i].node.id = 'row-'+i;
  for (var j = 0; j <= hall.cols; j++) {
    topx = svgParams.px + svgParams.x*j;
    topy = svgParams.py + svgParams.y*i;
    if(i == 0 && j == 0) {
      continue;
    } else if (i == 0) {
     text = s.paper.text(topx+svgParams.text_left, topy+svgParams.text_top, j);
     text.attr({
       "font-size": svgParams.textSize,
       fill: svgParams.textColor,
     });
    } else if (j == 0) {
     text = s.paper.text(topx+svgParams.text_left, topy+svgParams.text_top, i);
     text.attr({
       "font-size": svgParams.textSize,
       fill: svgParams.textColor,
     });
    } else {
      places[i][j] = s.paper.rect(topx, topy, place.width, place.height, svgParams.rx, svgParams.ry);
      places[i][j].attr({
        fill: svgParams.color1,
        stroke: svgParams.color2,
        strokeWidth: svgParams.strokeWidth,
      });
      places[i][j].hover(inverse, inverse);
      places[i][j].click(inverse);
      g = s.g();
      g.node.id = 'place-'+i+'-'+j;
      g.add(places[i][j]);
      rows[i].add(g);
    }
  }
}  

Seating-scheme.markdown

Seating scheme

A Pen by Mykhas' Kobernyk on CodePen.

License.

style.css

rect:hover {
  cursor: pointer;
}