From 802deda60f163312a5e06ea455dbb7e306101654 Mon Sep 17 00:00:00 2001
From: Florian Klampfer <mail@qwtel.com>
Date: Wed, 28 Oct 2020 19:07:50 +0700
Subject: [PATCH 1/2] Add SVG renderer

---
 src/blockies.mjs | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/blockies.mjs b/src/blockies.mjs
index 4b908b7..95356df 100644
--- a/src/blockies.mjs
+++ b/src/blockies.mjs
@@ -111,3 +111,30 @@ export function createIcon(opts) {
 
 	return canvas;
 }
+
+export function renderIconSVG(opts) {
+	opts = buildOpts(opts);
+	const imageData = createImageData(opts.size);
+	const width = Math.sqrt(imageData.length);
+
+	const size = opts.size * opts.scale;
+
+	let svg = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}">`;
+	svg += `<rect x="0" y="0" width="${size}" height="${size}" fill="${opts.bgcolor}"/>`
+
+	for (let i = 0; i < imageData.length; i++) {
+
+		// if data is 0, leave the background
+		if (imageData[i]) {
+			const row = Math.floor(i / width);
+			const col = i % width;
+
+			// if data is 2, choose spot color, if 1 choose foreground
+			const fill = (imageData[i] == 1) ? opts.color : opts.spotcolor;
+
+			svg += `<rect x="${col * opts.scale}" y="${row * opts.scale}" width="${opts.scale}" height="${opts.scale}" fill="${fill}"/>`
+		}
+	}
+
+	return svg + '</svg>';
+}

From e4dfe44e09b7b24f0647392b73409354680114f6 Mon Sep 17 00:00:00 2001
From: Florian Klampfer <mail@qwtel.com>
Date: Wed, 28 Oct 2020 19:19:12 +0700
Subject: [PATCH 2/2] Implement without template strings

---
 src/blockies.mjs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/blockies.mjs b/src/blockies.mjs
index 95356df..596bcf4 100644
--- a/src/blockies.mjs
+++ b/src/blockies.mjs
@@ -119,8 +119,8 @@ export function renderIconSVG(opts) {
 
 	const size = opts.size * opts.scale;
 
-	let svg = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}">`;
-	svg += `<rect x="0" y="0" width="${size}" height="${size}" fill="${opts.bgcolor}"/>`
+	let svg = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + size + ' ' + size + '">';
+	svg += '<rect x="0" y="0" width="' + size + '" height="' + size + '" fill="' + opts.bgcolor + '"/>';
 
 	for (let i = 0; i < imageData.length; i++) {
 
@@ -132,7 +132,7 @@ export function renderIconSVG(opts) {
 			// if data is 2, choose spot color, if 1 choose foreground
 			const fill = (imageData[i] == 1) ? opts.color : opts.spotcolor;
 
-			svg += `<rect x="${col * opts.scale}" y="${row * opts.scale}" width="${opts.scale}" height="${opts.scale}" fill="${fill}"/>`
+			svg += '<rect x="' + col * opts.scale + '" y="' + row * opts.scale + '" width="' + opts.scale + '" height="' + opts.scale + '" fill="' + fill + '"/>';
 		}
 	}