Capture SVG and rescale to miniature

Question

I've got a small application written with Raphael.js that paints a node network with SVG and rearranges it based on selections given.

What I need to be able to do is capture the svg picture I've drawn and display it on a "mini-map" type of display on the bottom of the screen. Since I have no idea what the canvas will look like when I capture it, I want to know if it's possible to just capture it as a bitmap or something similar?

Put together a quick fiddle to show close to what I mean:

http://jsfiddle.net/WNnCH/1/

Is there some way to do something like: SVG.copy? or SVG.img? (I'm sure there's not, but you know what I mean?)

I've looked in to how I could just capture the whole SVG and resize it (which is more code than I think I'd like to write or is necessary), or even copy an entire SVG, but I don't know if it's possible to capture an svg as an image and scale it down to what I need.

The minimap doesn't need to be a SVG, it can just be an image, because it's basically just a history of what the screen looked like on a prior action.

Thanks for all suggestions!

Answer 1

There is a way to do this using just Raphael, creating a set with your minimap elements and then cloning it. However it's more tricky since you want the minimap to be a separate entity/paper. I borrowed some code from this answer to clone your map to a new paper and it works well (jsfiddle)

(function (R) {
    var cloneSet; // to cache set cloning function for optimisation

    /**
     * Clones Raphael element from one paper to another
     *     
     * @param {Paper} targetPaper is the paper to which this element 
     * has to be cloned
     *
     * @return RaphaelElement
     */
    R.el.cloneToPaper = function (targetPaper) {
        return (!this.removed &&
            targetPaper[this.type]().attr(this.attr()));
    };

    /**
     * Clones Raphael Set from one paper to another
     *     
     * @param {Paper} targetPaper is the paper to which this element 
     * has to be cloned
     *
     * @return RaphaelSet
     */
    R.st.cloneToPaper = function (targetPaper) {
        targetPaper.setStart();
        this.forEach(cloneSet || (cloneSet = function (el) {
            el.cloneToPaper(targetPaper);
        }));
        return targetPaper.setFinish();
    };
}(Raphael));

var paper = Raphael(30, 30, 200, 200);
var circle = paper.circle(30, 30, 30);
circle.attr("fill", "#ccc");
var circle1 = paper.circle(70, 70, 30);
circle1.attr("fill", "#ccc");
var circle2 = paper.circle(110, 30, 30);
circle2.attr("fill", "#ccc");
var circle3 = paper.circle(30, 110, 30);
circle3.attr("fill", "#ccc");
var circle4 = paper.circle(110, 110, 30);
circle4.attr("fill", "#ccc");

var s = paper.set();
s.push(circle, circle1, circle2, circle3, circle4);

var minipaper = Raphael(document.getElementById("minimap").getElementsByTagName("div")[1], 140, 140);
var miniset = s.cloneToPaper(minipaper);
miniset.transform("s0.5,0.5,55,55"); // scale by 0.5 around (55,55)

Answer 2

You can easily make thumbnails of a primary SVG by creating a different scaled-down SVG that points the first one.

<div id="main">
    <svg id="mainsvg" viewBox="0 0 1000 1000">
        <rect x="100" y="100" width="500" height="500" fill="green"
              transform="rotate(10,350,350)"/>
        <rect x="400" y="400" width="500" height="500" fill="orange"
              transform="rotate(-10,650,650)"/>
    </svg>
</div>


<div id="thumb">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink">
        <use xlink:href="#mainsvg" />
    </svg>
</div>

The SVG sizes are determined by CSS:

#main {
    width: 400px;
    height: 400px;
}

#thumb {
    width: 80px;
    height: 80px;
}

You can do anything you want to the main SVG and the thumb will reflect all the changes.

Demo here