{"action":"created","issue":{"url":"https://api.github.com/repos/cytoscape/cytoscape.js/issues/639","labels_url":"https://api.github.com/repos/cytoscape/cytoscape.js/issues/639/labels{/name}","comments_url":"https://api.github.com/repos/cytoscape/cytoscape.js/issues/639/comments","events_url":"https://api.github.com/repos/cytoscape/cytoscape.js/issues/639/events","html_url":"https://github.com/cytoscape/cytoscape.js/issues/639","id":37092847,"number":639,"title":"Export to SVG / SVG rendering output","user":{"login":"acardona","id":50458,"avatar_url":"https://avatars.githubusercontent.com/u/50458?v=3","gravatar_id":"","url":"https://api.github.com/users/acardona","html_url":"https://github.com/acardona","followers_url":"https://api.github.com/users/acardona/followers","following_url":"https://api.github.com/users/acardona/following{/other_user}","gists_url":"https://api.github.com/users/acardona/gists{/gist_id}","starred_url":"https://api.github.com/users/acardona/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/acardona/subscriptions","organizations_url":"https://api.github.com/users/acardona/orgs","repos_url":"https://api.github.com/users/acardona/repos","events_url":"https://api.github.com/users/acardona/events{/privacy}","received_events_url":"https://api.github.com/users/acardona/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/cytoscape/cytoscape.js/labels/2-medium-priority","name":"2-medium-priority","color":"eb6420"},{"url":"https://api.github.com/repos/cytoscape/cytoscape.js/labels/enhancement","name":"enhancement","color":"c7def8"},{"url":"https://api.github.com/repos/cytoscape/cytoscape.js/labels/project-idea","name":"project-idea","color":"009800"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":15,"created_at":"2014-07-03T15:28:17Z","updated_at":"2015-07-18T21:04:48Z","closed_at":null,"body":"This project would entail additions to the Cytoscape.js renderer such that instead of HTML5 canvas being used to create a raster graphics representation of the graph, SVG output would be used.  This would allow for support for non-standards-compliant browsers (like old IE), and it would allow for SVG image exports of the graph.\r\n\r\nIn terms of implementation, this would be relatively straightforward.  It would require that the individual, lowlevel draw functions (i.e. `drawNode()`, `drawEdge()`) be updated such that they can output SVG in lieu of canvas.\r\n\r\nOriginal content follows:\r\n\r\n--\r\n\r\nWould be wonderful to be able to export to SVG, completing this fantastic library that is cytoscapejs. Is an export to SVG perhaps in the roadmap?"},"comment":{"url":"https://api.github.com/repos/cytoscape/cytoscape.js/issues/comments/122597027","html_url":"https://github.com/cytoscape/cytoscape.js/issues/639#issuecomment-122597027","issue_url":"https://api.github.com/repos/cytoscape/cytoscape.js/issues/639","id":122597027,"user":{"login":"tomka","id":112226,"avatar_url":"https://avatars.githubusercontent.com/u/112226?v=3","gravatar_id":"","url":"https://api.github.com/users/tomka","html_url":"https://github.com/tomka","followers_url":"https://api.github.com/users/tomka/followers","following_url":"https://api.github.com/users/tomka/following{/other_user}","gists_url":"https://api.github.com/users/tomka/gists{/gist_id}","starred_url":"https://api.github.com/users/tomka/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tomka/subscriptions","organizations_url":"https://api.github.com/users/tomka/orgs","repos_url":"https://api.github.com/users/tomka/repos","events_url":"https://api.github.com/users/tomka/events{/privacy}","received_events_url":"https://api.github.com/users/tomka/received_events","type":"User","site_admin":false},"created_at":"2015-07-18T21:04:48Z","updated_at":"2015-07-18T21:04:48Z","body":"Hi @miskar, the commit linked right before my last comment in this issue contains the changes needed to make it work (at least for us). You basically need to do the following:\r\n\r\n    // Create a new SVGKit SVG canvas of desired size, it will be used to render from Cytoscape.\r\n    var svg = new SVGCanvas(width, height);\r\n    \r\n    // Cytoscape uses Path2D if it is available. Unfortunately, SVGKit isn't able\r\n    // to make use of this as well and silently fails to draw paths. We therefore\r\n    // have to monkey-patch Cytoscape to not use Path2D by overriding its test.\r\n    // We reset to the original function after the graph has been rendered.\r\n    var CanvasRenderer = cytoscape('renderer', 'canvas');\r\n    var orignalUsePaths = CanvasRenderer.usePaths;\r\n    CanvasRenderer.usePaths = function() { return false; };\r\n\r\n    // Assuming your cytoscape instance is available as 'cy', render it to the SVG canvas\r\n    // created earlier.\r\n    cy.renderer().renderTo( svg, 1.0, {x: 0, y: 0}, 1.0 ); \r\n    \r\n    // Reset Path2D test of Cytoscape\r\n    CanvasRenderer.usePaths = orignalUsePaths;"}}