added support SVGElement object for svg node #1936

Author: liborm85

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Added auto page height for multiple pages (for `section` or after custom page break)
 - Added type validation for parameters in method `createPdf`
+- Added support `SVGElement` object for `svg` node (`SVGElement` object is available only in browser)
 - Fixed a bug in the write method where it did not wait for the file write operation to complete
 - Fixed SVG loading
 - Fixed rendering SVG without viewBox

src/Renderer.js

@@ -1,6 +1,6 @@
 import TextDecorator from './TextDecorator';
 import TextInlines from './TextInlines';
-import { isNumber } from './helpers/variableType';
+import { isNumber, isString } from './helpers/variableType';
 import SVGtoPDF from './3rd-party/svg-to-pdfkit';
 
 const findFont = (fonts, requiredFonts, defaultFont) => {
@@ -329,7 +329,13 @@ class Renderer {
 	}
 
 	renderSVG(svg) {
-		let options = Object.assign({ width: svg._width, height: svg._height, assumePt: true }, svg.options);
+		let options = {
+			width: svg._width,
+			height: svg._height,
+			assumePt: true,
+			...svg.options,
+			useCSS: !isString(svg.svg)
+		};
 		options.fontCallback = (family, bold, italic) => {
 			let fontsFamily = family.split(',').map(f => f.trim().replace(/('|")/g, ''));
 			let font = findFont(this.pdfDocument.fonts, fontsFamily, svg.font || 'Roboto');

src/SVGMeasure.js

@@ -1,4 +1,5 @@
 import { XmlDocument } from "xmldoc";
+import { isString } from './helpers/variableType';
 
 /**
  * Strip unit postfix, parse number, but return undefined instead of NaN for bad input
@@ -26,11 +27,11 @@ const parseSVG = (svgString) => {
 	try {
 		doc = new XmlDocument(svgString);
 	} catch (err) {
-		throw new Error('SVGMeasure: ' + err);
+		throw new Error('Invalid svg document (' + err + ')');
 	}
 
 	if (doc.name !== "svg") {
-		throw new Error('SVGMeasure: expected <svg> document');
+		throw new Error('Invalid svg document (expected <svg>)');
 	}
 
 	return doc;
@@ -41,16 +42,30 @@ class SVGMeasure {
 
 	}
 
-	measureSVG(svgString) {
-		let doc = parseSVG(svgString);
+	measureSVG(svg) {
+		let width, height, viewBox;
 
-		let docWidth = stripUnits(doc.attr.width);
-		let docHeight = stripUnits(doc.attr.height);
+		if (isString(svg)) {
+			let doc = parseSVG(svg);
 
-		if ((docWidth === undefined || docHeight === undefined) && typeof doc.attr.viewBox === 'string') {
-			let viewBoxParts = doc.attr.viewBox.split(/[,\s]+/);
+			width = doc.attr.width;
+			height = doc.attr.height;
+			viewBox = doc.attr.viewBox;
+		} else if (typeof SVGElement !== 'undefined' && svg instanceof SVGElement && typeof getComputedStyle === 'function') {
+			width = svg.getAttribute("width");
+			height = svg.getAttribute("height");
+			viewBox = svg.getAttribute("viewBox");
+		} else {
+			throw new Error('Invalid SVG document');
+		}
+
+		let docWidth = stripUnits(width);
+		let docHeight = stripUnits(height);
+
+		if ((docWidth === undefined || docHeight === undefined) && typeof viewBox === 'string') {
+			let viewBoxParts = viewBox.split(/[,\s]+/);
 			if (viewBoxParts.length !== 4) {
-				throw new Error("Unexpected svg viewbox format, should have 4 entries but found: '" + doc.attr.viewBox + "'");
+				throw new Error("Unexpected svg viewBox format, should have 4 entries but found: '" + viewBox + "'");
 			}
 			if (docWidth === undefined) {
 				docWidth = stripUnits(viewBoxParts[2]);
@@ -66,17 +81,28 @@ class SVGMeasure {
 		};
 	}
 
-	writeDimensions(svgString, dimensions) {
-		let doc = parseSVG(svgString);
-		
-		if (typeof doc.attr.viewBox !== 'string') {
-			doc.attr.viewBox = `0 0 ${stripUnits(doc.attr.width)} ${stripUnits(doc.attr.height)}`;
+	writeDimensions(svg, dimensions) {
+		if (isString(svg)) {
+			let doc = parseSVG(svg);
+
+			if (typeof doc.attr.viewBox !== 'string') {
+				doc.attr.viewBox = `0 0 ${stripUnits(doc.attr.width)} ${stripUnits(doc.attr.height)}`;
+			}
+
+			doc.attr.width = "" + dimensions.width;
+			doc.attr.height = "" + dimensions.height;
+
+			return doc.toString();
+		}
+
+		if (!svg.hasAttribute('viewBox')) {
+			svg.setAttribute('viewBox', `0 0 ${stripUnits(svg.getAttribute('width'))} ${stripUnits(svg.getAttribute('height'))}`);
 		}
 
-		doc.attr.width = "" + dimensions.width;
-		doc.attr.height = "" + dimensions.height;
+		svg.setAttribute('width', "" + dimensions.width);
+		svg.setAttribute('height', "" + dimensions.height);
 
-		return doc.toString();
+		return svg;
 	}
 }