Scale an Snap.svg canvas

The good thing about svg (vector graphic) is that it’s scalable so you can increase or increase the size of the object without losing quality. For me the easiest way working with Snap.svg has been to figure out the aspect ratio and than create a size that easy to see and work on. Then set the attribute viewBox on the svg HTML-tag as the same size as when I created the graphic and set smaller/bigger width and height but still with the same ratio. E.g. <svg viewBox="0 0 225 150" width="112.5" height="75">

And with Snap.svg

Snap("#element_id").attr({
  viewBox: "0 0 255 150",
  width: 112.5,
  height: 75
});

The 2 zeros in the beginning of viewBox is the starting position top and left.

5 responses to “Scale an Snap.svg canvas”

  1. LA says:

    Thanks for this!

  2. Alvin Yeung says:

    You forgot the closing quotation mark for the viewBox’s attribute on Line 2

  3. John from Hamburg, Germany says:

    Thank you fine sir. This helped me a ton

  4. John from Hamburg, Germany says:

    btw. if you use this with jquery like I do – you can autoscale like so:

    $(context).find('svg#svg').once('drawsvg').each(function () {

    Snap('#svg').attr({
    viewBox: "0 0 800 400",
    width: $(this).width(),
    height: $(this).width() / 2
    });

    ....

Leave a Reply

Your email address will not be published. Required fields are marked *