Simple Responsive Technique

by Nivaldo

HTML

<div id="container">
  <svg id="chart" width="600" height="400"
    viewBox="0 0 600 400"
    perserveAspectRatio="xMinYMid">
    <g><path id="linkId_0" class="link resolved" marker-end="url(#resolved)" d="M45.88771676493786,166.66567415760886A75,75 0 0,1 124.1451102538648,136.0364996142215"></path><path id="linkId_1" class="link resolved" marker-end="url(#resolved)" d="M140.55669794128636,254.15432893276744A75,75 0 0,1 140.55669794128636,254.15432893276744"></path><path id="linkId_2" class="link suit" marker-end="url(#suit)" d="M222.05219757573622,124.1143830400888A75,75 0 0,1 338.60438671353006,106.1655556939981"></path><path id="linkId_3" class="link suit" marker-end="url(#suit)" d="M124.1451102538648,136.0364996142215A75,75 0 0,1 222.05219757573622,124.1143830400888"></path><path id="linkId_4" class="link licensing" marker-end="url(#licensing)" d="M361.89324203511836,189.52473370397763A75,75 0 0,1 463.433564000502,183.54029744600007"></path><path id="linkId_5" class="link resolved" marker-end="url(#resolved)" d="M75.8075157336238,208.22500887590286A75,75 0 0,1 75.8075157336238,208.22500887590286"></path><path id="linkId_6" class="link suit" marker-end="url(#suit)" d="M180.89924762035963,277.7363850232242A75,75 0 0,1 180.89924762035963,277.7363850232242"></path><path id="linkId_7" class="link suit" marker-end="url(#suit)" d="M338.60438671353006,106.1655556939981A75,75 0 0,1 463.433564000502,183.54029744600007"></path><path id="linkId_8" class="link suit" marker-end="url(#suit)" d="M105.73199517516173,231.14986362035825A75,75 0 0,1 105.73199517516173,231.14986362035825"></path></g><text class="chapters" dx="20" dy="0" style="fill: #ff0000;"><textPath xlink:href="#linkId_0">16</textPath></text><text class="chapters" dx="20" dy="0" style="fill: #ff0000;"><textPath xlink:href="#linkId_1"></textPath></text><text class="chapters" dx="20" dy="0" style="fill: #ff0000;"><textPath xlink:href="#linkId_2">6</textPath></text><text class="chapters" dx="20" dy="0"...

CSS

#container {
    margin: 20px;
}
#chart {
    background-color: #eee;
}
#chart circle {
    fill-opacity: .8;
}
path.link {
			  fill: none;
			  stroke: #666;
			  stroke-width: 1.5px;
			}

			marker#licensing {
			  fill: green;
			}

			path.link.licensing {
			  stroke: green;
			}

			path.link.resolved {
			  stroke-dasharray: 0,2 1;
			}

			circle {
			  fill: #ccc;
			  stroke: #333;
			  stroke-width: 1.5px;
			}

			text {
			  font: 10px sans-serif;
			  pointer-events: none;
			}

			text.shadow {
			  stroke: #fff;
			  stroke-width: 3px;
			  stroke-opacity: .8;
			}

JavaScript

var chart = $("#chart"),
    aspect = chart.width() / chart.height(),
    container = chart.parent();
$(window).on("resize", function() {
    var targetWidth = container.width();
    chart.attr("width", targetWidth);
    chart.attr("height", Math.round(targetWidth / aspect));
}).trigger("resize");