SVG image positioning and scaling

[lmccart]

repost from @geoffalday on p5.js repo https://github.com/processing/p5.js/issues/1179#issuecomment-174550741

I tested this on chrome, safari, and firefox and all look fine, it's just in the p5 editor when not run in browser that there seems to be an issue.

---

When loading an SVG image, the positioning and scaling doesn't render as expected. Note the two images used in this example were saved from the same file with the same dimensions.

var alien_png;
var alien_svg;

function preload() {
  alien_png = loadImage("data/alien.png");
  alien_svg = loadImage("data/alien.svg");
}

function setup() {
  createCanvas(400, 400);
  fill(0);

}

function draw() {
  background(255);

  image(alien_png, 10, 10);
  image(alien_svg, 10, 10);
}

This is what is rendered with that code:

If I remove the viewBox attribute from the SVG...

... it renders as expected (at least how I would expect it to):

Thanks!