{"action":"created","issue":{"url":"https://api.github.com/repos/kangax/fabric.js/issues/899","labels_url":"https://api.github.com/repos/kangax/fabric.js/issues/899/labels{/name}","comments_url":"https://api.github.com/repos/kangax/fabric.js/issues/899/comments","events_url":"https://api.github.com/repos/kangax/fabric.js/issues/899/events","html_url":"https://github.com/kangax/fabric.js/issues/899","id":20920644,"number":899,"title":"loadSVGFromURL ignores Groups <g>?","user":{"login":"mikebronner","id":1791050,"avatar_url":"https://avatars.githubusercontent.com/u/1791050?v=3","gravatar_id":"","url":"https://api.github.com/users/mikebronner","html_url":"https://github.com/mikebronner","followers_url":"https://api.github.com/users/mikebronner/followers","following_url":"https://api.github.com/users/mikebronner/following{/other_user}","gists_url":"https://api.github.com/users/mikebronner/gists{/gist_id}","starred_url":"https://api.github.com/users/mikebronner/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mikebronner/subscriptions","organizations_url":"https://api.github.com/users/mikebronner/orgs","repos_url":"https://api.github.com/users/mikebronner/repos","events_url":"https://api.github.com/users/mikebronner/events{/privacy}","received_events_url":"https://api.github.com/users/mikebronner/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/kangax/fabric.js/labels/possible_feature","name":"possible_feature","color":"e102d8"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":7,"created_at":"2013-10-13T02:21:41Z","updated_at":"2015-06-04T22:29:21Z","closed_at":null,"body":"I'm loading in an external SVG file to parse out and display items on the canvas as they are selected (from other images or canvases).\r\nIn my SVG file I have all objects organized into various groups, which I need to retain for organizational reference in my code logic.\r\nI'm finding out, though, that loadSVGFromURL appears to ignore groups alltogether, and only import the objects (i.e. paths, circles, etc.).\r\n\r\n~~Or rather: it loads the groups as stand-alone objects, and doesn't preserve the hierarchy (that I can tell).~~ Actually not true, it seems to ignore <g> completely ... I had similarly named <paths> and had thought the group loaded, but not so.\r\n\r\nAny ideas why this might be?\r\n\r\nHere is an excerpt of my SVG file:\r\n\r\n```\r\n<svg width=\"1891px\" height=\"1492px\" viewBox=\"0 0 1891 1492\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:sketch=\"http://www.bohemiancoding.com/sketch/ns\">\r\n    <title>blazonry</title>\r\n    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>\r\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" sketch:type=\"MSPage\">\r\n        <g id=\"Shields\" sketch:type=\"MSLayerGroup\" transform=\"translate(342.000000, 26.000000)\" stroke=\"#000000\">\r\n            <path d=\"M1,0 L1,400 C0.999999169,799.99998 201,1205 601,1439.4375 C1001,1205 1201,800 1201,400 L1201,0 L1,0 Z M1,0\" id=\"Heater\" sketch:type=\"MSShapeGroup\"></path>\r\n            <path d=\"M1,0 L1,960.824531 C1.00000084,1439.4375 489.311066,1258.28207 600.483175,1439.4375 C708.904794,1258.28211 1201,1439.4375 1200.99997,960.824531 C1200.99996,960.824531 1201,0 1201,0 L1,0 Z M1,0\" id=\"BevelledSmooth\" sketch:type=\"MSShapeGroup\"></path>\r\n[...]\r\n```\r\n\r\nAnd here the code I'm using to fetch the information:\r\n\r\n```\r\n<!DOCTYPE html>\r\n<html>\r\n\t<head>\r\n\t\t<title>Test</title>\r\n\t\t<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"></script>\r\n\t\t<script src=\"scripts/fabric.min.js\"></script>\r\n\t\t<script type=\"text/javascript\">\r\n\t\t\t<!--\r\n\t\t\tvar currentShield = -1;\r\n\t\t\tvar target;\r\n\t\t\tvar group = [];\r\n\t\t\tvar loadedObjects\r\n\t\t\t\r\n   $(function(){\r\n\t\t\tthis.target = new fabric.Canvas('result');\r\n\r\n        fabric.loadSVGFromURL(\"assets/blazonry.svg\",function(objects,options) {\r\n\r\n         loadedObjects = new fabric.Group(objects);\r\n\r\n//\t\talert(options);\r\n\r\n        target.add(loadedObjects);\r\n        canvas.renderAll();\r\n\r\n        },function(item, object) {\r\n        \tif (item.getAttribute(\"id\") == \"Shields\")\r\n        \t{\r\n                object.set('id',item.getAttribute('id'));\r\n                this.group.push(item);\r\n               }\r\n        });\r\n\r\n\r\n    }); // end $(function(){});\r\n\t\t\t\r\n\t\t\tfunction nextShield()\r\n\t\t\t{\r\n\t\t\t\t\t\ttarget = new fabric.Canvas('result');\r\n\r\n\t\t\t\tthis.currentShield++;\r\n\t\t\t\tvar test = new fabric.Path(this.group[currentShield].getAttribute(\"d\"))\r\n\r\n        test.set({\r\n        \t\ttop: 250,\r\n        \t\tleft: 250,\r\n                scaleY: .1,\r\n                scaleX: .1\r\n        });\r\n\t\t\t\ttarget.add(test);\r\n\t\t\t\ttarget.renderAll();\r\n\t\t\t}\r\n\t\t\t-->\r\n\t\t</script>\r\n\t\t<style>\r\n\t\t\tcanvas\r\n\t\t\t{\r\n\t\t\t\tborder: 1px solid black;\r\n\t\t\t}\r\n\t\t</style>\r\n\t</head>\r\n\t<body>\r\n\t\t<canvas id=\"result\" width=\"500\" height=\"500\"></canvas>\r\n\t\t<input type=\"button\" id=\"next\" onclick=\"nextShield();\" value=\"Next Shield\" />\r\n\t\t<ul id=\"carousel\" class=\"elastislide-list\">\r\n\t\t</ul>\r\n\t</body>\r\n</html>\r\n```\r\n\r\n<bountysource-plugin>\r\n---\r\nWant to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/1015760-loadsvgfromurl-ignores-groups-g?utm_campaign=plugin&utm_content=tracker%2F23217&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F23217&utm_medium=issues&utm_source=github).\r\n</bountysource-plugin>"},"comment":{"url":"https://api.github.com/repos/kangax/fabric.js/issues/comments/109072849","html_url":"https://github.com/kangax/fabric.js/issues/899#issuecomment-109072849","issue_url":"https://api.github.com/repos/kangax/fabric.js/issues/899","id":109072849,"user":{"login":"ramezrafla","id":1903864,"avatar_url":"https://avatars.githubusercontent.com/u/1903864?v=3","gravatar_id":"","url":"https://api.github.com/users/ramezrafla","html_url":"https://github.com/ramezrafla","followers_url":"https://api.github.com/users/ramezrafla/followers","following_url":"https://api.github.com/users/ramezrafla/following{/other_user}","gists_url":"https://api.github.com/users/ramezrafla/gists{/gist_id}","starred_url":"https://api.github.com/users/ramezrafla/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ramezrafla/subscriptions","organizations_url":"https://api.github.com/users/ramezrafla/orgs","repos_url":"https://api.github.com/users/ramezrafla/repos","events_url":"https://api.github.com/users/ramezrafla/events{/privacy}","received_events_url":"https://api.github.com/users/ramezrafla/received_events","type":"User","site_admin":false},"created_at":"2015-06-04T22:29:21Z","updated_at":"2015-06-04T22:29:21Z","body":"Thanks @asturur \r\nSo this seems to work:\r\n\r\n     \t\tgroup1 = new fabric.PathGroup([rect]);\r\n\t\tgroup1.transformMatrix = [1,0,0,2,0,20];\r\n\r\n\t\tvar group2 = new fabric.PathGroup([group1]);\r\n\t\tgroup2.transformMatrix = [2,0,0,1,20,0];\r\n\t\t\r\n\t\tcanvas.add(group2);\r\n\r\nThe transformMatrix is respected (as it seems).\r\nNow we need to build a post-renderer parser to get this hierarchy going right :)\r\n\r\n"}}