{"action":"created","issue":{"url":"https://api.github.com/repos/processing/p5.js/issues/1179","labels_url":"https://api.github.com/repos/processing/p5.js/issues/1179/labels{/name}","comments_url":"https://api.github.com/repos/processing/p5.js/issues/1179/comments","events_url":"https://api.github.com/repos/processing/p5.js/issues/1179/events","html_url":"https://github.com/processing/p5.js/issues/1179","id":122816606,"number":1179,"title":"SVG image positioning and scaling","user":{"login":"geoffalday","id":713227,"avatar_url":"https://avatars.githubusercontent.com/u/713227?v=3","gravatar_id":"","url":"https://api.github.com/users/geoffalday","html_url":"https://github.com/geoffalday","followers_url":"https://api.github.com/users/geoffalday/followers","following_url":"https://api.github.com/users/geoffalday/following{/other_user}","gists_url":"https://api.github.com/users/geoffalday/gists{/gist_id}","starred_url":"https://api.github.com/users/geoffalday/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/geoffalday/subscriptions","organizations_url":"https://api.github.com/users/geoffalday/orgs","repos_url":"https://api.github.com/users/geoffalday/repos","events_url":"https://api.github.com/users/geoffalday/events{/privacy}","received_events_url":"https://api.github.com/users/geoffalday/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-12-17T20:25:48Z","updated_at":"2016-01-01T03:37:21Z","closed_at":null,"body":"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.\r\n\r\n```\r\nvar alien_png;\r\nvar alien_svg;\r\n\r\nfunction preload() {\r\n  alien_png = loadImage(\"data/alien.png\");\r\n  alien_svg = loadImage(\"data/alien.svg\");\r\n}\r\n\r\nfunction setup() {\r\n  createCanvas(400, 400);\r\n  fill(0);\r\n  \r\n}\r\n\r\nfunction draw() {\r\n  background(255);\r\n  \r\n  image(alien_png, 10, 10);\r\n  image(alien_svg, 10, 10);\r\n}\r\n```\r\n\r\nThis is what is rendered with that code:\r\n![svg_bug_1](https://cloud.githubusercontent.com/assets/713227/11880987/a7782b78-a4c9-11e5-9afd-e9455e3e13ec.png)\r\n\r\nIf I remove the `viewBox` attribute from the SVG...\r\n![alien_svg](https://cloud.githubusercontent.com/assets/713227/11880999/bdf21bd4-a4c9-11e5-86a4-b686ed6bc24d.png)\r\n\r\n![alien_svg_viewbox_removed](https://cloud.githubusercontent.com/assets/713227/11881005/c59886de-a4c9-11e5-93ce-06b9234ee4d6.png)\r\n\r\n... it renders as expected (at least how I would expect it to):\r\n![svg_bug_2](https://cloud.githubusercontent.com/assets/713227/11881043/f7274456-a4c9-11e5-806c-1786df7ba585.png)\r\n\r\nThanks!"},"comment":{"url":"https://api.github.com/repos/processing/p5.js/issues/comments/168280464","html_url":"https://github.com/processing/p5.js/issues/1179#issuecomment-168280464","issue_url":"https://api.github.com/repos/processing/p5.js/issues/1179","id":168280464,"user":{"login":"lmccart","id":191056,"avatar_url":"https://avatars.githubusercontent.com/u/191056?v=3","gravatar_id":"","url":"https://api.github.com/users/lmccart","html_url":"https://github.com/lmccart","followers_url":"https://api.github.com/users/lmccart/followers","following_url":"https://api.github.com/users/lmccart/following{/other_user}","gists_url":"https://api.github.com/users/lmccart/gists{/gist_id}","starred_url":"https://api.github.com/users/lmccart/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lmccart/subscriptions","organizations_url":"https://api.github.com/users/lmccart/orgs","repos_url":"https://api.github.com/users/lmccart/repos","events_url":"https://api.github.com/users/lmccart/events{/privacy}","received_events_url":"https://api.github.com/users/lmccart/received_events","type":"User","site_admin":false},"created_at":"2016-01-01T03:37:21Z","updated_at":"2016-01-01T03:37:21Z","body":"hey @DarkPrince304, it'd be great if you'd like to take a look at this. unfortunately, i don't know too much about svgs and so i don't have a clear idea about what the best fix for this, without digging in further.\r\n\r\nmy vague guess is that the viewbox property is forcing some scaling or image sizing so it shows up at a specific size. this may be clashing with the fact the canvas is sometimes actually larger than the size set by `createCanvas()` to accommodate high density displays. that is, if you set the canvas to 400x400, but the pixel density of the screen is 2, then the canvas will actually be created at 800x800, and then scaled with css style properties to show up at 400x400.\r\n\r\nmaybe when the p5.Image is loaded, we need to check if it has the viewbox property, and if so either (a) remove it or (b) set some flag or reset the width and height properties so it is properly scaled.\r\n\r\nthese are just some quick thoughts, feel free to dig in more and experiment. the `pixelDensity(1)` function may be useful for testing to see if that is related to the issue at all.\r\n\r\nmaybe @zenozeng who was working with some p5 SVG stuff this summer may have more ideas as well?"}}