h1 {
  text-align: center;
}

.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 60%;
  /* depends on svg ratio, for my zebra height/width = 1.2 so padding-bottom = 50% * 1.2 = 60% */
  vertical-align: middle;
  /* top | middle | bottom ... do what you want */
}

.my-svg {
  /* svg into : object, img or inline */
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* only required for <img /> */
  z-index: 0;
}

svg {
  border: solid 1px #0066bb;
}

.rectangle {
  fill: lightblue;
  stroke: blue;
  stroke-width: 2px;
  fill-opacity: 0.5;
}

.rectangle-bind {
  fill: none;
  stroke: #081c4e;
  stroke-width: 1px;
  stroke-dasharray: 5;
}

circle {
  fill: lightgreen;
  stroke: green;
  stroke-width: 2px;
  fill-opacity: 0.5;
}

.rect-active {
  fill: #1578db;
}

.pointC-active {
  fill: #FF8F00;
}

.circle-active {
  fill: #4CAF50;
}

path {
  fill: #ffb7b3;
  stroke: #ff4736;
  stroke-width: 5px;
}

polygon {
  fill: #b6eeff;
  fill-opacity: 0.5;
  stroke: #0067ff;
  stroke-width: 2px;
}

line {
  fill: none;
  stroke: #cd08ff;
  stroke-width: 2px;
}

polyline {
  fill: none;
  stroke: #563aff;
  stroke-width: 2px;
}

circle.handle {
  fill: yellow;
  stroke: #cb9c0f;
  stroke-width: 2px;
  cursor: pointer;
}