HTML SVG as background with unscaled, right-alined content

Question

What are the configuration parts? As far as I have it tested, that is what I identified: - body background-image needs to be set to the SVG - body background-sizing - to fill the background, i tried 100% 100% - svg tag's attribute viewBox must contain the original values to define the proportions? - svg width and height attributes do not do anything? - svg attribute preserveAspectRatio does not do anthing? - the svg's content-object is .. well I don't know how to align it to the right

So far the background still scales, and content stays centered. Any wisdom around on this matter?

html,body {
  min-height: 100vh;
  min-width: 100%;
  color: white;
}

body {
  background: no-repeat;
  background-size: 100% 100%;
  background-image: 
        url("data:image/svg+xml;utf8,<svg width='100%' height='100%' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'     viewBox='0 0 366 768'  xml:space='preserve'><rect x='260' style='fill:lime' y='257' width='229' height='142'/></svg>");
}

test case on jsfiddle

Thanks folks

edit: The content should not scale, but the main SVG area should. Having the content always aligned to the right.