@scratch/scratch-svg-renderer 11.0.0-UEPR-176

package/src/load-svg-string.js

@@ -0,0 +1,334 @@
+const DOMPurify = require('isomorphic-dompurify');
+const SvgElement = require('./svg-element');
+const convertFonts = require('./font-converter');
+const fixupSvgString = require('./fixup-svg-string');
+const transformStrokeWidths = require('./transform-applier');
+
+/**
+ * @param {SVGElement} svgTag the tag to search within
+ * @param {string} [tagName] svg tag to search for (or collect all elements if not given)
+ * @return {Array} a list of elements with the given tagname
+ */
+const collectElements = (svgTag, tagName) => {
+    const elts = [];
+    const collectElementsInner = domElement => {
+        if ((domElement.localName === tagName || typeof tagName === 'undefined') && domElement.getAttribute) {
+            elts.push(domElement);
+        }
+        for (let i = 0; i < domElement.childNodes.length; i++) {
+            collectElementsInner(domElement.childNodes[i]);
+        }
+    };
+    collectElementsInner(svgTag);
+    return elts;
+};
+
+/**
+ * Fix SVGs to comply with SVG spec. Scratch 2 defaults to x2 = 0 when x2 is missing, but
+ * SVG defaults to x2 = 1 when missing.
+ * @param {SVGSVGElement} svgTag the SVG tag to apply the transformation to
+ */
+const transformGradients = svgTag => {
+    const linearGradientElements = collectElements(svgTag, 'linearGradient');
+
+    // For each gradient element, supply x2 if necessary.
+    for (const gradientElement of linearGradientElements) {
+        if (!gradientElement.getAttribute('x2')) {
+            gradientElement.setAttribute('x2', '0');
+        }
+    }
+};
+
+/**
+ * Fix SVGs to match appearance in Scratch 2, which used nearest neighbor scaling for bitmaps
+ * within SVGs.
+ * @param {SVGSVGElement} svgTag the SVG tag to apply the transformation to
+ */
+const transformImages = svgTag => {
+    const imageElements = collectElements(svgTag, 'image');
+
+    // For each image element, set image rendering to pixelated
+    const pixelatedImages = 'image-rendering: optimizespeed; image-rendering: pixelated;';
+    for (const elt of imageElements) {
+        if (elt.getAttribute('style')) {
+            elt.setAttribute('style',
+                `${pixelatedImages} ${elt.getAttribute('style')}`);
+        } else {
+            elt.setAttribute('style', pixelatedImages);
+        }
+    }
+};
+
+/**
+ * Transforms an SVG's text elements for Scratch 2.0 quirks.
+ * These quirks include:
+ * 1. `x` and `y` properties are removed/ignored.
+ * 2. Alignment is set to `text-before-edge`.
+ * 3. Line-breaks are converted to explicit <tspan> elements.
+ * 4. Any required fonts are injected.
+ * @param {SVGSVGElement} svgTag the SVG tag to apply the transformation to
+ */
+const transformText = svgTag => {
+    // Collect all text elements into a list.
+    const textElements = [];
+    const collectText = domElement => {
+        if (domElement.localName === 'text') {
+            textElements.push(domElement);
+        }
+        for (let i = 0; i < domElement.childNodes.length; i++) {
+            collectText(domElement.childNodes[i]);
+        }
+    };
+    collectText(svgTag);
+    convertFonts(svgTag);
+    // For each text element, apply quirks.
+    for (const textElement of textElements) {
+        // Remove x and y attributes - they are not used in Scratch.
+        textElement.removeAttribute('x');
+        textElement.removeAttribute('y');
+        // Set text-before-edge alignment:
+        // Scratch renders all text like this.
+        textElement.setAttribute('alignment-baseline', 'text-before-edge');
+        textElement.setAttribute('xml:space', 'preserve');
+        // If there's no font size provided, provide one.
+        if (!textElement.getAttribute('font-size')) {
+            textElement.setAttribute('font-size', '18');
+        }
+        let text = textElement.textContent;
+
+        // Fix line breaks in text, which are not natively supported by SVG.
+        // Only fix if text does not have child tspans.
+        // @todo this will not work for font sizes with units such as em, percent
+        // However, text made in scratch 2 should only ever export size 22 font.
+        const fontSize = parseFloat(textElement.getAttribute('font-size'));
+        const tx = 2;
+        let ty = 0;
+        let spacing = 1.2;
+        // Try to match the position and spacing of Scratch 2.0's fonts.
+        // Different fonts seem to use different line spacing.
+        // Scratch 2 always uses alignment-baseline=text-before-edge
+        // However, most SVG readers don't support this attribute
+        // or don't support it alongside use of tspan, so the translations
+        // here are to make up for that.
+        if (textElement.getAttribute('font-family') === 'Handwriting') {
+            spacing = 2;
+            ty = -11 * fontSize / 22;
+        } else if (textElement.getAttribute('font-family') === 'Scratch') {
+            spacing = 0.89;
+            ty = -3 * fontSize / 22;
+        } else if (textElement.getAttribute('font-family') === 'Curly') {
+            spacing = 1.38;
+            ty = -6 * fontSize / 22;
+        } else if (textElement.getAttribute('font-family') === 'Marker') {
+            spacing = 1.45;
+            ty = -6 * fontSize / 22;
+        } else if (textElement.getAttribute('font-family') === 'Sans Serif') {
+            spacing = 1.13;
+            ty = -3 * fontSize / 22;
+        } else if (textElement.getAttribute('font-family') === 'Serif') {
+            spacing = 1.25;
+            ty = -4 * fontSize / 22;
+        }
+
+        if (textElement.transform.baseVal.numberOfItems === 0) {
+            const transform = svgTag.createSVGTransform();
+            textElement.transform.baseVal.appendItem(transform);
+        }
+
+        // Right multiply matrix by a translation of (tx, ty)
+        const mtx = textElement.transform.baseVal.getItem(0).matrix;
+        mtx.e += (mtx.a * tx) + (mtx.c * ty);
+        mtx.f += (mtx.b * tx) + (mtx.d * ty);
+
+        if (text && textElement.childElementCount === 0) {
+            textElement.textContent = '';
+            const lines = text.split('\n');
+            text = '';
+            for (const line of lines) {
+                const tspanNode = SvgElement.create('tspan');
+                tspanNode.setAttribute('x', '0');
+                tspanNode.setAttribute('style', 'white-space: pre');
+                tspanNode.setAttribute('dy', `${spacing}em`);
+                tspanNode.textContent = line ? line : ' ';
+                textElement.appendChild(tspanNode);
+            }
+        }
+    }
+};
+
+/**
+ * Find the largest stroke width in the svg. If a shape has no
+ * `stroke` property, it has a stroke-width of 0. If it has a `stroke`,
+ * it is by default a stroke-width of 1.
+ * This is used to enlarge the computed bounding box, which doesn't take
+ * stroke width into account.
+ * @param {SVGSVGElement} rootNode The root SVG node to traverse.
+ * @return {number} The largest stroke width in the SVG.
+ */
+const findLargestStrokeWidth = rootNode => {
+    let largestStrokeWidth = 0;
+    const collectStrokeWidths = domElement => {
+        if (domElement.getAttribute) {
+            if (domElement.getAttribute('stroke')) {
+                largestStrokeWidth = Math.max(largestStrokeWidth, 1);
+            }
+            if (domElement.getAttribute('stroke-width')) {
+                largestStrokeWidth = Math.max(
+                    largestStrokeWidth,
+                    Number(domElement.getAttribute('stroke-width')) || 0
+                );
+            }
+        }
+        for (let i = 0; i < domElement.childNodes.length; i++) {
+            collectStrokeWidths(domElement.childNodes[i]);
+        }
+    };
+    collectStrokeWidths(rootNode);
+    return largestStrokeWidth;
+};
+
+/**
+ * Transform the measurements of the SVG.
+ * In Scratch 2.0, SVGs are drawn without respect to the width,
+ * height, and viewBox attribute on the tag. The exporter
+ * does output these properties - but they appear to be incorrect often.
+ * To address the incorrect measurements, we append the DOM to the
+ * document, and then use SVG's native `getBBox` to find the real
+ * drawn dimensions. This ensures things drawn in negative dimensions,
+ * outside the given viewBox, etc., are all eventually drawn to the canvas.
+ * I tried to do this several other ways: stripping the width/height/viewBox
+ * attributes and then drawing (Firefox won't draw anything),
+ * or inflating them and then measuring a canvas. But this seems to be
+ * a natural and performant way.
+ * @param {SVGSVGElement} svgTag the SVG tag to apply the transformation to
+ */
+const transformMeasurements = svgTag => {
+    // Append the SVG dom to the document.
+    // This allows us to use `getBBox` on the page,
+    // which returns the full bounding-box of all drawn SVG
+    // elements, similar to how Scratch 2.0 did measurement.
+    const svgSpot = document.createElement('span');
+    // Since we're adding user-provided SVG to document.body,
+    // sanitizing is required. This should not affect bounding box calculation.
+    // outerHTML is attribute of Element (and not HTMLElement), so use it instead of
+    // calling serializer or toString()
+    // NOTE: svgTag remains untouched!
+    const rawValue = svgTag.outerHTML;
+    const sanitizedValue = DOMPurify.sanitize(rawValue, {
+        // Use SVG profile (no HTML elements)
+        USE_PROFILES: {svg: true},
+        // Remove some tags that Scratch does not use.
+        FORBID_TAGS: ['a', 'audio', 'canvas', 'video'],
+        // Allow data URI in image tags (e.g. SVGs converted from bitmap)
+        ADD_DATA_URI_TAGS: ['image']
+    });
+    let bbox;
+    try {
+        // Insert sanitized value.
+        svgSpot.innerHTML = sanitizedValue;
+        document.body.appendChild(svgSpot);
+        // Take the bounding box. We have to get elements via svgSpot
+        // because we added it via innerHTML.
+        bbox = svgSpot.children[0].getBBox();
+    } finally {
+        // Always destroy the element, even if, for example, getBBox throws.
+        document.body.removeChild(svgSpot);
+    }
+
+    // Enlarge the bbox from the largest found stroke width
+    // This may have false-positives, but at least the bbox will always
+    // contain the full graphic including strokes.
+    // If the width or height is zero however, don't enlarge since
+    // they won't have a stroke width that needs to be enlarged.
+    let halfStrokeWidth;
+    if (bbox.width === 0 || bbox.height === 0) {
+        halfStrokeWidth = 0;
+    } else {
+        halfStrokeWidth = findLargestStrokeWidth(svgTag) / 2;
+    }
+    const width = bbox.width + (halfStrokeWidth * 2);
+    const height = bbox.height + (halfStrokeWidth * 2);
+    const x = bbox.x - halfStrokeWidth;
+    const y = bbox.y - halfStrokeWidth;
+
+    // Set the correct measurements on the SVG tag
+    svgTag.setAttribute('width', width);
+    svgTag.setAttribute('height', height);
+    svgTag.setAttribute('viewBox',
+        `${x} ${y} ${width} ${height}`);
+};
+
+/**
+ * Find all instances of a URL-referenced `stroke` in the svg. In 2.0, all gradient strokes
+ * have a round `stroke-linejoin` and `stroke-linecap`... for some reason.
+ * @param {SVGSVGElement} svgTag the SVG tag to apply the transformation to
+ */
+const setGradientStrokeRoundedness = svgTag => {
+    const elements = collectElements(svgTag);
+
+    for (const elt of elements) {
+        if (!elt.style) continue;
+        const stroke = elt.style.stroke || elt.getAttribute('stroke');
+        if (stroke && stroke.match(/^url\(#.*\)$/)) {
+            elt.style['stroke-linejoin'] = 'round';
+            elt.style['stroke-linecap'] = 'round';
+        }
+    }
+};
+
+/**
+ * In-place, convert passed SVG to something consistent that will be rendered the way we want them to be.
+ * @param {SVGSvgElement} svgTag root SVG node to operate upon
+ * @param {boolean} [fromVersion2] True if we should perform conversion from version 2 to version 3 svg.
+ */
+const normalizeSvg = (svgTag, fromVersion2) => {
+    if (fromVersion2) {
+        // Fix gradients. Scratch 2 exports no x2 when x2 = 0, but
+        // SVG default is that x2 is 1. This must be done before
+        // transformStrokeWidths since transformStrokeWidths affects
+        // gradients.
+        transformGradients(svgTag);
+    }
+    transformStrokeWidths(svgTag, window);
+    transformImages(svgTag);
+    if (fromVersion2) {
+        // Transform all text elements.
+        transformText(svgTag);
+        // Transform measurements.
+        transformMeasurements(svgTag);
+        // Fix stroke roundedness.
+        setGradientStrokeRoundedness(svgTag);
+    } else if (!svgTag.getAttribute('viewBox')) {
+        // Renderer expects a view box.
+        transformMeasurements(svgTag);
+    } else if (!svgTag.getAttribute('width') || !svgTag.getAttribute('height')) {
+        svgTag.setAttribute('width', svgTag.viewBox.baseVal.width);
+        svgTag.setAttribute('height', svgTag.viewBox.baseVal.height);
+    }
+};
+
+/**
+ * Load an SVG string and normalize it. All the steps before drawing/measuring.
+ * Currently, this will normalize stroke widths (see transform-applier.js) and render all embedded images pixelated.
+ * The returned SVG will be guaranteed to always have a `width`, `height` and `viewBox`.
+ * In addition, if the `fromVersion2` parameter is `true`, several "quirks-mode" transformations will be applied which
+ * mimic Scratch 2.0's SVG rendering.
+ * @param {!string} svgString String of SVG data to draw in quirks-mode.
+ * @param {boolean} [fromVersion2] True if we should perform conversion from version 2 to version 3 svg.
+ * @return {SVGSVGElement} The normalized SVG element.
+ */
+const loadSvgString = (svgString, fromVersion2) => {
+    // Parse string into SVG XML.
+    const parser = new DOMParser();
+    svgString = fixupSvgString(svgString);
+    const svgDom = parser.parseFromString(svgString, 'text/xml');
+    if (svgDom.childNodes.length < 1 ||
+        svgDom.documentElement.localName !== 'svg') {
+        throw new Error('Document does not appear to be SVG.');
+    }
+    const svgTag = svgDom.documentElement;
+    normalizeSvg(svgTag, fromVersion2);
+    return svgTag;
+};
+
+module.exports = loadSvgString;

package/src/playground/index.html

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Scratch SVG rendering playground</title>
+    <style>
+        .result {
+            background-color:gray;
+        }
+        #reference {
+            display:inline-block;
+            font-size:0;
+        }
+        .column {
+            display:inline-block;
+        }
+    </style>
+</head>
+<body>
+    <p>
+        <input type="file" id="svg-file-upload", accept="image/svg+xml">
+    </p>
+    <p>
+        <label for="render-scale">Scale:</label>
+        <input type="range" style="width:50%;" id="render-scale" value="1" min="0.5" max="3" step="any">
+        <label for="render-scale" id="scale-display"></label>
+    </p>
+    <p>
+        <input type="button" id="trigger-render" value="Render">
+        <label for="shouldRenderReference">
+          <input type="checkbox" id="shouldRenderReference" checked />
+          Render Reference?
+        </label>
+    </p>
+
+    <div class="columns">
+        <div class="column">
+            <div>Rendered Result</div>
+            <canvas id="render-canvas" class="result"></canvas>
+       </div>
+       <div class="column">
+            <div>Reference</div>
+            <span id="reference"></span>
+       </div>
+     </div>
+    <div class="columns">
+        <div class="column">
+            <div>Rendered Content</div>
+            <textarea id="renderedContent" wrap="off" cols="50" rows="50"></textarea>
+       </div>
+       <div class="column">
+            <div>Reference</div>
+            <span id="reference"></span>
+            <textarea id="referenceContent" wrap="off" cols="50" rows="50"></textarea>
+       </div>
+     </div>
+
+    <script src="scratch-svg-renderer.js"></script>
+    <script>
+        const renderCanvas = document.getElementById("render-canvas");
+        const referenceImage = document.getElementById("reference");
+        const fileChooser = document.getElementById("svg-file-upload");
+        const scaleSlider = document.getElementById("render-scale");
+        const scaleDisplay = document.getElementById("scale-display");
+        const renderButton = document.getElementById("trigger-render");
+
+        const renderer = new ScratchSVGRenderer.SVGRenderer(renderCanvas);
+
+        let loadedSVGString = "";
+
+        if (fileChooser.value) {
+            loadSVGString();
+        }
+
+        function renderSVGString() {
+            if (renderer.loaded) {
+                renderer.draw(parseFloat(scaleSlider.value));
+            }
+            renderedContent.value = renderer.toString(true);
+        }
+
+        function updateReferenceImage() {
+            referenceImage.innerHTML = loadedSVGString;
+            scalePercent = (parseFloat(scaleSlider.value) * 100) + "%"
+            referenceSVG = referenceImage.children[0];
+            referenceSVG.style.width = referenceSVG.style.height = scalePercent;
+            referenceSVG.classList.add("result");
+        }
+
+        function readFileAsText(file) {
+            return new Promise((res, rej) => {
+                const reader = new FileReader();
+
+                reader.onload = function(event) {
+                    res(reader.result);
+                }
+
+                reader.onerror = console.log;
+
+                reader.readAsText(file);
+            })
+        }
+
+        function loadSVGString() {
+            readFileAsText(fileChooser.files[0]).then(str => {
+                loadedSVGString = str;
+                renderer.loadSVG(str, false);
+            })
+        }
+
+        function renderLoadedString() {
+            renderSVGString();
+            referenceContent.value = loadedSVGString;
+            shouldRenderReference.checked && updateReferenceImage();
+        }
+
+        function scaleSliderChanged() {
+            renderLoadedString();
+            scaleDisplay.innerText = scaleSlider.value;
+        }
+
+        fileChooser.addEventListener("change", loadSVGString);
+
+        scaleSlider.addEventListener("change", scaleSliderChanged);
+        scaleSlider.addEventListener("input", scaleSliderChanged);
+
+        renderButton.addEventListener("click", (event => {
+            renderLoadedString();
+        }));
+    </script>
+</body>
+</html>

package/src/sanitize-svg.js

@@ -0,0 +1,104 @@
+/**
+ * @fileOverview Sanitize the content of an SVG aggressively, to make it as safe
+ * as possible
+ */
+const fixupSvgString = require('./fixup-svg-string');
+const {generate, parse, walk} = require('css-tree');
+const DOMPurify = require('isomorphic-dompurify');
+
+const sanitizeSvg = {};
+
+DOMPurify.addHook(
+    'beforeSanitizeAttributes',
+    currentNode => {
+
+        if (currentNode && currentNode.href && currentNode.href.baseVal) {
+            const href = currentNode.href.baseVal.replace(/\s/g, '');
+            // "data:" and "#" are valid hrefs
+            if ((href.slice(0, 5) !== 'data:') && (href.slice(0, 1) !== '#')) {
+
+                if (currentNode.attributes.getNamedItem('xlink:href')) {
+                    currentNode.attributes.removeNamedItem('xlink:href');
+                    delete currentNode['xlink:href'];
+                }
+                if (currentNode.attributes.getNamedItem('href')) {
+                    currentNode.attributes.removeNamedItem('href');
+                    delete currentNode.href;
+                }
+            }
+        }
+        return currentNode;
+    }
+);
+
+DOMPurify.addHook(
+    'uponSanitizeElement',
+    (node, data) => {
+        if (data.tagName === 'style') {
+            const ast = parse(node.textContent);
+            let isModified = false;
+            // Remove any @import rules as it could leak HTTP requests
+            walk(ast, (astNode, item, list) => {
+                if (astNode.type === 'Atrule' && astNode.name === 'import') {
+                    list.remove(item);
+                    isModified = true;
+                }
+            });
+            if (isModified) {
+                node.textContent = generate(ast);
+            }
+        }
+    }
+);
+
+// Use JS implemented TextDecoder and TextEncoder if it is not provided by the
+// browser.
+let _TextDecoder;
+let _TextEncoder;
+if (typeof TextDecoder === 'undefined' || typeof TextEncoder === 'undefined') {
+    // Wait to require the text encoding polyfill until we know it's needed.
+    // eslint-disable-next-line global-require
+    const encoding = require('fastestsmallesttextencoderdecoder');
+    _TextDecoder = encoding.TextDecoder;
+    _TextEncoder = encoding.TextEncoder;
+} else {
+    _TextDecoder = TextDecoder;
+    _TextEncoder = TextEncoder;
+}
+
+/**
+ * Load an SVG Uint8Array of bytes and "sanitize" it
+ * @param {!Uint8Array} rawData unsanitized SVG daata
+ * @return {Uint8Array} sanitized SVG data
+ */
+sanitizeSvg.sanitizeByteStream = function (rawData) {
+    const decoder = new _TextDecoder();
+    const encoder = new _TextEncoder();
+    const sanitizedText = sanitizeSvg.sanitizeSvgText(decoder.decode(rawData));
+    return encoder.encode(sanitizedText);
+};
+
+/**
+ * Load an SVG string and "sanitize" it. This is more aggressive than the handling in
+ * fixup-svg-string.js, and thus more risky; there are known examples of SVGs that
+ * it will clobber. We use DOMPurify's svg profile, which restricts many types of tag.
+ * @param {!string} rawSvgText unsanitized SVG string
+ * @return {string} sanitized SVG text
+ */
+sanitizeSvg.sanitizeSvgText = function (rawSvgText) {
+    let sanitizedText = DOMPurify.sanitize(rawSvgText, {
+        USE_PROFILES: {svg: true}
+    });
+
+    // Remove partial XML comment that is sometimes left in the HTML
+    const badTag = sanitizedText.indexOf(']>');
+    if (badTag >= 0) {
+        sanitizedText = sanitizedText.substring(5, sanitizedText.length);
+    }
+
+    // also use our custom fixup rules
+    sanitizedText = fixupSvgString(sanitizedText);
+    return sanitizedText;
+};
+
+module.exports = sanitizeSvg;

package/src/serialize-svg-to-string.js

@@ -0,0 +1,19 @@
+const inlineSvgFonts = require('./font-inliner');
+
+/**
+ * Serialize a given SVG DOM to a string.
+ * @param {SVGSVGElement} svgTag The SVG element to serialize.
+ * @param {?boolean} shouldInjectFonts True if fonts should be included in the SVG as
+ *     base64 data.
+ * @returns {string} String representing current SVG data.
+ */
+const serializeSvgToString = (svgTag, shouldInjectFonts) => {
+    const serializer = new XMLSerializer();
+    let string = serializer.serializeToString(svgTag);
+    if (shouldInjectFonts) {
+        string = inlineSvgFonts(string);
+    }
+    return string;
+};
+
+module.exports = serializeSvgToString;

package/src/svg-element.js

@@ -0,0 +1,71 @@
+/* Adapted from
+ * Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
+ * http://paperjs.org/
+ *
+ * Copyright (c) 2011 - 2016, Juerg Lehni & Jonathan Puckey
+ * http://scratchdisk.com/ & http://jonathanpuckey.com/
+ *
+ * Distributed under the MIT license. See LICENSE file for details.
+ *
+ * All rights reserved.
+ */
+
+/**
+ * @name SvgElement
+ * @namespace
+ * @private
+ */
+class SvgElement {
+    // SVG related namespaces
+    static get svg () {
+        return 'http://www.w3.org/2000/svg';
+    }
+    static get xmlns () {
+        return 'http://www.w3.org/2000/xmlns';
+    }
+    static get xlink () {
+        return 'http://www.w3.org/1999/xlink';
+    }
+
+    // Mapping of attribute names to required namespaces:
+    static attributeNamespace () {
+        return {
+            'href': SvgElement.xlink,
+            'xlink': SvgElement.xmlns,
+            // Only the xmlns attribute needs the trailing slash. See #984
+            'xmlns': `${SvgElement.xmlns}/`,
+            // IE needs the xmlns namespace when setting 'xmlns:xlink'. See #984
+            'xmlns:xlink': `${SvgElement.xmlns}/`
+        };
+    }
+
+    static create (tag, attributes, formatter) {
+        return SvgElement.set(document.createElementNS(SvgElement.svg, tag), attributes, formatter);
+    }
+
+    static get (node, name) {
+        const namespace = SvgElement.attributeNamespace[name];
+        const value = namespace ?
+            node.getAttributeNS(namespace, name) :
+            node.getAttribute(name);
+        return value === 'null' ? null : value;
+    }
+
+    static set (node, attributes, formatter) {
+        for (const name in attributes) {
+            let value = attributes[name];
+            const namespace = SvgElement.attributeNamespace[name];
+            if (typeof value === 'number' && formatter) {
+                value = formatter.number(value);
+            }
+            if (namespace) {
+                node.setAttributeNS(namespace, name, value);
+            } else {
+                node.setAttribute(name, value);
+            }
+        }
+        return node;
+    }
+}
+
+module.exports = SvgElement;