Scale SVG graphics with only css

index.html

<div id="box">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

Scale SVG graphics with only css.markdown

Scale SVG graphics with only css

Make SVG graphics responsive with CSS. Useful for scale down d3 charts on mobile devices.

A Pen by Riccardo Scalco on CodePen.

License.

script.js

var w = 100,
    h = 100;

// https://css-tricks.com/scale-svg/
// padding-bottom Hack on an Inline <svg> Element
var svg = d3.select("#box")
  .append("svg")
  .attr("viewBox", "0 0 " + w + " " + h)
  .attr("preserveAspectRatio", "xMidYMin slice")
  .attr("width", "100%")
  .style({
    "padding-bottom": (100 * h / w) + "%",
    "height": "1px",
    "overflow": "visible"
  });

svg.append("circle")
  .attr("cx", w / 2)
  .attr("cy", h / 2)
  .attr("r", w / 2)
  .style("fill", "limegreen");
  

style.css

#box {
  max-width: 600px;
}