title: Make SVG scrollable in mobile
body: <p><strong>How do I make an svg horizontally scrollable in mobile?</strong> </p>
  
  <p><em>Disclaimer: The examples below are simplified to focus on the issue of scrolling. I know I can get a scrollable box that looks like this with a <code>div</code> instead of an <code>svg</code>. But I'm working on making a <a href="https://www.ystoneman.com/portfolio/d3-demos/heat-map/" rel="nofollow noreferrer">heat-map in D3</a> with a large width.</em></p>
  
  <p>The following code is scrollable on desktop, but not on mobile:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
    background: linear-gradient(90deg, blue, yellow);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg height=300 width=1500&gt;&lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried following <a href="https://stackoverflow.com/questions/44179418/horizontal-scrolling-in-svg">the advice of giving the svg a container with a fixed width</a> 
   and <a href="https://stackoverflow.com/questions/8344688/how-to-get-scrollbars-in-svg">of making the svg bigger than the container</a>. But the result was the same—it works in desktop, not mobile:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    border: 2px dotted red;
    width: 500px;
  }
  
  svg {
    background: linear-gradient(90deg, blue, yellow);
    overflow: scrollbar
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg height=300 width=1500&gt;&lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tested the mobile scrolling on my iPhone 8 with the latest versions of the Chrome and Firefox browsers, by visiting the full-screen version of my <a href="http://jsfiddle.net/ystoneman/3na9v6ps/4/embedded/result" rel="nofollow noreferrer">jsfiddle</a>.</p>
  
  <p>According to <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/overflow" rel="nofollow noreferrer">MDN web docs</a>,</p>
  
  <blockquote>
    <p>the overflow attribute only applies to elements that establish new
    viewports</p>
  </blockquote>
  
  <p>But that doesn't account for the difference between mobile and desktop. And according to <a href="https://www.sarasoueidan.com/blog/nesting-svgs/" rel="nofollow noreferrer">Soueidan</a>, </p>
  
  <blockquote>
    <p>you can establish new viewports and user coordinate systems by ...
    nesting <code>&lt;svg&gt;</code>s</p>
  </blockquote>
  
  <p>...and I do already have an svg nested within the body, and would, therefore, have established a new viewport, making the overflow attribute applicable.</p>