Image To SVG Converter

/**
 * Converts a raster image object into an SVG element by embedding the image data.
 * This function creates a valid SVG wrapper around the original image data,
 * making it usable in contexts that require an SVG format.
 *
 * @param {Image} originalImg The original Image object to be converted.
 * @returns {SVGSVGElement} An SVG element containing the embedded image.
 */
function processImage(originalImg) {
    // Create an in-memory canvas to draw the image on.
    // This allows us to get a clean data URL representation of the image,
    // regardless of its original source (e.g., from a blob, different format, etc.).
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the natural dimensions of the source image
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Set the canvas dimensions to match the image
    canvas.width = width;
    canvas.height = height;

    // Draw the image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    // Get the image data from the canvas as a Base64-encoded PNG data URL.
    // PNG is used as a good default for preserving quality.
    const dataURL = canvas.toDataURL('image/png');

    // Define the SVG XML namespace
    const svgns = 'http://www.w3.org/2000/svg';

    // Create the main <svg> element
    const svg = document.createElementNS(svgns, 'svg');

    // Set the SVG attributes for dimensions and namespace
    svg.setAttribute('xmlns', svgns);
    svg.setAttribute('width', width.toString());
    svg.setAttribute('height', height.toString());
    svg.setAttribute('viewBox', `0 0 ${width} ${height}`);

    // Create the <image> element that will be embedded within the SVG
    const imageElement = document.createElementNS(svgns, 'image');

    // Set the attributes for the <image> element
    imageElement.setAttribute('href', dataURL);
    imageElement.setAttribute('width', width.toString());
    imageElement.setAttribute('height', height.toString());

    // Append the <image> element to the <svg> element
    svg.appendChild(imageElement);

    // Return the final SVG element, which can be directly appended to the DOM
    return svg;
}