Create and scale image element in svg from input type image base64

Question

So I have a onChange listener on an input type image which triggers the appending of an image element onto the svg. The problem comes when i try to scale the image with viewbox or other methods. The image element is attached to the svg but it only covers a portion of the svg equivalent to the image resolution. I want the image to be scaled accordingly within the svg.

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            var svg = document.getElementById('svg');
            $("svg").empty();

            var image = document.createElementNS(svgNS, 'image');
            image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', e.target.result);
            image.setAttributeNS(svgNS, 'class', 'map-image');
            image.setAttributeNS(svgNS, 'width', '1000px');
            image.setAttributeNS(svgNS, 'height', '500px');
            image.setAttributeNS(svgNS, 'x', '0');
            image.setAttributeNS(svgNS, 'y', '0');
            svg.appendChild(image);
        }

        reader.readAsDataURL(input.files[0]);
    }
}
  $('#input-map').on('change', function () {
        //get the file name
        var fileName = $(this).val();
        readURL(this)
        //replace the "Choose a file" label
        $(this).next('.custom-file-label').html(fileName);
    })