Move setCssTransform & createSvgElement to dom.

Also move SVG_NS and HTML_NS properties.
2026-01-14 12:27:10 +01:00 · 2019-06-07 00:52:40 -07:00
parent 775ce34eac
commit 848d3a3509
27 changed files with 176 additions and 179 deletions
--- a/core/block_animations.js
+++ b/core/block_animations.js
@@ -26,7 +26,6 @@

 goog.provide('Blockly.BlockAnimations');

-goog.require('Blockly.utils');
 goog.require('Blockly.utils.dom');


@@ -117,7 +116,7 @@ Blockly.BlockAnimations.connectionUiEffect = function(block) {
    xy.x += (block.RTL ? -23 : 23) * scale;
    xy.y += 3 * scale;
  }
-  var ripple = Blockly.utils.createSvgElement('circle',
+  var ripple = Blockly.utils.dom.createSvgElement('circle',
      {
        'cx': xy.x,
        'cy': xy.y,
--- a/core/block_drag_surface.js
+++ b/core/block_drag_surface.js
@@ -32,6 +32,7 @@
 goog.provide('Blockly.BlockDragSurfaceSvg');
 goog.require('Blockly.utils');
 goog.require('Blockly.utils.Coordinate');
+goog.require('Blockly.utils.dom');


 /**
@@ -95,14 +96,14 @@ Blockly.BlockDragSurfaceSvg.prototype.createDom = function() {
  if (this.SVG_) {
    return;  // Already created.
  }
-  this.SVG_ = Blockly.utils.createSvgElement('svg', {
-    'xmlns': Blockly.SVG_NS,
-    'xmlns:html': Blockly.HTML_NS,
+  this.SVG_ = Blockly.utils.dom.createSvgElement('svg', {
+    'xmlns': Blockly.utils.dom.SVG_NS,
+    'xmlns:html': Blockly.utils.dom.HTML_NS,
    'xmlns:xlink': 'http://www.w3.org/1999/xlink',
    'version': '1.1',
    'class': 'blocklyBlockDragSurface'
  }, this.container_);
-  this.dragGroup_ = Blockly.utils.createSvgElement('g', {}, this.SVG_);
+  this.dragGroup_ = Blockly.utils.dom.createSvgElement('g', {}, this.SVG_);
 };

 /**
@@ -152,7 +153,7 @@ Blockly.BlockDragSurfaceSvg.prototype.translateSurfaceInternal_ = function() {
  y = y.toFixed(0);
  this.SVG_.style.display = 'block';

-  Blockly.utils.setCssTransform(this.SVG_,
+  Blockly.utils.dom.setCssTransform(this.SVG_,
      'translate3d(' + x + 'px, ' + y + 'px, 0px)');
 };

--- a/core/block_svg.js
+++ b/core/block_svg.js
@@ -59,14 +59,14 @@ Blockly.BlockSvg = function(workspace, prototypeName, opt_id) {
   * @type {SVGElement}
   * @private
   */
-  this.svgGroup_ = Blockly.utils.createSvgElement('g', {}, null);
+  this.svgGroup_ = Blockly.utils.dom.createSvgElement('g', {}, null);
  this.svgGroup_.translate_ = '';

  /**
   * @type {SVGElement}
   * @private
   */
-  this.svgPathDark_ = Blockly.utils.createSvgElement('path',
+  this.svgPathDark_ = Blockly.utils.dom.createSvgElement('path',
      {'class': 'blocklyPathDark', 'transform': 'translate(1,1)'},
      this.svgGroup_);

@@ -74,14 +74,14 @@ Blockly.BlockSvg = function(workspace, prototypeName, opt_id) {
   * @type {SVGElement}
   * @private
   */
-  this.svgPath_ = Blockly.utils.createSvgElement('path',
+  this.svgPath_ = Blockly.utils.dom.createSvgElement('path',
      {'class': 'blocklyPath'}, this.svgGroup_);

  /**
   * @type {SVGElement}
   * @private
   */
-  this.svgPathLight_ = Blockly.utils.createSvgElement('path',
+  this.svgPathLight_ = Blockly.utils.dom.createSvgElement('path',
      {'class': 'blocklyPathLight'}, this.svgGroup_);
  this.svgPath_.tooltip = this;

--- a/core/bubble.js
+++ b/core/bubble.js
@@ -224,7 +224,7 @@ Blockly.Bubble.prototype.createDom_ = function(content, hasResize) {
    [...content goes here...]
  </g>
  */
-  this.bubbleGroup_ = Blockly.utils.createSvgElement('g', {}, null);
+  this.bubbleGroup_ = Blockly.utils.dom.createSvgElement('g', {}, null);
  var filter =
      {'filter': 'url(#' + this.workspace_.options.embossFilterId + ')'};
  if (Blockly.utils.userAgent.JAVA_FX) {
@@ -232,10 +232,10 @@ Blockly.Bubble.prototype.createDom_ = function(content, hasResize) {
    // https://github.com/google/blockly/issues/99
    filter = {};
  }
-  var bubbleEmboss = Blockly.utils.createSvgElement('g',
+  var bubbleEmboss = Blockly.utils.dom.createSvgElement('g',
      filter, this.bubbleGroup_);
-  this.bubbleArrow_ = Blockly.utils.createSvgElement('path', {}, bubbleEmboss);
-  this.bubbleBack_ = Blockly.utils.createSvgElement('rect',
+  this.bubbleArrow_ = Blockly.utils.dom.createSvgElement('path', {}, bubbleEmboss);
+  this.bubbleBack_ = Blockly.utils.dom.createSvgElement('rect',
      {
        'class': 'blocklyDraggable',
        'x': 0,
@@ -245,21 +245,21 @@ Blockly.Bubble.prototype.createDom_ = function(content, hasResize) {
      },
      bubbleEmboss);
  if (hasResize) {
-    this.resizeGroup_ = Blockly.utils.createSvgElement('g',
+    this.resizeGroup_ = Blockly.utils.dom.createSvgElement('g',
        {'class': this.workspace_.RTL ?
                  'blocklyResizeSW' : 'blocklyResizeSE'},
        this.bubbleGroup_);
    var resizeSize = 2 * Blockly.Bubble.BORDER_WIDTH;
-    Blockly.utils.createSvgElement('polygon',
+    Blockly.utils.dom.createSvgElement('polygon',
        {'points': '0,x x,x x,0'.replace(/x/g, resizeSize.toString())},
        this.resizeGroup_);
-    Blockly.utils.createSvgElement('line',
+    Blockly.utils.dom.createSvgElement('line',
        {
          'class': 'blocklyResizeLine',
          'x1': resizeSize / 3, 'y1': resizeSize - 1,
          'x2': resizeSize - 1, 'y2': resizeSize / 3
        }, this.resizeGroup_);
-    Blockly.utils.createSvgElement('line',
+    Blockly.utils.dom.createSvgElement('line',
        {
          'class': 'blocklyResizeLine',
          'x1': resizeSize * 2 / 3,
--- a/core/comment.js
+++ b/core/comment.js
@@ -31,7 +31,7 @@ goog.require('Blockly.Events');
 goog.require('Blockly.Events.BlockChange');
 goog.require('Blockly.Events.Ui');
 goog.require('Blockly.Icon');
-goog.require('Blockly.utils');
+goog.provide('Blockly.utils.dom');
 goog.require('Blockly.utils.userAgent');


@@ -72,13 +72,13 @@ Blockly.Comment.prototype.height_ = 80;
 */
 Blockly.Comment.prototype.drawIcon_ = function(group) {
  // Circle.
-  Blockly.utils.createSvgElement('circle',
+  Blockly.utils.dom.createSvgElement('circle',
      {'class': 'blocklyIconShape', 'r': '8', 'cx': '8', 'cy': '8'},
      group);
  // Can't use a real '?' text character since different browsers and operating
  // systems render it differently.
  // Body of question mark.
-  Blockly.utils.createSvgElement('path',
+  Blockly.utils.dom.createSvgElement('path',
      {
        'class': 'blocklyIconSymbol',
        'd': 'm6.8,10h2c0.003,-0.617 0.271,-0.962 0.633,-1.266 2.875,-2.405' +
@@ -86,7 +86,7 @@ Blockly.Comment.prototype.drawIcon_ = function(group) {
          '-1.201,0.998 -1.201,1.528 -1.204,2.19z'},
      group);
  // Dot of question mark.
-  Blockly.utils.createSvgElement('rect',
+  Blockly.utils.dom.createSvgElement('rect',
      {
        'class': 'blocklyIconSymbol',
        'x': '6.8',
@@ -112,13 +112,13 @@ Blockly.Comment.prototype.createEditor_ = function() {
      </body>
    </foreignObject>
  */
-  this.foreignObject_ = Blockly.utils.createSvgElement('foreignObject',
+  this.foreignObject_ = Blockly.utils.dom.createSvgElement('foreignObject',
      {'x': Blockly.Bubble.BORDER_WIDTH, 'y': Blockly.Bubble.BORDER_WIDTH},
      null);
-  var body = document.createElementNS(Blockly.HTML_NS, 'body');
-  body.setAttribute('xmlns', Blockly.HTML_NS);
+  var body = document.createElementNS(Blockly.utils.dom.HTML_NS, 'body');
+  body.setAttribute('xmlns', Blockly.utils.dom.HTML_NS);
  body.className = 'blocklyMinimalBody';
-  var textarea = document.createElementNS(Blockly.HTML_NS, 'textarea');
+  var textarea = document.createElementNS(Blockly.utils.dom.HTML_NS, 'textarea');
  textarea.className = 'blocklyCommentTextarea';
  textarea.setAttribute('dir', this.block_.RTL ? 'RTL' : 'LTR');
  body.appendChild(textarea);
--- a/core/constants.js
+++ b/core/constants.js
@@ -129,18 +129,6 @@ Blockly.SPRITE = {

 // Constants below this point are not intended to be changed.

-/**
- * Required name space for SVG elements.
- * @const
- */
-Blockly.SVG_NS = 'http://www.w3.org/2000/svg';
-
-/**
- * Required name space for HTML elements.
- * @const
- */
-Blockly.HTML_NS = 'http://www.w3.org/1999/xhtml';
-
 /**
 * ENUM for a right-facing value input.  E.g. 'set item to' or 'return'.
 * @const
--- a/core/field.js
+++ b/core/field.js
@@ -31,7 +31,6 @@ goog.provide('Blockly.Field');
 goog.require('Blockly.Events');
 goog.require('Blockly.Events.BlockChange');
 goog.require('Blockly.Gesture');
-goog.require('Blockly.utils');
 goog.require('Blockly.utils.dom');
 goog.require('Blockly.utils.userAgent');

@@ -230,7 +229,7 @@ Blockly.Field.prototype.init = function() {
    // Field has already been initialized once.
    return;
  }
-  this.fieldGroup_ = Blockly.utils.createSvgElement('g', {}, null);
+  this.fieldGroup_ = Blockly.utils.dom.createSvgElement('g', {}, null);
  if (!this.isVisible()) {
    this.fieldGroup_.style.display = 'none';
  }
@@ -258,7 +257,7 @@ Blockly.Field.prototype.initView = function() {
 * @protected
 */
 Blockly.Field.prototype.createBorderRect_ = function() {
-  this.borderRect_ = Blockly.utils.createSvgElement('rect',
+  this.borderRect_ = Blockly.utils.dom.createSvgElement('rect',
      {
        'rx': 4,
        'ry': 4,
@@ -276,7 +275,7 @@ Blockly.Field.prototype.createBorderRect_ = function() {
 * @protected
 */
 Blockly.Field.prototype.createTextElement_ = function() {
-  this.textElement_ = Blockly.utils.createSvgElement('text',
+  this.textElement_ = Blockly.utils.dom.createSvgElement('text',
      {
        'class': 'blocklyText',
        'y': this.size_.height - 12.5
--- a/core/field_angle.js
+++ b/core/field_angle.js
@@ -28,7 +28,7 @@ goog.provide('Blockly.FieldAngle');

 goog.require('Blockly.DropDownDiv');
 goog.require('Blockly.FieldTextInput');
-goog.require('Blockly.utils');
+goog.provide('Blockly.utils.dom');
 goog.require('Blockly.utils.math');
 goog.require('Blockly.utils.userAgent');

@@ -125,7 +125,7 @@ Blockly.FieldAngle.RADIUS = Blockly.FieldAngle.HALF - 1;
 Blockly.FieldAngle.prototype.initView = function() {
  Blockly.FieldAngle.superClass_.initView.call(this);
  // Add the degree symbol to the left of the number, even in RTL (issue #2380)
-  this.symbol_ = Blockly.utils.createSvgElement('tspan', {}, null);
+  this.symbol_ = Blockly.utils.dom.createSvgElement('tspan', {}, null);
  this.symbol_.appendChild(document.createTextNode('\u00B0'));
  this.textElement_.appendChild(this.symbol_);
 };
@@ -176,7 +176,7 @@ Blockly.FieldAngle.prototype.showEditor_ = function() {
  var div = Blockly.DropDownDiv.getContentDiv();

  // Build the SVG DOM.
-  var svg = Blockly.utils.createSvgElement('svg', {
+  var svg = Blockly.utils.dom.createSvgElement('svg', {
    'xmlns': 'http://www.w3.org/2000/svg',
    'xmlns:html': 'http://www.w3.org/1999/xhtml',
    'xmlns:xlink': 'http://www.w3.org/1999/xlink',
@@ -184,21 +184,21 @@ Blockly.FieldAngle.prototype.showEditor_ = function() {
    'height': (Blockly.FieldAngle.HALF * 2) + 'px',
    'width': (Blockly.FieldAngle.HALF * 2) + 'px'
  }, div);
-  var circle = Blockly.utils.createSvgElement('circle', {
+  var circle = Blockly.utils.dom.createSvgElement('circle', {
    'cx': Blockly.FieldAngle.HALF, 'cy': Blockly.FieldAngle.HALF,
    'r': Blockly.FieldAngle.RADIUS,
    'class': 'blocklyAngleCircle'
  }, svg);
-  this.gauge_ = Blockly.utils.createSvgElement('path',
+  this.gauge_ = Blockly.utils.dom.createSvgElement('path',
      {'class': 'blocklyAngleGauge'}, svg);
-  this.line_ = Blockly.utils.createSvgElement('line', {
+  this.line_ = Blockly.utils.dom.createSvgElement('line', {
    'x1': Blockly.FieldAngle.HALF,
    'y1': Blockly.FieldAngle.HALF,
    'class': 'blocklyAngleLine'
  }, svg);
  // Draw markers around the edge.
  for (var angle = 0; angle < 360; angle += 15) {
-    Blockly.utils.createSvgElement('line', {
+    Blockly.utils.dom.createSvgElement('line', {
      'x1': Blockly.FieldAngle.HALF + Blockly.FieldAngle.RADIUS,
      'y1': Blockly.FieldAngle.HALF,
      'x2': Blockly.FieldAngle.HALF + Blockly.FieldAngle.RADIUS -
--- a/core/field_dropdown.js
+++ b/core/field_dropdown.js
@@ -137,12 +137,12 @@ Blockly.FieldDropdown.prototype.imageJson_ = null;
 Blockly.FieldDropdown.prototype.initView = function() {
  Blockly.FieldDropdown.superClass_.initView.call(this);

-  this.imageElement_ = Blockly.utils.createSvgElement( 'image',
+  this.imageElement_ = Blockly.utils.dom.createSvgElement( 'image',
      {
        'y': Blockly.FieldDropdown.IMAGE_Y_OFFSET
      }, this.fieldGroup_);

-  this.arrow_ = Blockly.utils.createSvgElement('tspan', {}, this.textElement_);
+  this.arrow_ = Blockly.utils.dom.createSvgElement('tspan', {}, this.textElement_);
  this.arrow_.appendChild(document.createTextNode(
      this.sourceBlock_.RTL ?
      Blockly.FieldDropdown.ARROW_CHAR + ' ' :
--- a/core/field_image.js
+++ b/core/field_image.js
@@ -117,7 +117,7 @@ Blockly.FieldImage.prototype.isDirty_ = false;
 * @package
 */
 Blockly.FieldImage.prototype.initView = function() {
-  this.imageElement_ = Blockly.utils.createSvgElement(
+  this.imageElement_ = Blockly.utils.dom.createSvgElement(
      'image',
      {
        'height': this.height_ + 'px',
--- a/core/flyout_base.js
+++ b/core/flyout_base.js
@@ -213,9 +213,9 @@ Blockly.Flyout.prototype.createDom = function(tagName) {
  */
  // Setting style to display:none to start. The toolbox and flyout
  // hide/show code will set up proper visibility and size later.
-  this.svgGroup_ = Blockly.utils.createSvgElement(tagName,
+  this.svgGroup_ = Blockly.utils.dom.createSvgElement(tagName,
      {'class': 'blocklyFlyout', 'style': 'display: none'}, null);
-  this.svgBackground_ = Blockly.utils.createSvgElement('path',
+  this.svgBackground_ = Blockly.utils.dom.createSvgElement('path',
      {'class': 'blocklyFlyoutBackground'}, this.svgGroup_);
  this.svgGroup_.appendChild(this.workspace_.createDom());
  return this.svgGroup_;
@@ -376,7 +376,7 @@ Blockly.Flyout.prototype.positionAt_ = function(width, height, x, y) {
  this.svgGroup_.setAttribute("height", height);
  if (this.svgGroup_.tagName == 'svg') {
    var transform = 'translate(' + x + 'px,' + y + 'px)';
-    Blockly.utils.setCssTransform(this.svgGroup_, transform);
+    Blockly.utils.dom.setCssTransform(this.svgGroup_, transform);
  } else {
    // IE and Edge don't support CSS transforms on SVG elements so
    // it's important to set the transform on the SVG element itself
@@ -693,7 +693,7 @@ Blockly.Flyout.prototype.initFlyoutButton_ = function(button, x, y) {
 Blockly.Flyout.prototype.createRect_ = function(block, x, y, blockHW, index) {
  // Create an invisible rectangle under the block to act as a button.  Just
  // using the block as a button is poor, since blocks have holes in them.
-  var rect = Blockly.utils.createSvgElement('rect',
+  var rect = Blockly.utils.dom.createSvgElement('rect',
      {
        'fill-opacity': 0,
        'x': x,
--- a/core/flyout_button.js
+++ b/core/flyout_button.js
@@ -123,12 +123,12 @@ Blockly.FlyoutButton.prototype.createDom = function() {
    cssClass += ' ' + this.cssClass_;
  }

-  this.svgGroup_ = Blockly.utils.createSvgElement('g', {'class': cssClass},
+  this.svgGroup_ = Blockly.utils.dom.createSvgElement('g', {'class': cssClass},
      this.workspace_.getCanvas());

  if (!this.isLabel_) {
    // Shadow rectangle (light source does not mirror in RTL).
-    var shadow = Blockly.utils.createSvgElement('rect',
+    var shadow = Blockly.utils.dom.createSvgElement('rect',
        {
          'class': 'blocklyFlyoutButtonShadow',
          'rx': 4, 'ry': 4, 'x': 1, 'y': 1
@@ -136,7 +136,7 @@ Blockly.FlyoutButton.prototype.createDom = function() {
        this.svgGroup_);
  }
  // Background rectangle.
-  var rect = Blockly.utils.createSvgElement('rect',
+  var rect = Blockly.utils.dom.createSvgElement('rect',
      {
        'class': this.isLabel_ ?
            'blocklyFlyoutLabelBackground' : 'blocklyFlyoutButtonBackground',
@@ -144,7 +144,7 @@ Blockly.FlyoutButton.prototype.createDom = function() {
      },
      this.svgGroup_);

-  var svgText = Blockly.utils.createSvgElement('text',
+  var svgText = Blockly.utils.dom.createSvgElement('text',
      {
        'class': this.isLabel_ ? 'blocklyFlyoutLabelText' : 'blocklyText',
        'x': 0,
--- a/core/grid.js
+++ b/core/grid.js
@@ -27,7 +27,7 @@

 goog.provide('Blockly.Grid');

-goog.require('Blockly.utils');
+goog.provide('Blockly.utils.dom');
 goog.require('Blockly.utils.userAgent');


@@ -208,22 +208,22 @@ Blockly.Grid.createDom = function(rnd, gridOptions, defs) {
      <rect stroke="#888" />
    </pattern>
  */
-  var gridPattern = Blockly.utils.createSvgElement('pattern',
+  var gridPattern = Blockly.utils.dom.createSvgElement('pattern',
      {
        'id': 'blocklyGridPattern' + rnd,
        'patternUnits': 'userSpaceOnUse'
      }, defs);
  if (gridOptions['length'] > 0 && gridOptions['spacing'] > 0) {
-    Blockly.utils.createSvgElement('line',
+    Blockly.utils.dom.createSvgElement('line',
        {'stroke': gridOptions['colour']}, gridPattern);
    if (gridOptions['length'] > 1) {
-      Blockly.utils.createSvgElement('line',
+      Blockly.utils.dom.createSvgElement('line',
          {'stroke': gridOptions['colour']}, gridPattern);
    }
    // x1, y1, x1, x2 properties will be set later in update.
  } else {
    // Edge 16 doesn't handle empty patterns
-    Blockly.utils.createSvgElement('line', {}, gridPattern);
+    Blockly.utils.dom.createSvgElement('line', {}, gridPattern);
  }
  return gridPattern;
 };
--- a/core/icon.js
+++ b/core/icon.js
@@ -77,7 +77,7 @@ Blockly.Icon.prototype.createIcon = function() {
    ...
  </g>
  */
-  this.iconGroup_ = Blockly.utils.createSvgElement('g',
+  this.iconGroup_ = Blockly.utils.dom.createSvgElement('g',
      {'class': 'blocklyIconGroup'}, null);
  if (this.block_.isInFlyout) {
    Blockly.utils.dom.addClass(
--- a/core/inject.js
+++ b/core/inject.js
@@ -112,7 +112,7 @@ Blockly.createDom_ = function(container, options) {
    ...
  </svg>
  */
-  var svg = Blockly.utils.createSvgElement('svg', {
+  var svg = Blockly.utils.dom.createSvgElement('svg', {
    'xmlns': 'http://www.w3.org/2000/svg',
    'xmlns:html': 'http://www.w3.org/1999/xhtml',
    'xmlns:xlink': 'http://www.w3.org/1999/xlink',
@@ -124,7 +124,7 @@ Blockly.createDom_ = function(container, options) {
    ... filters go here ...
  </defs>
  */
-  var defs = Blockly.utils.createSvgElement('defs', {}, svg);
+  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/
@@ -143,11 +143,11 @@ Blockly.createDom_ = function(container, options) {
                   k1="0" k2="1" k3="1" k4="0" />
    </filter>
  */
-  var embossFilter = Blockly.utils.createSvgElement('filter',
+  var embossFilter = Blockly.utils.dom.createSvgElement('filter',
      {'id': 'blocklyEmbossFilter' + rnd}, defs);
-  Blockly.utils.createSvgElement('feGaussianBlur',
+  Blockly.utils.dom.createSvgElement('feGaussianBlur',
      {'in': 'SourceAlpha', 'stdDeviation': 1, 'result': 'blur'}, embossFilter);
-  var feSpecularLighting = Blockly.utils.createSvgElement('feSpecularLighting',
+  var feSpecularLighting = Blockly.utils.dom.createSvgElement('feSpecularLighting',
      {
        'in': 'blur',
        'surfaceScale': 1,
@@ -157,16 +157,16 @@ Blockly.createDom_ = function(container, options) {
        'result': 'specOut'
      },
      embossFilter);
-  Blockly.utils.createSvgElement('fePointLight',
+  Blockly.utils.dom.createSvgElement('fePointLight',
      {'x': -5000, 'y': -10000, 'z': 20000}, feSpecularLighting);
-  Blockly.utils.createSvgElement('feComposite',
+  Blockly.utils.dom.createSvgElement('feComposite',
      {
        'in': 'specOut',
        'in2': 'SourceAlpha',
        'operator': 'in',
        'result': 'specOut'
      }, embossFilter);
-  Blockly.utils.createSvgElement('feComposite',
+  Blockly.utils.dom.createSvgElement('feComposite',
      {
        'in': 'SourceGraphic',
        'in2': 'specOut',
@@ -184,16 +184,16 @@ Blockly.createDom_ = function(container, options) {
      <path d="M 0 0 L 10 10 M 10 0 L 0 10" stroke="#cc0" />
    </pattern>
  */
-  var disabledPattern = Blockly.utils.createSvgElement('pattern',
+  var disabledPattern = Blockly.utils.dom.createSvgElement('pattern',
      {
        'id': 'blocklyDisabledPattern' + rnd,
        'patternUnits': 'userSpaceOnUse',
        'width': 10,
        'height': 10
      }, defs);
-  Blockly.utils.createSvgElement('rect',
+  Blockly.utils.dom.createSvgElement('rect',
      {'width': 10, 'height': 10, 'fill': '#aaa'}, disabledPattern);
-  Blockly.utils.createSvgElement('path',
+  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;

--- a/core/mutator.js
+++ b/core/mutator.js
@@ -70,7 +70,7 @@ Blockly.Mutator.prototype.workspaceHeight_ = 0;
 */
 Blockly.Mutator.prototype.drawIcon_ = function(group) {
  // Square with rounded corners.
-  Blockly.utils.createSvgElement('rect',
+  Blockly.utils.dom.createSvgElement('rect',
      {
        'class': 'blocklyIconShape',
        'rx': '4',
@@ -80,7 +80,7 @@ Blockly.Mutator.prototype.drawIcon_ = function(group) {
      },
      group);
  // Gear teeth.
-  Blockly.utils.createSvgElement('path',
+  Blockly.utils.dom.createSvgElement('path',
      {
        'class': 'blocklyIconSymbol',
        'd': 'm4.203,7.296 0,1.368 -0.92,0.677 -0.11,0.41 0.9,1.559 0.41,' +
@@ -93,7 +93,7 @@ Blockly.Mutator.prototype.drawIcon_ = function(group) {
      },
      group);
  // Axle hole.
-  Blockly.utils.createSvgElement(
+  Blockly.utils.dom.createSvgElement(
      'circle',
      {
        'class': 'blocklyIconShape',
@@ -128,7 +128,7 @@ Blockly.Mutator.prototype.createEditor_ = function() {
    [Workspace]
  </svg>
  */
-  this.svgDialog_ = Blockly.utils.createSvgElement('svg',
+  this.svgDialog_ = Blockly.utils.dom.createSvgElement('svg',
      {'x': Blockly.Bubble.BORDER_WIDTH, 'y': Blockly.Bubble.BORDER_WIDTH},
      null);
  // Convert the list of names into a list of XML objects for the flyout.
--- a/core/rendered_connection.js
+++ b/core/rendered_connection.js
@@ -210,7 +210,7 @@ Blockly.RenderedConnection.prototype.highlight = function() {
  var xy = this.sourceBlock_.getRelativeToSurfaceXY();
  var x = this.x_ - xy.x;
  var y = this.y_ - xy.y;
-  Blockly.Connection.highlightedPath_ = Blockly.utils.createSvgElement(
+  Blockly.Connection.highlightedPath_ = Blockly.utils.dom.createSvgElement(
      'path',
      {
        'class': 'blocklyHighlightedConnectionPath',
--- a/core/scrollbar.js
+++ b/core/scrollbar.js
@@ -49,7 +49,7 @@ Blockly.ScrollbarPair = function(workspace) {
      workspace, true, true, 'blocklyMainWorkspaceScrollbar');
  this.vScroll = new Blockly.Scrollbar(
      workspace, false, true, 'blocklyMainWorkspaceScrollbar');
-  this.corner_ = Blockly.utils.createSvgElement(
+  this.corner_ = Blockly.utils.dom.createSvgElement(
      'rect',
      {
        'height': Blockly.Scrollbar.scrollbarThickness,
@@ -410,7 +410,7 @@ Blockly.Scrollbar.prototype.setPosition_ = function(x, y) {
  var tempX = this.position_.x + this.origin_.x;
  var tempY = this.position_.y + this.origin_.y;
  var transform = 'translate(' + tempX + 'px,' + tempY + 'px)';
-  Blockly.utils.setCssTransform(this.outerSvg_, transform);
+  Blockly.utils.dom.setCssTransform(this.outerSvg_, transform);
 };

 /**
@@ -611,13 +611,13 @@ Blockly.Scrollbar.prototype.createDom_ = function(opt_class) {
  if (opt_class) {
    className += ' ' + opt_class;
  }
-  this.outerSvg_ = Blockly.utils.createSvgElement(
+  this.outerSvg_ = Blockly.utils.dom.createSvgElement(
      'svg', {'class': className}, null);
-  this.svgGroup_ = Blockly.utils.createSvgElement('g', {}, this.outerSvg_);
-  this.svgBackground_ = Blockly.utils.createSvgElement(
+  this.svgGroup_ = Blockly.utils.dom.createSvgElement('g', {}, this.outerSvg_);
+  this.svgBackground_ = Blockly.utils.dom.createSvgElement(
      'rect', {'class': 'blocklyScrollbarBackground'}, this.svgGroup_);
  var radius = Math.floor((Blockly.Scrollbar.scrollbarThickness - 5) / 2);
-  this.svgHandle_ = Blockly.utils.createSvgElement(
+  this.svgHandle_ = Blockly.utils.dom.createSvgElement(
      'rect',
      {
        'class': 'blocklyScrollbarHandle',
--- a/core/trashcan.js
+++ b/core/trashcan.js
@@ -26,7 +26,6 @@

 goog.provide('Blockly.Trashcan');

-goog.require('Blockly.utils');
 goog.require('Blockly.utils.dom');
 goog.require('Blockly.utils.Rect');
 goog.require('Blockly.Xml');
@@ -225,21 +224,21 @@ Blockly.Trashcan.prototype.createDom = function() {
        clip-path="url(#blocklyTrashLidClipPath837493)"></image>
  </g>
  */
-  this.svgGroup_ = Blockly.utils.createSvgElement('g',
+  this.svgGroup_ = Blockly.utils.dom.createSvgElement('g',
      {'class': 'blocklyTrash'}, null);
  var clip;
  var rnd = String(Math.random()).substring(2);
-  clip = Blockly.utils.createSvgElement('clipPath',
+  clip = Blockly.utils.dom.createSvgElement('clipPath',
      {'id': 'blocklyTrashBodyClipPath' + rnd},
      this.svgGroup_);
-  Blockly.utils.createSvgElement('rect',
+  Blockly.utils.dom.createSvgElement('rect',
      {
        'width': this.WIDTH_,
        'height': this.BODY_HEIGHT_,
        'y': this.LID_HEIGHT_
      },
      clip);
-  var body = Blockly.utils.createSvgElement('image',
+  var body = Blockly.utils.dom.createSvgElement('image',
      {
        'width': Blockly.SPRITE.width,
        'x': -this.SPRITE_LEFT_,
@@ -251,12 +250,12 @@ Blockly.Trashcan.prototype.createDom = function() {
  body.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
      this.workspace_.options.pathToMedia + Blockly.SPRITE.url);

-  clip = Blockly.utils.createSvgElement('clipPath',
+  clip = Blockly.utils.dom.createSvgElement('clipPath',
      {'id': 'blocklyTrashLidClipPath' + rnd},
      this.svgGroup_);
-  Blockly.utils.createSvgElement('rect',
+  Blockly.utils.dom.createSvgElement('rect',
      {'width': this.WIDTH_, 'height': this.LID_HEIGHT_}, clip);
-  this.svgLid_ = Blockly.utils.createSvgElement('image',
+  this.svgLid_ = Blockly.utils.dom.createSvgElement('image',
      {
        'width': Blockly.SPRITE.width,
        'x': -this.SPRITE_LEFT_,
--- a/core/utils.js
+++ b/core/utils.js
@@ -151,31 +151,6 @@ Blockly.utils.getRelativeXY.XY_REGEX_ =
 Blockly.utils.getRelativeXY.XY_STYLE_REGEX_ =
    /transform:\s*translate(?:3d)?\(\s*([-+\d.e]+)\s*px([ ,]\s*([-+\d.e]+)\s*px)?/;

-/**
- * Helper method for creating SVG elements.
- * @param {string} name Element's tag name.
- * @param {!Object} attrs Dictionary of attribute names and values.
- * @param {Element} parent Optional parent on which to append the element.
- * @return {!SVGElement} Newly created SVG element.
- */
-Blockly.utils.createSvgElement = function(name, attrs, parent) {
-  var e = /** @type {!SVGElement} */
-      (document.createElementNS(Blockly.SVG_NS, name));
-  for (var key in attrs) {
-    e.setAttribute(key, attrs[key]);
-  }
-  // IE defines a unique attribute "runtimeStyle", it is NOT applied to
-  // elements created with createElementNS. However, Closure checks for IE
-  // and assumes the presence of the attribute and crashes.
-  if (document.body.runtimeStyle) {  // Indicates presence of IE-only attr.
-    e.runtimeStyle = e.currentStyle = e.style;
-  }
-  if (parent) {
-    parent.appendChild(e);
-  }
-  return e;
-};
-
 /**
 * Is this event a right-click?
 * @param {!Event} e Mouse event.
@@ -539,18 +514,6 @@ Blockly.utils.runAfterPageLoad = function(fn) {
  }
 };

-/**
- * Sets the CSS transform property on an element. This function sets the
- * non-vendor-prefixed and vendor-prefixed versions for backwards compatibility
- * with older browsers. See https://caniuse.com/#feat=transforms2d
- * @param {!Element} node The node which the CSS transform should be applied.
- * @param {string} transform The value of the CSS `transform` property.
- */
-Blockly.utils.setCssTransform = function(node, transform) {
-  node.style['transform'] = transform;
-  node.style['-webkit-transform'] = transform;
-};
-
 /**
 * Get the position of the current viewport in window coordinates.  This takes
 * scroll into account.
--- a/core/utils/dom.js
+++ b/core/utils/dom.js
@@ -33,6 +33,43 @@
 goog.provide('Blockly.utils.dom');


+/**
+ * Required name space for SVG elements.
+ * @const
+ */
+Blockly.utils.dom.SVG_NS = 'http://www.w3.org/2000/svg';
+
+/**
+ * Required name space for HTML elements.
+ * @const
+ */
+Blockly.utils.dom.HTML_NS = 'http://www.w3.org/1999/xhtml';
+
+/**
+ * Helper method for creating SVG elements.
+ * @param {string} name Element's tag name.
+ * @param {!Object} attrs Dictionary of attribute names and values.
+ * @param {Element} parent Optional parent on which to append the element.
+ * @return {!SVGElement} Newly created SVG element.
+ */
+Blockly.utils.dom.createSvgElement = function(name, attrs, parent) {
+  var e = /** @type {!SVGElement} */
+      (document.createElementNS(Blockly.utils.dom.SVG_NS, name));
+  for (var key in attrs) {
+    e.setAttribute(key, attrs[key]);
+  }
+  // IE defines a unique attribute "runtimeStyle", it is NOT applied to
+  // elements created with createElementNS. However, Closure checks for IE
+  // and assumes the presence of the attribute and crashes.
+  if (document.body.runtimeStyle) {  // Indicates presence of IE-only attr.
+    e.runtimeStyle = e.currentStyle = e.style;
+  }
+  if (parent) {
+    parent.appendChild(e);
+  }
+  return e;
+};
+
 /**
 * Add a CSS class to a element.
 * Similar to Closure's goog.dom.classes.add, except it handles SVG elements.
@@ -130,3 +167,15 @@ Blockly.utils.dom.containsNode = function(parent, descendant) {
  return !!(parent.compareDocumentPosition(descendant) &
            Node.DOCUMENT_POSITION_CONTAINED_BY);
 };
+
+/**
+ * Sets the CSS transform property on an element. This function sets the
+ * non-vendor-prefixed and vendor-prefixed versions for backwards compatibility
+ * with older browsers. See https://caniuse.com/#feat=transforms2d
+ * @param {!Element} element Element to which the CSS transform will be applied.
+ * @param {string} transform The value of the CSS `transform` property.
+ */
+Blockly.utils.dom.setCssTransform = function(element, transform) {
+  element.style['transform'] = transform;
+  element.style['-webkit-transform'] = transform;
+};
--- a/core/warning.js
+++ b/core/warning.js
@@ -30,7 +30,7 @@ goog.require('Blockly.Bubble');
 goog.require('Blockly.Events');
 goog.require('Blockly.Events.Ui');
 goog.require('Blockly.Icon');
-goog.require('Blockly.utils');
+goog.provide('Blockly.utils.dom');


 /**
@@ -59,7 +59,7 @@ Blockly.Warning.prototype.collapseHidden = false;
 */
 Blockly.Warning.prototype.drawIcon_ = function(group) {
  // Triangle with rounded corners.
-  Blockly.utils.createSvgElement('path',
+  Blockly.utils.dom.createSvgElement('path',
      {
        'class': 'blocklyIconShape',
        'd': 'M2,15Q-1,15 0.5,12L6.5,1.7Q8,-1 9.5,1.7L15.5,12Q17,15 14,15z'
@@ -68,14 +68,14 @@ Blockly.Warning.prototype.drawIcon_ = function(group) {
  // Can't use a real '!' text character since different browsers and operating
  // systems render it differently.
  // Body of exclamation point.
-  Blockly.utils.createSvgElement('path',
+  Blockly.utils.dom.createSvgElement('path',
      {
        'class': 'blocklyIconSymbol',
        'd': 'm7,4.8v3.16l0.27,2.27h1.46l0.27,-2.27v-3.16z'
      },
      group);
  // Dot of exclamation point.
-  Blockly.utils.createSvgElement('rect',
+  Blockly.utils.dom.createSvgElement('rect',
      {
        'class': 'blocklyIconSymbol',
        'x': '7', 'y': '11', 'height': '2', 'width': '2'
@@ -91,7 +91,7 @@ Blockly.Warning.prototype.drawIcon_ = function(group) {
 */
 Blockly.Warning.textToDom_ = function(text) {
  var paragraph = /** @type {!SVGTextElement} */
-      (Blockly.utils.createSvgElement(
+      (Blockly.utils.dom.createSvgElement(
          'text',
          {
            'class': 'blocklyText blocklyBubbleText',
@@ -101,7 +101,7 @@ Blockly.Warning.textToDom_ = function(text) {
      );
  var lines = text.split('\n');
  for (var i = 0; i < lines.length; i++) {
-    var tspanElement = Blockly.utils.createSvgElement('tspan',
+    var tspanElement = Blockly.utils.dom.createSvgElement('tspan',
        {'dy': '1em', 'x': Blockly.Bubble.BORDER_WIDTH}, paragraph);
    var textNode = document.createTextNode(lines[i]);
    tspanElement.appendChild(textNode);
--- a/core/workspace_comment_render_svg.js
+++ b/core/workspace_comment_render_svg.js
@@ -89,14 +89,14 @@ Blockly.WorkspaceCommentSvg.prototype.render = function() {
  this.createEditor_();
  this.svgGroup_.appendChild(this.foreignObject_);

-  this.svgHandleTarget_ = Blockly.utils.createSvgElement('rect',
+  this.svgHandleTarget_ = Blockly.utils.dom.createSvgElement('rect',
      {
        'class': 'blocklyCommentHandleTarget',
        'x': 0,
        'y': 0
      });
  this.svgGroup_.appendChild(this.svgHandleTarget_);
-  this.svgRectTarget_ = Blockly.utils.createSvgElement('rect',
+  this.svgRectTarget_ = Blockly.utils.dom.createSvgElement('rect',
      {
        'class': 'blocklyCommentTarget',
        'x': 0,
@@ -150,7 +150,7 @@ Blockly.WorkspaceCommentSvg.prototype.createEditor_ = function() {
      </body>
    </foreignObject>
  */
-  this.foreignObject_ = Blockly.utils.createSvgElement(
+  this.foreignObject_ = Blockly.utils.dom.createSvgElement(
      'foreignObject',
      {
        'x': 0,
@@ -158,10 +158,10 @@ Blockly.WorkspaceCommentSvg.prototype.createEditor_ = function() {
        'class': 'blocklyCommentForeignObject'
      },
      null);
-  var body = document.createElementNS(Blockly.HTML_NS, 'body');
-  body.setAttribute('xmlns', Blockly.HTML_NS);
+  var body = document.createElementNS(Blockly.utils.dom.HTML_NS, 'body');
+  body.setAttribute('xmlns', Blockly.utils.dom.HTML_NS);
  body.className = 'blocklyMinimalBody';
-  var textarea = document.createElementNS(Blockly.HTML_NS, 'textarea');
+  var textarea = document.createElementNS(Blockly.utils.dom.HTML_NS, 'textarea');
  textarea.className = 'blocklyCommentTextarea';
  textarea.setAttribute('dir', this.RTL ? 'RTL' : 'LTR');
  body.appendChild(textarea);
@@ -184,25 +184,25 @@ Blockly.WorkspaceCommentSvg.prototype.createEditor_ = function() {
 * @private
 */
 Blockly.WorkspaceCommentSvg.prototype.addResizeDom_ = function() {
-  this.resizeGroup_ = Blockly.utils.createSvgElement(
+  this.resizeGroup_ = Blockly.utils.dom.createSvgElement(
      'g',
      {
        'class': this.RTL ? 'blocklyResizeSW' : 'blocklyResizeSE'
      },
      this.svgGroup_);
  var resizeSize = Blockly.WorkspaceCommentSvg.RESIZE_SIZE;
-  Blockly.utils.createSvgElement(
+  Blockly.utils.dom.createSvgElement(
      'polygon',
      {'points': '0,x x,x x,0'.replace(/x/g, resizeSize.toString())},
      this.resizeGroup_);
-  Blockly.utils.createSvgElement(
+  Blockly.utils.dom.createSvgElement(
      'line',
      {
        'class': 'blocklyResizeLine',
        'x1': resizeSize / 3, 'y1': resizeSize - 1,
        'x2': resizeSize - 1, 'y2': resizeSize / 3
      }, this.resizeGroup_);
-  Blockly.utils.createSvgElement(
+  Blockly.utils.dom.createSvgElement(
      'line',
      {
        'class': 'blocklyResizeLine',
@@ -216,13 +216,13 @@ Blockly.WorkspaceCommentSvg.prototype.addResizeDom_ = function() {
 * @private
 */
 Blockly.WorkspaceCommentSvg.prototype.addDeleteDom_ = function() {
-  this.deleteGroup_ = Blockly.utils.createSvgElement(
+  this.deleteGroup_ = Blockly.utils.dom.createSvgElement(
      'g',
      {
        'class': 'blocklyCommentDeleteIcon'
      },
      this.svgGroup_);
-  this.deleteIconBorder_ = Blockly.utils.createSvgElement('circle',
+  this.deleteIconBorder_ = Blockly.utils.dom.createSvgElement('circle',
      {
        'class': 'blocklyDeleteIconShape',
        'r': '7',
@@ -231,7 +231,7 @@ Blockly.WorkspaceCommentSvg.prototype.addDeleteDom_ = function() {
      },
      this.deleteGroup_);
  // x icon.
-  Blockly.utils.createSvgElement(
+  Blockly.utils.dom.createSvgElement(
      'line',
      {
        'x1': '5', 'y1': '10',
@@ -240,7 +240,7 @@ Blockly.WorkspaceCommentSvg.prototype.addDeleteDom_ = function() {
        'stroke-width': '2'
      },
      this.deleteGroup_);
-  Blockly.utils.createSvgElement(
+  Blockly.utils.dom.createSvgElement(
      'line',
      {
        'x1': '5', 'y1': '5',
--- a/core/workspace_comment_svg.js
+++ b/core/workspace_comment_svg.js
@@ -55,11 +55,11 @@ Blockly.WorkspaceCommentSvg = function(workspace, content, height, width,
   * @type {SVGElement}
   * @private
   */
-  this.svgGroup_ = Blockly.utils.createSvgElement(
+  this.svgGroup_ = Blockly.utils.dom.createSvgElement(
      'g', {'class': 'blocklyComment'}, null);
  this.svgGroup_.translate_ = '';

-  this.svgRect_ = Blockly.utils.createSvgElement(
+  this.svgRect_ = Blockly.utils.dom.createSvgElement(
      'rect',
      {
        'class': 'blocklyCommentRect',
--- a/core/workspace_drag_surface_svg.js
+++ b/core/workspace_drag_surface_svg.js
@@ -86,10 +86,10 @@ Blockly.WorkspaceDragSurfaceSvg.prototype.createDom = function() {
  *   <g class="blocklyBubbleCanvas">/g>
  * </svg>
  */
-  this.SVG_ = Blockly.utils.createSvgElement('svg',
+  this.SVG_ = Blockly.utils.dom.createSvgElement('svg',
      {
-        'xmlns': Blockly.SVG_NS,
-        'xmlns:html': Blockly.HTML_NS,
+        'xmlns': Blockly.utils.dom.SVG_NS,
+        'xmlns:html': Blockly.utils.dom.HTML_NS,
        'xmlns:xlink': 'http://www.w3.org/1999/xlink',
        'version': '1.1',
        'class': 'blocklyWsDragSurface blocklyOverflowVisible'
@@ -113,7 +113,7 @@ Blockly.WorkspaceDragSurfaceSvg.prototype.translateSurface = function(x, y) {
  var fixedY = y.toFixed(0);

  this.SVG_.style.display = 'block';
-  Blockly.utils.setCssTransform(
+  Blockly.utils.dom.setCssTransform(
      this.SVG_, 'translate3d(' + fixedX + 'px, ' + fixedY + 'px, 0px)');
 };

@@ -163,7 +163,7 @@ Blockly.WorkspaceDragSurfaceSvg.prototype.clearAndHide = function(newSurface) {
  if (this.SVG_.childNodes.length) {
    throw Error('Drag surface was not cleared.');
  }
-  Blockly.utils.setCssTransform(this.SVG_, '');
+  Blockly.utils.dom.setCssTransform(this.SVG_, '');
  this.previousSibling_ = null;
 };

--- a/core/workspace_svg.js
+++ b/core/workspace_svg.js
@@ -515,7 +515,7 @@ Blockly.WorkspaceSvg.prototype.createDom = function(opt_backgroundClass) {
   * </g>
   * @type {SVGElement}
   */
-  this.svgGroup_ = Blockly.utils.createSvgElement('g',
+  this.svgGroup_ = Blockly.utils.dom.createSvgElement('g',
      {'class': 'blocklyWorkspace'}, null);

  // Note that a <g> alone does not receive mouse events--it must have a
@@ -523,7 +523,7 @@ Blockly.WorkspaceSvg.prototype.createDom = function(opt_backgroundClass) {
  // flyout, the workspace will not receive mouse events.
  if (opt_backgroundClass) {
    /** @type {SVGElement} */
-    this.svgBackground_ = Blockly.utils.createSvgElement('rect',
+    this.svgBackground_ = Blockly.utils.dom.createSvgElement('rect',
        {'height': '100%', 'width': '100%', 'class': opt_backgroundClass},
        this.svgGroup_);

@@ -533,10 +533,10 @@ Blockly.WorkspaceSvg.prototype.createDom = function(opt_backgroundClass) {
    }
  }
  /** @type {SVGElement} */
-  this.svgBlockCanvas_ = Blockly.utils.createSvgElement('g',
+  this.svgBlockCanvas_ = Blockly.utils.dom.createSvgElement('g',
      {'class': 'blocklyBlockCanvas'}, this.svgGroup_);
  /** @type {SVGElement} */
-  this.svgBubbleCanvas_ = Blockly.utils.createSvgElement('g',
+  this.svgBubbleCanvas_ = Blockly.utils.dom.createSvgElement('g',
      {'class': 'blocklyBubbleCanvas'}, this.svgGroup_);

  if (!this.isFlyout) {
--- a/core/zoom_controls.js
+++ b/core/zoom_controls.js
@@ -27,7 +27,6 @@
 goog.provide('Blockly.ZoomControls');

 goog.require('Blockly.Touch');
-goog.require('Blockly.utils');
 goog.require('Blockly.utils.dom');


@@ -95,7 +94,7 @@ Blockly.ZoomControls.prototype.top_ = 0;
 */
 Blockly.ZoomControls.prototype.createDom = function() {
  this.svgGroup_ =
-      Blockly.utils.createSvgElement('g', {}, null);
+      Blockly.utils.dom.createSvgElement('g', {}, null);

  // Each filter/pattern needs a unique ID for the case of multiple Blockly
  // instances on a page.  Browser behaviour becomes undefined otherwise.
@@ -195,20 +194,20 @@ Blockly.ZoomControls.prototype.createZoomOutSvg_ = function(rnd) {
  </g>
  */
  var ws = this.workspace_;
-  this.zoomOutGroup_ = Blockly.utils.createSvgElement('g',
+  this.zoomOutGroup_ = Blockly.utils.dom.createSvgElement('g',
      {'class': 'blocklyZoom'}, this.svgGroup_);
-  var clip = Blockly.utils.createSvgElement('clipPath',
+  var clip = Blockly.utils.dom.createSvgElement('clipPath',
      {
        'id': 'blocklyZoomoutClipPath' + rnd
      },
      this.zoomOutGroup_);
-  Blockly.utils.createSvgElement('rect',
+  Blockly.utils.dom.createSvgElement('rect',
      {
        'width': 32,
        'height': 32,
      },
      clip);
-  var zoomoutSvg = Blockly.utils.createSvgElement('image',
+  var zoomoutSvg = Blockly.utils.dom.createSvgElement('image',
      {
        'width': Blockly.SPRITE.width,
        'height': Blockly.SPRITE.height,
@@ -248,20 +247,20 @@ Blockly.ZoomControls.prototype.createZoomInSvg_ = function(rnd) {
  </g>
  */
  var ws = this.workspace_;
-  this.zoomInGroup_ = Blockly.utils.createSvgElement('g',
+  this.zoomInGroup_ = Blockly.utils.dom.createSvgElement('g',
      {'class': 'blocklyZoom'}, this.svgGroup_);
-  var clip = Blockly.utils.createSvgElement('clipPath',
+  var clip = Blockly.utils.dom.createSvgElement('clipPath',
      {
        'id': 'blocklyZoominClipPath' + rnd
      },
      this.zoomInGroup_);
-  Blockly.utils.createSvgElement('rect',
+  Blockly.utils.dom.createSvgElement('rect',
      {
        'width': 32,
        'height': 32,
      },
      clip);
-  var zoominSvg = Blockly.utils.createSvgElement('image',
+  var zoominSvg = Blockly.utils.dom.createSvgElement('image',
      {
        'width': Blockly.SPRITE.width,
        'height': Blockly.SPRITE.height,
@@ -301,20 +300,20 @@ Blockly.ZoomControls.prototype.createZoomResetSvg_ = function(rnd) {
  </g>
  */
  var ws = this.workspace_;
-  this.zoomResetGroup_ = Blockly.utils.createSvgElement('g',
+  this.zoomResetGroup_ = Blockly.utils.dom.createSvgElement('g',
      {'class': 'blocklyZoom'}, this.svgGroup_);
-  var clip = Blockly.utils.createSvgElement('clipPath',
+  var clip = Blockly.utils.dom.createSvgElement('clipPath',
      {
        'id': 'blocklyZoomresetClipPath' + rnd
      },
      this.zoomResetGroup_);
-  Blockly.utils.createSvgElement('rect',
+  Blockly.utils.dom.createSvgElement('rect',
      {
        'width': 32,
        'height': 32
      },
      clip);
-  var zoomresetSvg = Blockly.utils.createSvgElement('image',
+  var zoomresetSvg = Blockly.utils.dom.createSvgElement('image',
      {
        'width': Blockly.SPRITE.width,
        'height': Blockly.SPRITE.height,