SVG image gets lost on export

[laurensgeerts]

So I've made a little generator where you can manipulate 4 different shapes. Now I wanted to add the feature so you can add an SVG pattern (that is made in illustrator) to one of the 4 shapes. So I've created a little pattern that repeats the SVG image. It seems to work in browser but once I export it, the SVG image from the pattern gets lost. Is there a way I can export the SVG image along with the exported SVG file? Now I have to add the pattern afterwards in illustrator.

My pattern looks like this (the white squares should be the SVG file):

var patterntest = 'patterns/test.svg'

var linear1 = draw.pattern(20, 20, function(add) {
    add.rect(20,20).fill(patterntest)
    add.rect(10,10)
    add.rect(10,10).move(10,10)
  })

But the export looks like this:

This is my export code (if that helps), output1 is the ID of my canvas:

    const svgContent = document.getElementById("output1").outerHTML,
          blob = new Blob([svgContent], {
              type: "image/svg+xml"
          }),
          url = window.URL.createObjectURL(blob),
          link = evt.target;

    link.target = "_blank";
    link.download = "MVV-VISUAL.svg";
    link.href = url;

If more info is needed let me know! Thanks in advance!

Edit: this is the result I got when I try it with a png (which would be alright as well but I prefer using SVG):

[Fuzzyma]

The most obvious question is: What is the content of the generated file? :)

PS: You can get the svg content by calling svg() on the root svg instead of using outerHTML

[laurensgeerts]

The most obvious question is: What is the content of the generated file? :)

PS: You can get the svg content by calling svg() on the root svg instead of using outerHTML

Thanks for the tip! I've changed it :) What do you mean exactly by content? I've drawn 4 shapes which each get a fill of choice by the user (consisting out of an external SVG image).

[Fuzzyma]

What is the underlying svg code?