@openui5/sap.m 1.105.1 → 1.107.0

package/src/sap/m/Image.js

@@ -9,13 +9,14 @@ sap.ui.define([
 	'./library',
 	'sap/ui/core/Control',
 	'sap/ui/base/DataType',
+	'sap/base/security/URLListValidator',
 	'./ImageRenderer',
 	"sap/ui/events/KeyCodes",
 	"sap/ui/thirdparty/jquery",
 	"sap/base/security/encodeCSS",
 	"sap/ui/core/library"
 ],
-	function(library, Control, DataType, ImageRenderer, KeyCodes, jQuery, encodeCSS, coreLibrary) {
+	function(library, Control, DataType, URLListValidator, ImageRenderer, KeyCodes, jQuery, encodeCSS, coreLibrary) {
 	"use strict";
 
 
@@ -57,207 +58,210 @@ sap.ui.define([
 	 * @implements sap.ui.core.IFormContent
 	 *
 	 * @author SAP SE
-	 * @version 1.105.1
+	 * @version 1.107.0
 	 *
 	 * @public
 	 * @alias sap.m.Image
-	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
-	var Image = Control.extend("sap.m.Image", /** @lends sap.m.Image.prototype */ { metadata : {
-
-		interfaces : ["sap.ui.core.IFormContent"],
-		library : "sap.m",
-		designtime: "sap/m/designtime/Image.designtime",
-		properties : {
-
-			/**
-			 * Relative or absolute path to URL where the image file is stored.
-			 *
-			 * The path will be adapted to the density-aware format according to the density of the device
-			 * following the naming convention [imageName]@[densityValue].[extension].
-			 */
-			src : {type : "sap.ui.core.URI", group : "Data", defaultValue : null},
-
-			/**
-			 * When the empty value is kept, the original size is not changed.
-			 *
-			 * It is also possible to make settings for width or height only, in which case the original
-			 * ratio between width/height is maintained. When the <code>mode</code> property is set to
-			 * <code>sap.m.ImageMode.Background</code>, this property always needs to be set.
-			 * Otherwise the output DOM element has a 0 size.
-			 */
-			width : {type : "sap.ui.core.CSSSize", group : "Appearance", defaultValue : null},
-
-			/**
-			 * When the empty value is kept, the original size is not changed.
-			 *
-			 * It is also possible to make settings for width or height only, in which case the original
-			 * ratio between width/height is maintained. When the <code>mode</code> property is set to
-			 * <code>sap.m.ImageMode.Background</code>, this property always needs to be set.
-			 * Otherwise the output DOM element has a 0 size.
-			 */
-			height : {type : "sap.ui.core.CSSSize", group : "Appearance", defaultValue : null},
-
-			/**
-			 * A decorative image is included for design reasons; accessibility tools will ignore decorative images.
-			 *
-			 * Note: If the image has an image map (<code>useMap</code> is set), this property will be overridden
-			 * (the image will not be rendered as decorative). A decorative image has no <code>ALT</code> attribute,
-			 * so the <code>alt</code> property is ignored if the image is decorative.
-			 */
-			decorative : {type : "boolean", group : "Accessibility", defaultValue : true},
-
-			/**
-			 * The alternative text that is displayed in case the image is not available, or cannot be displayed.
-			 *
-			 * If the image is set to decorative, this property is ignored.
-			 */
-			alt : {type : "string", group : "Accessibility", defaultValue : null},
-
-			/**
-			 * The name of the image map that defines the clickable areas.
-			 */
-			useMap : {type : "string", group : "Misc", defaultValue : null},
-
-			/**
-			 * If this is set to <code>true</code>, one or more network requests will be made
-			 * that try to obtain the density perfect version of the image.
-			 *
-			 * By default, this is set to <code>false</code>, so the <code>src</code> image is loaded
-			 * directly without attempting to fetch the density perfect image for high-density devices.
-			 *
-			 * <b>Note:</b> Before 1.60, the default value was set to <code>true</code>, which
-			 * brought redundant network requests for apps that used the default but did not
-			 * provide density perfect image versions on server-side.
-			 * You should set this property to <code>true</code> only if you also provide the
-			 * corresponding image versions for high-density devices.
-			 */
-			densityAware : {type : "boolean", group : "Misc", defaultValue : false},
-
-			/**
-			 * The source property which is used when the image is pressed.
-			 */
-			activeSrc : {type : "sap.ui.core.URI", group : "Data", defaultValue : ""},
-
-			/**
-			 * Defines how the <code>src</code> and the <code>activeSrc</code> is output to the DOM Element.
-			 *
-			 * When set to <code>sap.m.ImageMode.Image</code>, which is the default value, the <code>src</code>
-			 * (<code>activeSrc</code>) is set to the <code>src</code> attribute of the &lt;img&gt; tag. When
-			 * set to <code>sap.m.ImageMode.Background</code>, the <code>src</code> (<code>activeSrc</code>)
-			 * is set to the CSS style <code>background-image</code> and the root DOM element is rendered as a
-			 * &lt;span&gt; tag instead of an &lt;img&gt; tag.
-			 * @since 1.30.0
-			 */
-			mode : {type : "sap.m.ImageMode", group : "Misc", defaultValue : "Image"},
-
-			/**
-			 * Defines the size of the image in <code>sap.m.ImageMode.Background</code> mode.
-			 *
-			 * This property is set on the output DOM element using the CSS style <code>background-size</code>.
-			 * It takes effect only when the <code>mode</code> property is set to <code>sap.m.ImageMode.Background</code>.
-			 * @since 1.30.0
-			 */
-			backgroundSize : {type : "string", group : "Appearance", defaultValue : "cover"},
-
-			/**
-			* Defines the position of the image in <code>sap.m.ImageMode.Background</code> mode.
-			*
-			* This property is set on the output DOM element using the CSS style <code>background-position</code>.
-			* It takes effect only when the <code>mode</code> property is set to <code>sap.m.ImageMode.Background</code>.
-			* @since 1.30.0
-			*/
-			backgroundPosition : {type : "string", group : "Appearance", defaultValue : "initial"},
-
-			/**
-			* Defines whether the source image is repeated when the output DOM element is bigger than the source.
-			*
-			* This property is set on the output DOM element using the CSS style <code>background-repeat</code>.
-			* It takes effect only when the <code>mode</code> property is set to <code>sap.m.ImageMode.Background</code>.
-			* @since 1.30.0
-			*/
-			backgroundRepeat : {type : "string", group : "Appearance", defaultValue : "no-repeat"},
-			/**
-			* Enables lazy loading for images that are offscreen. If set to <code>true</code>, the property
-			* ensures that offscreen images are loaded early enough so that they have finished loading once
-			* the user scrolls near them.
-			*
-			* <b>Note:</b> Keep in mind that the property uses the loading attribute of HTML <code>&lt;img&gt;</code> element
-			* which is not supported for Internet Explorer.
-			*
-			* @since 1.87
-			*/
-			lazyLoading : {type : "boolean", defaultValue : false },
-
-			/**
-			 * Defines the aria-haspopup attribute of the <code>Image</code>.
-			 *
-			 * <b>Guidance for choosing appropriate value:</b>
-			 * <ul>
-			 * <li> We recommend you to use the property only when press handler is set.</li>
-			 * <li> If you use controls based on <code>sap.m.Popover</code> or <code>sap.m.Dialog</code>,
-			 * then you must use <code>AriaHasPopup.Dialog</code> (both <code>sap.m.Popover</code> and
-			 * <code>sap.m.Dialog</code> have role "dialog" assigned internally).</li>
-			 * <li> If you use other controls, or directly <code>sap.ui.core.Popup</code>, you need to check
-			 * the container role/type and map the value of <code>ariaHasPopup</code> accordingly.</li>
-			 * </ul>
-			 *
-			 * @since 1.87.0
-			 */
-			ariaHasPopup : {type : "sap.ui.core.aria.HasPopup", group : "Accessibility", defaultValue : AriaHasPopup.None}
+	var Image = Control.extend("sap.m.Image", /** @lends sap.m.Image.prototype */ {
+		metadata : {
+
+			interfaces : ["sap.ui.core.IFormContent"],
+			library : "sap.m",
+			designtime: "sap/m/designtime/Image.designtime",
+			properties : {
+
+				/**
+				 * Relative or absolute path to URL where the image file is stored.
+				 *
+				 * The path will be adapted to the density-aware format according to the density of the device
+				 * following the naming convention [imageName]@[densityValue].[extension].
+				 */
+				src : {type : "sap.ui.core.URI", group : "Data", defaultValue : null},
+
+				/**
+				 * When the empty value is kept, the original size is not changed.
+				 *
+				 * It is also possible to make settings for width or height only, in which case the original
+				 * ratio between width/height is maintained. When the <code>mode</code> property is set to
+				 * <code>sap.m.ImageMode.Background</code>, this property always needs to be set.
+				 * Otherwise the output DOM element has a 0 size.
+				 */
+				width : {type : "sap.ui.core.CSSSize", group : "Appearance", defaultValue : null},
+
+				/**
+				 * When the empty value is kept, the original size is not changed.
+				 *
+				 * It is also possible to make settings for width or height only, in which case the original
+				 * ratio between width/height is maintained. When the <code>mode</code> property is set to
+				 * <code>sap.m.ImageMode.Background</code>, this property always needs to be set.
+				 * Otherwise the output DOM element has a 0 size.
+				 */
+				height : {type : "sap.ui.core.CSSSize", group : "Appearance", defaultValue : null},
+
+				/**
+				 * A decorative image is included for design reasons; accessibility tools will ignore decorative images.
+				 *
+				 * Note: If the image has an image map (<code>useMap</code> is set), this property will be overridden
+				 * (the image will not be rendered as decorative). A decorative image has no <code>ALT</code> attribute,
+				 * so the <code>alt</code> property is ignored if the image is decorative.
+				 */
+				decorative : {type : "boolean", group : "Accessibility", defaultValue : true},
+
+				/**
+				 * The alternative text that is displayed in case the image is not available, or cannot be displayed.
+				 *
+				 * If the image is set to decorative, this property is ignored.
+				 */
+				alt : {type : "string", group : "Accessibility", defaultValue : null},
+
+				/**
+				 * The name of the image map that defines the clickable areas.
+				 */
+				useMap : {type : "string", group : "Misc", defaultValue : null},
+
+				/**
+				 * If this is set to <code>true</code>, one or more network requests will be made
+				 * that try to obtain the density perfect version of the image.
+				 *
+				 * By default, this is set to <code>false</code>, so the <code>src</code> image is loaded
+				 * directly without attempting to fetch the density perfect image for high-density devices.
+				 *
+				 * <b>Note:</b> Before 1.60, the default value was set to <code>true</code>, which
+				 * brought redundant network requests for apps that used the default but did not
+				 * provide density perfect image versions on server-side.
+				 * You should set this property to <code>true</code> only if you also provide the
+				 * corresponding image versions for high-density devices.
+				 */
+				densityAware : {type : "boolean", group : "Misc", defaultValue : false},
+
+				/**
+				 * The source property which is used when the image is pressed.
+				 */
+				activeSrc : {type : "sap.ui.core.URI", group : "Data", defaultValue : ""},
+
+				/**
+				 * Defines how the <code>src</code> and the <code>activeSrc</code> is output to the DOM Element.
+				 *
+				 * When set to <code>sap.m.ImageMode.Image</code>, which is the default value, the <code>src</code>
+				 * (<code>activeSrc</code>) is set to the <code>src</code> attribute of the &lt;img&gt; tag. When
+				 * set to <code>sap.m.ImageMode.Background</code>, the <code>src</code> (<code>activeSrc</code>)
+				 * is set to the CSS style <code>background-image</code> and the root DOM element is rendered as a
+				 * &lt;span&gt; tag instead of an &lt;img&gt; tag.
+				 * @since 1.30.0
+				 */
+				mode : {type : "sap.m.ImageMode", group : "Misc", defaultValue : "Image"},
+
+				/**
+				 * Defines the size of the image in <code>sap.m.ImageMode.Background</code> mode.
+				 *
+				 * This property is set on the output DOM element using the CSS style <code>background-size</code>.
+				 * It takes effect only when the <code>mode</code> property is set to <code>sap.m.ImageMode.Background</code>.
+				 * @since 1.30.0
+				 */
+				backgroundSize : {type : "string", group : "Appearance", defaultValue : "cover"},
+
+				/**
+				* Defines the position of the image in <code>sap.m.ImageMode.Background</code> mode.
+				*
+				* This property is set on the output DOM element using the CSS style <code>background-position</code>.
+				* It takes effect only when the <code>mode</code> property is set to <code>sap.m.ImageMode.Background</code>.
+				* @since 1.30.0
+				*/
+				backgroundPosition : {type : "string", group : "Appearance", defaultValue : "initial"},
+
+				/**
+				* Defines whether the source image is repeated when the output DOM element is bigger than the source.
+				*
+				* This property is set on the output DOM element using the CSS style <code>background-repeat</code>.
+				* It takes effect only when the <code>mode</code> property is set to <code>sap.m.ImageMode.Background</code>.
+				* @since 1.30.0
+				*/
+				backgroundRepeat : {type : "string", group : "Appearance", defaultValue : "no-repeat"},
+				/**
+				* Enables lazy loading for images that are offscreen. If set to <code>true</code>, the property
+				* ensures that offscreen images are loaded early enough so that they have finished loading once
+				* the user scrolls near them.
+				*
+				* <b>Note:</b> Keep in mind that the property uses the loading attribute of HTML <code>&lt;img&gt;</code> element
+				* which is not supported for Internet Explorer.
+				*
+				* @since 1.87
+				*/
+				lazyLoading : {type : "boolean", defaultValue : false },
+
+				/**
+				 * Defines the aria-haspopup attribute of the <code>Image</code>.
+				 *
+				 * <b>Guidance for choosing appropriate value:</b>
+				 * <ul>
+				 * <li> We recommend you to use the property only when press handler is set.</li>
+				 * <li> If you use controls based on <code>sap.m.Popover</code> or <code>sap.m.Dialog</code>,
+				 * then you must use <code>AriaHasPopup.Dialog</code> (both <code>sap.m.Popover</code> and
+				 * <code>sap.m.Dialog</code> have role "dialog" assigned internally).</li>
+				 * <li> If you use other controls, or directly <code>sap.ui.core.Popup</code>, you need to check
+				 * the container role/type and map the value of <code>ariaHasPopup</code> accordingly.</li>
+				 * </ul>
+				 *
+				 * @since 1.87.0
+				 */
+				ariaHasPopup : {type : "sap.ui.core.aria.HasPopup", group : "Accessibility", defaultValue : AriaHasPopup.None}
+			},
+			aggregations : {
+				/**
+				 * A <code>sap.m.LightBox</code> instance that will be opened automatically when the user interacts
+				 * with the <code>Image</code> control.
+				 *
+				 * The <code>tap</code> event will still be fired.
+				 */
+				detailBox: {type: 'sap.m.LightBox', multiple: false, bindable: "bindable"}
+			},
+			associations : {
+				/**
+				 * Association to controls / ids which describe this control (see WAI-ARIA attribute aria-describedby).
+				 */
+				ariaDescribedBy : {type : "sap.ui.core.Control", multiple : true, singularName : "ariaDescribedBy"},
+
+				/**
+				 * Association to controls / ids which label this control (see WAI-ARIA attribute aria-labelledBy).
+				 */
+				ariaLabelledBy: {type : "sap.ui.core.Control", multiple : true, singularName : "ariaLabelledBy"},
+
+				/**
+				 * Association to controls / IDs which are details to this control (see WAI-ARIA attribute aria-details).
+				 * @since 1.79
+				 */
+				ariaDetails: {type : "sap.ui.core.Control", multiple : true, singularName : "ariaDetails"}
+			},
+			events : {
+
+				/**
+				 * Event is fired when the user clicks on the control. (This event is deprecated, use the press event instead)
+				 */
+				tap : {},
+
+				/**
+				 * Event is fired when the user clicks on the control.
+				 */
+				press : {},
+
+				/**
+				 * Event is fired when the image resource is loaded.
+				 * @since 1.36.2
+				 */
+				load : {},
+
+				/**
+				 * Event is fired when the image resource can't be loaded. If densityAware is set to true, the event is fired when none of the fallback resources can be loaded.
+				 * @since 1.36.2
+				 */
+				error : {}
+			},
+			dnd: { draggable: true, droppable: false }
 		},
-		aggregations : {
-			/**
-			 * A <code>sap.m.LightBox</code> instance that will be opened automatically when the user interacts
-			 * with the <code>Image</code> control.
-			 *
-			 * The <code>tap</code> event will still be fired.
-			 */
-			detailBox: {type: 'sap.m.LightBox', multiple: false, bindable: "bindable"}
-		},
-		associations : {
-			/**
-			 * Association to controls / ids which describe this control (see WAI-ARIA attribute aria-describedby).
-			 */
-			ariaDescribedBy : {type : "sap.ui.core.Control", multiple : true, singularName : "ariaDescribedBy"},
-
-			/**
-			 * Association to controls / ids which label this control (see WAI-ARIA attribute aria-labelledBy).
-			 */
-			ariaLabelledBy: {type : "sap.ui.core.Control", multiple : true, singularName : "ariaLabelledBy"},
-
-			/**
-			 * Association to controls / IDs which are details to this control (see WAI-ARIA attribute aria-details).
-			 * @since 1.79
-			 */
-			ariaDetails: {type : "sap.ui.core.Control", multiple : true, singularName : "ariaDetails"}
-		},
-		events : {
-
-			/**
-			 * Event is fired when the user clicks on the control. (This event is deprecated, use the press event instead)
-			 */
-			tap : {},
-
-			/**
-			 * Event is fired when the user clicks on the control.
-			 */
-			press : {},
-
-			/**
-			 * Event is fired when the image resource is loaded.
-			 * @since 1.36.2
-			 */
-			load : {},
-
-			/**
-			 * Event is fired when the image resource can't be loaded. If densityAware is set to true, the event is fired when none of the fallback resources can be loaded.
-			 * @since 1.36.2
-			 */
-			error : {}
-		},
-		dnd: { draggable: true, droppable: false }
-	}});
+
+		renderer: ImageRenderer
+	});
 
 	Image._currentDevicePixelRatio = (function() {
 
@@ -282,6 +286,10 @@ sap.ui.define([
 		return ratio;
 	}());
 
+	Image.prototype.init = function () {
+		this._oSvgCachedData = {};
+	};
+
 	/**
 	 * Function is called when image is loaded successfully.
 	 *
@@ -418,6 +426,17 @@ sap.ui.define([
 		return this.setAggregation("detailBox", oLightBox);
 	};
 
+	Image.prototype.setSrc = function (sSrc) {
+		var oPreviousSrc = this.getSrc(),
+			oResult = this.setProperty("src", sSrc);
+
+		if (sSrc && oPreviousSrc !== this.getSrc() && this.getMode() === ImageMode.InlineSvg) {
+			sSrc.endsWith("svg") && this._loadSvg();
+		}
+
+		return oResult;
+	};
+
 	/*
 	 * @override
 	 */
@@ -450,6 +469,10 @@ sap.ui.define([
 			var $DomNode = this.getDetailBox() ? this.$().find(".sapMImg") : this.$();
 			$DomNode.off("load").off("error");
 		}
+
+		if (this.getMode() === ImageMode.InlineSvg) {
+			this._loadSvg();
+		}
 	};
 
 	/**
@@ -501,6 +524,8 @@ sap.ui.define([
 		if (this._fnLightBoxOpen) {
 			this._fnLightBoxOpen = null;
 		}
+
+		this._oSvgCachedData = null;
 	};
 
 	/**
@@ -600,6 +625,54 @@ sap.ui.define([
 		oEvent.preventDefault();
 	};
 
+	/**
+	* Loads "svg"
+	* @private
+	*/
+	Image.prototype._loadSvg = function() {
+		var that = this,
+			sSrc = this.getSrc(),
+			oSvg;
+
+		if (!this._oSvgCachedData[sSrc]) {
+			that._oSvgCachedData[sSrc] = {};
+			jQuery.get(this.getSrc(), function(data) {
+				oSvg = jQuery(data).find('svg')[0];
+
+				if (oSvg) {
+					sap.ui.require(["sap/m/_thirdparty/purify"],
+					function(DOMPurify) {
+							that._oSvgCachedData[sSrc].oSvgDomRef = DOMPurify.sanitize(oSvg, {RETURN_DOM: true});
+							that.invalidate();
+					});
+				}
+			})
+			.done(function() {
+				that.fireLoad();
+			})
+			.fail(function() {
+				that.fireError();
+			});
+		}
+	};
+
+	Image.prototype._getSvgCachedData = function () {
+		var sSrc = this.getSrc();
+
+		if (this._oSvgCachedData[sSrc]
+			&& typeof this._oSvgCachedData[sSrc].oSvgDomRef === "object") {
+				return this._oSvgCachedData[sSrc].oSvgDomRef;
+		}
+	};
+
+	/**
+	* Checks if href is valid
+	* @private
+	*/
+	Image.prototype._isHrefValid = function (sURL) {
+		return URLListValidator.validate(sURL);
+	};
+
 	/**
 	* Update the source image either on the output DOM element (when in sap.m.ImageMode.Image mode) or on the window.Image object (when in sap.m.ImageMode.Background mode)
 	* @private

package/src/sap/m/ImageContent.js

@@ -33,12 +33,11 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.105.1
+	 * @version 1.107.0
 	 * @since 1.38
 	 *
 	 * @public
 	 * @alias sap.m.ImageContent
-	 * @ui5-metamodel This control will also be described in the UI5 (legacy) designtime metamodel
 	 */
 	var ImageContent = Control.extend("sap.m.ImageContent", /** @lends sap.m.ImageContent.prototype */ {
 		metadata: {
@@ -67,7 +66,9 @@ sap.ui.define([
 				 */
 				press: {}
 			}
-		}
+		},
+
+		renderer: ImageContentRenderer
 	});
 
 	/* --- Lifecycle Handling --- */

package/src/sap/m/ImageRenderer.js

@@ -42,6 +42,8 @@ sap.ui.define(['sap/m/library', "sap/base/security/encodeCSS", "sap/ui/core/libr
 			aDescribedBy = oImage.getAriaDescribedBy(),
 			aDetails = oImage.getAriaDetails(),
 			bIsImageMode = sMode === ImageMode.Image,
+			bIsSvgMode = sMode === ImageMode.InlineSvg,
+			bIsBackGroundMode = sMode === ImageMode.Background,
 			bLazyLoading = oImage.getLazyLoading(),
 			sAriaHasPopup = oImage.getAriaHasPopup();
 
@@ -61,6 +63,8 @@ sap.ui.define(['sap/m/library', "sap/base/security/encodeCSS", "sap/ui/core/libr
 				oRm.attr("loading", "lazy");
 			}
 
+		} else  if (bIsSvgMode) {
+			oRm.openStart("div", oImage);
 		} else {
 			oRm.openStart("span", !oLightBox ? oImage : oImage.getId() + "-inner");
 		}
@@ -84,7 +88,7 @@ sap.ui.define(['sap/m/library', "sap/base/security/encodeCSS", "sap/ui/core/libr
 
 		if (bIsImageMode) {
 			oRm.attr("src", oImage._getDensityAwareSrc());
-		} else {
+		} else if (bIsBackGroundMode) {
 			// preload the image with a window.Image instance. The source uri is set to the output DOM node via CSS style 'background-image' after the source image is loaded (in onload function)
 			oImage._preLoadImage(oImage._getDensityAwareSrc());
 			if (oImage._isValidBackgroundSizeValue(oImage.getBackgroundSize())) {
@@ -141,12 +145,72 @@ sap.ui.define(['sap/m/library', "sap/base/security/encodeCSS", "sap/ui/core/libr
 		oRm.style("width", oImage.getWidth());
 		oRm.style("height", oImage.getHeight());
 
-		bIsImageMode ? oRm.voidEnd() : oRm.openEnd().close("span"); // close the <img>/<span> element
+		if (bIsImageMode) {
+			oRm.voidEnd();
+		} else if (bIsSvgMode) {
+			oRm.openEnd();
+			this._renderSvg(oRm, oImage);
+			oRm.close("div");
+		} else {
+			oRm.openEnd().close("span");
+		}
 
 		if (oLightBox) {
 			oRm.close("span");
 		}
 	};
 
+	ImageRenderer._renderSvg = function(oRm, oImage) {
+		var oSvg = oImage._getSvgCachedData(),
+			oChildren;
+
+		if (!oSvg) {
+			return;
+		}
+
+		oChildren = oSvg.children;
+		this._renderSvgChildren(oRm, oChildren, oImage);
+	};
+
+	ImageRenderer._renderSvgAttributes = function (oRm, aAttributes, oImage) {
+		for (var i = 0; i < aAttributes.length; i++) {
+			var oAttr = aAttributes[i],
+				iNamespaceIndex = oAttr.name.indexOf(":"),
+				sAttributeName = iNamespaceIndex < 0 ? oAttr.name : oAttr.name.slice(iNamespaceIndex + 1);
+
+			if (sAttributeName === "href" && !oImage._isHrefValid(oAttr.value)) {
+				continue;
+			}
+
+			oRm.attr(sAttributeName, oAttr.value);
+		}
+	};
+
+	ImageRenderer._renderSvgChildren = function (oRm, oChildren, oImage) {
+		var aChildren = [].slice.call(oChildren).filter(function (oChild) {
+			return (oChild.nodeType !== Node.TEXT_NODE)
+				// Do not return empty textContent -> line spaces/endings
+				|| (oChild.nodeType === Node.TEXT_NODE && oChild.textContent.trim() !== "");
+		});
+
+		aChildren.forEach(function (oChild) {
+			var sTagName = oChild.tagName,
+				aAttributes = oChild.attributes,
+				oChildren = oChild.childNodes;
+
+			if (oChild.nodeType !== Node.TEXT_NODE) {
+				oRm.openStart(sTagName);
+				this._renderSvgAttributes(oRm, aAttributes, oImage);
+				oRm.openEnd();
+
+				oChildren.length && this._renderSvgChildren(oRm, oChildren, oImage);
+				oRm.close(sTagName);
+
+			} else {
+				oChild.textContent.length && oRm.text(oChild.textContent.trim());
+			}
+		}, this);
+	};
+
 	return ImageRenderer;
 }, /* bExport= */ true);