{"action":"created","issue":{"url":"https://api.github.com/repos/jamesmartin/inline_svg/issues/27","labels_url":"https://api.github.com/repos/jamesmartin/inline_svg/issues/27/labels{/name}","comments_url":"https://api.github.com/repos/jamesmartin/inline_svg/issues/27/comments","events_url":"https://api.github.com/repos/jamesmartin/inline_svg/issues/27/events","html_url":"https://github.com/jamesmartin/inline_svg/issues/27","id":127306725,"number":27,"title":"Problems with multiple SVG inlined on same page due to embedded style tags","user":{"login":"coneybeare","id":35369,"avatar_url":"https://avatars.githubusercontent.com/u/35369?v=3","gravatar_id":"","url":"https://api.github.com/users/coneybeare","html_url":"https://github.com/coneybeare","followers_url":"https://api.github.com/users/coneybeare/followers","following_url":"https://api.github.com/users/coneybeare/following{/other_user}","gists_url":"https://api.github.com/users/coneybeare/gists{/gist_id}","starred_url":"https://api.github.com/users/coneybeare/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/coneybeare/subscriptions","organizations_url":"https://api.github.com/users/coneybeare/orgs","repos_url":"https://api.github.com/users/coneybeare/repos","events_url":"https://api.github.com/users/coneybeare/events{/privacy}","received_events_url":"https://api.github.com/users/coneybeare/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2016-01-18T20:39:43Z","updated_at":"2016-01-24T00:22:04Z","closed_at":null,"body":"I have come across a bug which is not entirely `inline_svg`s fault, but needs to be handled in the gem.\r\n\r\nWhen you have two embedded svgs on the same page, the `style` tags that are contained in each svg can conflict... often because the same designed used the same layer names or styles in the original document. There are not namespaces per document inlined svg, and no natural separation as when letting the browser load from file,  so when embedding multiple files in the page, the style tag of the second svg tag will effect the first.\r\n\r\nFor example, here are two style tags which are both valid in their own documents, but make a problem when embedded on the same page\r\n\r\n````\r\n<style type=\"text/css\">.st0{fill:#F6B62E;} .st1{display:none;fill:#181818;} .st2{fill:#181818;}</style>\r\n<style type=\"text/css\">.st0{fill:#181818;} .st1{fill:#F6B62E;}</style>\r\n````\r\n\r\n[Here](https://github.com/jamesmartin/inline_svg/files/94954/inline_svg_bug.zip) is a sample project showing the issue.\r\n\r\nPossible solution approaches:\r\n\r\n1. Rewrite the style tag when embedding to use the HTML5 [scoped attribute](http://www.w3.org/TR/html-markup/style.html#style.attrs.scoped): `style scoped='true'...`\r\n2. Rewrite the style tag to prepend a class that has a unique id, one you also assign to the containing .svg: `.deadbeef. st0{...` \r\n3. Replace all classes and ids in the svgs with a string that prepends them with a certain unique val: : `.deadbeef_st0{...` and `path class=`.deadbeef_st0`\r\n\r\nUnfortunately, 1 seems to be a dead end due to [lack of browser support](http://caniuse.com/#search=scoped). 3 seems safest, but requires more editing of the file, and more text insertion.\r\n\r\n2 seems like a good balance, only adding a unique val in a few places: the svg's class tag, and the prepended in the individual styles within the style tag. The `path` and `g` elements would not need manipulation.\r\n\r\n\r\nThoughts?"},"comment":{"url":"https://api.github.com/repos/jamesmartin/inline_svg/issues/comments/174238131","html_url":"https://github.com/jamesmartin/inline_svg/issues/27#issuecomment-174238131","issue_url":"https://api.github.com/repos/jamesmartin/inline_svg/issues/27","id":174238131,"user":{"login":"jamesmartin","id":75904,"avatar_url":"https://avatars.githubusercontent.com/u/75904?v=3","gravatar_id":"","url":"https://api.github.com/users/jamesmartin","html_url":"https://github.com/jamesmartin","followers_url":"https://api.github.com/users/jamesmartin/followers","following_url":"https://api.github.com/users/jamesmartin/following{/other_user}","gists_url":"https://api.github.com/users/jamesmartin/gists{/gist_id}","starred_url":"https://api.github.com/users/jamesmartin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jamesmartin/subscriptions","organizations_url":"https://api.github.com/users/jamesmartin/orgs","repos_url":"https://api.github.com/users/jamesmartin/repos","events_url":"https://api.github.com/users/jamesmartin/events{/privacy}","received_events_url":"https://api.github.com/users/jamesmartin/received_events","type":"User","site_admin":true},"created_at":"2016-01-24T00:22:04Z","updated_at":"2016-01-24T00:22:04Z","body":"@coneybeare, thanks for the detailed description of this issue and the proposed options :+1: \r\n\r\nI'm reluctant to add this behavior to the gem for a number of reasons:\r\n\r\n* I'm keen to make the core functionality of the gem simple (handle fewer special cases)\r\n* If we choose one of a possible three solutions, it's entirely likely that people will request support for the other two\r\n* It's possible to extend the document transformation pipeline and achieve any one of your suggested solutions by writing a [custom transformation](https://github.com/jamesmartin/inline_svg#custom-transformations)\r\n\r\nAs a less automated workaround, one could completely remove the `<style>` tags from an SVG document and supply an external stylesheet to target and style each document's classes separately.\r\n\r\nWhat do you think?\r\n\r\nIf you need help writing a custom transformation, let me know and I'll come up with an example to get you started.\r\n\r\n\r\n"}}