SVG scoping must be explicitly enabled by the user

SVG scoping is disabled by default, to enable it the user
must call the core.display.SVG constructor with the scoped=True
keyword parameter.

IPython/core/display.py

@@ -363,6 +363,30 b' class Latex(DisplayObject):'
 
 class SVG(DisplayObject):
 
+    def __init__(self, data=None, url=None, filename=None, scoped=False):
+        """Create a SVG display object given raw data.
+
+        When this object is returned by an expression or passed to the
+        display function, it will result in the data being displayed
+        in the frontend. If the data is a URL, the data will first be
+        downloaded and then displayed.
+
+        Parameters
+        ----------
+        data : unicode, str or bytes
+            The Javascript source code or a URL to download it from.
+        url : unicode
+            A URL to download the data from.
+        filename : unicode
+            Path to a local file to load the data from.
+        scoped : bool
+            Should the SVG declarations be scoped.
+        """
+        if not isinstance(scoped, (bool)):
+            raise TypeError('expected bool, got: %r' % scoped)
+        self.scoped = scoped
+        super(SVG, self).__init__(data=data, url=url, filename=filename)
+
     # wrap data in a property, which extracts the <svg> tag, discarding
     # document headers
     _data = None
@@ -371,6 +395,8 b' class SVG(DisplayObject):'
     def data(self):
         return self._data
 
+    _scoped_class = "ipython-scoped"
+
     @data.setter
     def data(self, svg):
         if svg is None:
@@ -383,6 +409,12 b' class SVG(DisplayObject):'
         # get svg tag (should be 1)
         found_svg = x.getElementsByTagName('svg')
         if found_svg:
+            # If the user request scoping, tag the svg with the
+            # ipython-scoped class
+            if self.scoped:
+                classes = (found_svg[0].getAttribute('class') +
+                           " " + self._scoped_class)
+                found_svg[0].setAttribute('class', classes)
             svg = found_svg[0].toxml()
         else:
             # fallback on the input, trust the user

IPython/html/static/notebook/js/outputarea.js

@@ -494,36 +494,40 b' var IPython = (function (IPython) {'
 
 
     OutputArea.prototype.append_svg = function (svg, md, element) {
-        // To avoid style or use collisions between multiple svg figures,
-        // svg figures are wrapped inside an iframe.
-
-        var iframe = $('<iframe/>')
-        iframe.attr('frameborder', 0);
-        iframe.attr('scrolling', 'no');
-
-        var wrapper = $("<div/>").addClass("output_subarea output_svg");
+        var wrapper = $('<div/>').addClass('output_subarea output_svg');
         wrapper.append(svg);
+        var svg_element = wrapper.children()[0];
+
+        if (svg_element.classList.contains('ipython-scoped')) {
+            // To avoid style or use collisions between multiple svg figures,
+            // svg figures are wrapped inside an iframe.
+            var iframe = $('<iframe/>')
+                iframe.attr('frameborder', 0);
+            iframe.attr('scrolling', 'no');
+
+            // Once the iframe is loaded, the svg is dynamically inserted
+            iframe.on('load', function() {
+                // Set the iframe height and width to fit the svg
+                // (the +10 pixel offset handles the default body margins
+                // in Chrome)
+                iframe.width(svg_element.width.baseVal.value + 10);
+                iframe.height(svg_element.height.baseVal.value + 10);
+
+                // Workaround needed by Firefox, to properly render svg inside
+                // iframes, see http://stackoverflow.com/questions/10177190/
+                // svg-dynamically-added-to-iframe-does-not-render-correctly
+                iframe.contents()[0].open();
+                iframe.contents()[0].close();
+
+                // Insert the svg inside the iframe
+                var body = iframe.contents().find('body');
+                body.html(wrapper.html());
+            });
 
-        // Once the iframe is loaded, the svg is dynamically inserted
-        iframe.on('load', function() {
-            // Set the iframe height and width to fit the svg
-            // (the +10 pixel offset handles the default body margins
-            // in Chrome)
-            var svg = wrapper.children()[0];
-            iframe.width(svg.width.baseVal.value + 10);
-            iframe.height(svg.height.baseVal.value + 10);
-
-            // Workaround needed by Firefox, to properly render svg inside iframes,
-            // see http://stackoverflow.com/questions/10177190/svg-dynamically-added-to-iframe-does-not-render-correctly
-            iframe.contents()[0].open();
-            iframe.contents()[0].close();
-
-            // Insert the svg inside the iframe
-            var body = iframe.contents().find('body');
-            body.html(wrapper.html());
-        });
-
-        element.append(iframe);
+            element.append(iframe);
+        } else {
+            element.append(wrapper);
+        }
     };