<p dir="auto">I've been noticing lately that matplotlib's SVG output appears with incorrect clipping in a lot of SVG viewers (rsvg-view, Ristretto, gpicview), even though it does appear correctly in good SVG viewers like inkscape, firefox, chrome. The data curves peek outside of the axes. Luckily there is an fix in matplotlib that should be easy enough to implement:</p>
<p dir="auto">Currently, the SVG structure looks more or less like this, with the clipPath defined at the end:</p>
<div class="highlight highlight-text-xml notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;svg ..&gt;
 &lt;g id=&quot;figure_1&quot;&gt;
  &lt;g id=&quot;axes_1&quot;&gt;
  .... curves drawn in here, referencing clip-path p7ff5b81e1d
  &lt;/g&gt;
 &lt;/g&gt;
 &lt;defs&gt;
  &lt;clipPath id=&quot;p7ff5b81e1d&quot;&gt;
   &lt;rect height=&quot;345.6&quot; width=&quot;446.4&quot; x=&quot;72.0&quot; y=&quot;43.2&quot;/&gt;
  &lt;/clipPath&gt;
 &lt;/defs&gt;
&lt;/svg&gt;"><pre class="notranslate">&lt;<span class="pl-ent">svg</span> ..&gt;
 &lt;<span class="pl-ent">g</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>figure_1<span class="pl-pds">"</span></span>&gt;
  &lt;<span class="pl-ent">g</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>axes_1<span class="pl-pds">"</span></span>&gt;
  .... curves drawn in here, referencing clip-path p7ff5b81e1d
  &lt;/<span class="pl-ent">g</span>&gt;
 &lt;/<span class="pl-ent">g</span>&gt;
 &lt;<span class="pl-ent">defs</span>&gt;
  &lt;<span class="pl-ent">clipPath</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>p7ff5b81e1d<span class="pl-pds">"</span></span>&gt;
   &lt;<span class="pl-ent">rect</span> <span class="pl-e">height</span>=<span class="pl-s"><span class="pl-pds">"</span>345.6<span class="pl-pds">"</span></span> <span class="pl-e">width</span>=<span class="pl-s"><span class="pl-pds">"</span>446.4<span class="pl-pds">"</span></span> <span class="pl-e">x</span>=<span class="pl-s"><span class="pl-pds">"</span>72.0<span class="pl-pds">"</span></span> <span class="pl-e">y</span>=<span class="pl-s"><span class="pl-pds">"</span>43.2<span class="pl-pds">"</span></span>/&gt;
  &lt;/<span class="pl-ent">clipPath</span>&gt;
 &lt;/<span class="pl-ent">defs</span>&gt;
&lt;/<span class="pl-ent">svg</span>&gt;</pre></div>
<p dir="auto">I found that if I simply moved the  section containing that clipPath earlier in the file, then the SVG views just fine in any viewer that I can find. I guess that these basic SVG viewers don't like forward references.</p>
<p dir="auto">For examples, this works:</p>
<div class="highlight highlight-text-xml notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;svg ..&gt;
 &lt;g id=&quot;figure_1&quot;&gt;
 &lt;defs&gt;
  &lt;clipPath id=&quot;p7ff5b81e1d&quot;&gt;
   &lt;rect height=&quot;345.6&quot; width=&quot;446.4&quot; x=&quot;72.0&quot; y=&quot;43.2&quot;/&gt;
  &lt;/clipPath&gt;
 &lt;/defs&gt;
  &lt;g id=&quot;axes_1&quot;&gt;
  .... curves drawn in here, referencing clip-path p7ff5b81e1d
  &lt;/g&gt;
 &lt;/g&gt;
&lt;/svg&gt;"><pre class="notranslate">&lt;<span class="pl-ent">svg</span> ..&gt;
 &lt;<span class="pl-ent">g</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>figure_1<span class="pl-pds">"</span></span>&gt;
 &lt;<span class="pl-ent">defs</span>&gt;
  &lt;<span class="pl-ent">clipPath</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>p7ff5b81e1d<span class="pl-pds">"</span></span>&gt;
   &lt;<span class="pl-ent">rect</span> <span class="pl-e">height</span>=<span class="pl-s"><span class="pl-pds">"</span>345.6<span class="pl-pds">"</span></span> <span class="pl-e">width</span>=<span class="pl-s"><span class="pl-pds">"</span>446.4<span class="pl-pds">"</span></span> <span class="pl-e">x</span>=<span class="pl-s"><span class="pl-pds">"</span>72.0<span class="pl-pds">"</span></span> <span class="pl-e">y</span>=<span class="pl-s"><span class="pl-pds">"</span>43.2<span class="pl-pds">"</span></span>/&gt;
  &lt;/<span class="pl-ent">clipPath</span>&gt;
 &lt;/<span class="pl-ent">defs</span>&gt;
  &lt;<span class="pl-ent">g</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>axes_1<span class="pl-pds">"</span></span>&gt;
  .... curves drawn in here, referencing clip-path p7ff5b81e1d
  &lt;/<span class="pl-ent">g</span>&gt;
 &lt;/<span class="pl-ent">g</span>&gt;
&lt;/<span class="pl-ent">svg</span>&gt;</pre></div>
<p dir="auto">I would attach an example SVG but github doesn't seem to support that...</p>
<p dir="auto">See my stackoverflow post: <a href="http://stackoverflow.com/questions/29616764/matplotlib-savefig-produces-incorrect-svg-image-for-bar-chart-with-log-scaled-y" rel="nofollow">http://stackoverflow.com/questions/29616764/matplotlib-savefig-produces-incorrect-svg-image-for-bar-chart-with-log-scaled-y</a></p>
<p dir="auto">A potential solution to the issue is described here: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="64073935" data-permission-text="Title is private" data-url="https://github.com/ipython/ipython/issues/8133" data-hovercard-type="issue" data-hovercard-url="/ipython/ipython/issues/8133/hovercard?comment_id=93051239&amp;comment_type=issue_comment" href="https://github.com/ipython/ipython/issues/8133#issuecomment-93051239">ipython/ipython#8133 (comment)</a></p>