{"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":12,"created_at":"2013-10-13T02:21:41Z","updated_at":"2015-07-24T17:21:00Z","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/124585114","html_url":"https://github.com/kangax/fabric.js/issues/899#issuecomment-124585114","issue_url":"https://api.github.com/repos/kangax/fabric.js/issues/899","id":124585114,"user":{"login":"eric-schleicher","id":8261783,"avatar_url":"https://avatars.githubusercontent.com/u/8261783?v=3","gravatar_id":"","url":"https://api.github.com/users/eric-schleicher","html_url":"https://github.com/eric-schleicher","followers_url":"https://api.github.com/users/eric-schleicher/followers","following_url":"https://api.github.com/users/eric-schleicher/following{/other_user}","gists_url":"https://api.github.com/users/eric-schleicher/gists{/gist_id}","starred_url":"https://api.github.com/users/eric-schleicher/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/eric-schleicher/subscriptions","organizations_url":"https://api.github.com/users/eric-schleicher/orgs","repos_url":"https://api.github.com/users/eric-schleicher/repos","events_url":"https://api.github.com/users/eric-schleicher/events{/privacy}","received_events_url":"https://api.github.com/users/eric-schleicher/received_events","type":"User","site_admin":false},"created_at":"2015-07-24T17:20:59Z","updated_at":"2015-07-24T17:20:59Z","body":"This has revealed itself to be problematic for our project as well.  We are working with SVG documents with absolute units and internal transforms in those unit systems (not pixels).  The pattern of just extracting the elements from the documents renders #nojoy.\r\n\r\nIt's unclear if anyone is working on this.  We can contribute if a basic solution can be described, we've not ventured under the hood of fabric thus far."}}