diff --git a/core/block_svg.js b/core/block_svg.js
index d568207fd..4c5902ed5 100644
--- a/core/block_svg.js
+++ b/core/block_svg.js
@@ -1061,7 +1061,8 @@ Blockly.BlockSvg.prototype.updateDisabled = function() {
         /** @type {!Element} */ (this.svgGroup_), 'blocklyDisabled');
     if (added) {
       this.svgPath_.setAttribute('fill',
-          'url(#' + this.workspace.options.disabledPatternId + ')');
+          'url(#' +
+          this.workspace.getRenderer().getConstants().disabledPatternId + ')');
     }
   } else {
     var removed = Blockly.utils.dom.removeClass(
@@ -1253,7 +1254,8 @@ Blockly.BlockSvg.prototype.setHighlighted = function(highlighted) {
   }
   if (highlighted) {
     this.svgPath_.setAttribute('filter',
-        'url(#' + this.workspace.options.embossFilterId + ')');
+        'url(#' +
+        this.workspace.getRenderer().getConstants().embossFilterId + ')');
     this.svgPathLight_.style.display = 'none';
   } else {
     this.svgPath_.setAttribute('filter', 'none');
diff --git a/core/inject.js b/core/inject.js
index 805200e75..be46c684c 100644
--- a/core/inject.js
+++ b/core/inject.js
@@ -139,73 +139,6 @@ Blockly.createDom_ = function(container, options) {
   // instances on a page.  Browser behaviour becomes undefined otherwise.
   // https://neil.fraser.name/news/2015/11/01/
   var rnd = String(Math.random()).substring(2);
-  /*
-    <filter id="blocklyEmbossFilter837493">
-      <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur" />
-      <feSpecularLighting in="blur" surfaceScale="1" specularConstant="0.5"
-                          specularExponent="10" lighting-color="white"
-                          result="specOut">
-        <fePointLight x="-5000" y="-10000" z="20000" />
-      </feSpecularLighting>
-      <feComposite in="specOut" in2="SourceAlpha" operator="in"
-                   result="specOut" />
-      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
-                   k1="0" k2="1" k3="1" k4="0" />
-    </filter>
-  */
-  var embossFilter = Blockly.utils.dom.createSvgElement('filter',
-      {'id': 'blocklyEmbossFilter' + rnd}, defs);
-  Blockly.utils.dom.createSvgElement('feGaussianBlur',
-      {'in': 'SourceAlpha', 'stdDeviation': 1, 'result': 'blur'}, embossFilter);
-  var feSpecularLighting = Blockly.utils.dom.createSvgElement('feSpecularLighting',
-      {
-        'in': 'blur',
-        'surfaceScale': 1,
-        'specularConstant': 0.5,
-        'specularExponent': 10,
-        'lighting-color': 'white',
-        'result': 'specOut'
-      },
-      embossFilter);
-  Blockly.utils.dom.createSvgElement('fePointLight',
-      {'x': -5000, 'y': -10000, 'z': 20000}, feSpecularLighting);
-  Blockly.utils.dom.createSvgElement('feComposite',
-      {
-        'in': 'specOut',
-        'in2': 'SourceAlpha',
-        'operator': 'in',
-        'result': 'specOut'
-      }, embossFilter);
-  Blockly.utils.dom.createSvgElement('feComposite',
-      {
-        'in': 'SourceGraphic',
-        'in2': 'specOut',
-        'operator': 'arithmetic',
-        'k1': 0,
-        'k2': 1,
-        'k3': 1,
-        'k4': 0
-      }, embossFilter);
-  options.embossFilterId = embossFilter.id;
-  /*
-    <pattern id="blocklyDisabledPattern837493" patternUnits="userSpaceOnUse"
-             width="10" height="10">
-      <rect width="10" height="10" fill="#aaa" />
-      <path d="M 0 0 L 10 10 M 10 0 L 0 10" stroke="#cc0" />
-    </pattern>
-  */
-  var disabledPattern = Blockly.utils.dom.createSvgElement('pattern',
-      {
-        'id': 'blocklyDisabledPattern' + rnd,
-        'patternUnits': 'userSpaceOnUse',
-        'width': 10,
-        'height': 10
-      }, defs);
-  Blockly.utils.dom.createSvgElement('rect',
-      {'width': 10, 'height': 10, 'fill': '#aaa'}, disabledPattern);
-  Blockly.utils.dom.createSvgElement('path',
-      {'d': 'M 0 0 L 10 10 M 10 0 L 0 10', 'stroke': '#cc0'}, disabledPattern);
-  options.disabledPatternId = disabledPattern.id;
 
   options.gridPattern = Blockly.Grid.createDom(rnd, options.gridOptions, defs);
   return svg;
diff --git a/core/renderers/common/constants.js b/core/renderers/common/constants.js
index bfc753f09..fedfd85a7 100644
--- a/core/renderers/common/constants.js
+++ b/core/renderers/common/constants.js
@@ -398,3 +398,89 @@ Blockly.blockRendering.ConstantProvider.prototype.shapeFor = function(
       throw Error('Unknown connection type');
   }
 };
+
+/**
+ * Create any DOM elements that this renderer needs (filters, patterns, etc).
+ * @param {!SVGElement} svg The root of the workspace's SVG.
+ * @package
+ */
+Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg) {
+  /*
+  <defs>
+    ... filters go here ...
+  </defs>
+  */
+  var defs = Blockly.utils.dom.createSvgElement('defs', {}, svg);
+  // Each filter/pattern needs a unique ID for the case of multiple Blockly
+  // instances on a page.  Browser behaviour becomes undefined otherwise.
+  // https://neil.fraser.name/news/2015/11/01/
+  var rnd = String(Math.random()).substring(2);
+  /*
+    <filter id="blocklyEmbossFilter837493">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur" />
+      <feSpecularLighting in="blur" surfaceScale="1" specularConstant="0.5"
+                          specularExponent="10" lighting-color="white"
+                          result="specOut">
+        <fePointLight x="-5000" y="-10000" z="20000" />
+      </feSpecularLighting>
+      <feComposite in="specOut" in2="SourceAlpha" operator="in"
+                   result="specOut" />
+      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
+                   k1="0" k2="1" k3="1" k4="0" />
+    </filter>
+  */
+  var embossFilter = Blockly.utils.dom.createSvgElement('filter',
+      {'id': 'blocklyEmbossFilter' + rnd}, defs);
+  Blockly.utils.dom.createSvgElement('feGaussianBlur',
+      {'in': 'SourceAlpha', 'stdDeviation': 1, 'result': 'blur'}, embossFilter);
+  var feSpecularLighting = Blockly.utils.dom.createSvgElement('feSpecularLighting',
+      {
+        'in': 'blur',
+        'surfaceScale': 1,
+        'specularConstant': 0.5,
+        'specularExponent': 10,
+        'lighting-color': 'white',
+        'result': 'specOut'
+      },
+      embossFilter);
+  Blockly.utils.dom.createSvgElement('fePointLight',
+      {'x': -5000, 'y': -10000, 'z': 20000}, feSpecularLighting);
+  Blockly.utils.dom.createSvgElement('feComposite',
+      {
+        'in': 'specOut',
+        'in2': 'SourceAlpha',
+        'operator': 'in',
+        'result': 'specOut'
+      }, embossFilter);
+  Blockly.utils.dom.createSvgElement('feComposite',
+      {
+        'in': 'SourceGraphic',
+        'in2': 'specOut',
+        'operator': 'arithmetic',
+        'k1': 0,
+        'k2': 1,
+        'k3': 1,
+        'k4': 0
+      }, embossFilter);
+  this.embossFilterId = embossFilter.id;
+
+  /*
+    <pattern id="blocklyDisabledPattern837493" patternUnits="userSpaceOnUse"
+             width="10" height="10">
+      <rect width="10" height="10" fill="#aaa" />
+      <path d="M 0 0 L 10 10 M 10 0 L 0 10" stroke="#cc0" />
+    </pattern>
+  */
+  var disabledPattern = Blockly.utils.dom.createSvgElement('pattern',
+      {
+        'id': 'blocklyDisabledPattern' + rnd,
+        'patternUnits': 'userSpaceOnUse',
+        'width': 10,
+        'height': 10
+      }, defs);
+  Blockly.utils.dom.createSvgElement('rect',
+      {'width': 10, 'height': 10, 'fill': '#aaa'}, disabledPattern);
+  Blockly.utils.dom.createSvgElement('path',
+      {'d': 'M 0 0 L 10 10 M 10 0 L 0 10', 'stroke': '#cc0'}, disabledPattern);
+  this.disabledPatternId = disabledPattern.id;
+};
diff --git a/core/workspace_svg.js b/core/workspace_svg.js
index 4876dd0e0..9e961d8df 100644
--- a/core/workspace_svg.js
+++ b/core/workspace_svg.js
@@ -676,6 +676,7 @@ Blockly.WorkspaceSvg.prototype.createDom = function(opt_backgroundClass) {
   var svgMarker = this.marker_.getDrawer().createDom();
   this.svgGroup_.appendChild(svgMarker);
 
+  this.getRenderer().getConstants().createDom(this.svgGroup_);
   return this.svgGroup_;
 };