If you are just starting to give SVG a try, and already have a beautiful drawing at hand, you may expect your SVG to show up exactly as it is in the editor, all sharp and crisp, unfortunately, that may not be the case once embedded on your website.
It's been tested on Firefox and should work on Chrome, but I wouldn't hold out much hope on other, older browsers.5 Most Common Problems Faced by SVG UsersĪs SVG adoption increases 100% year-over-year, front end developers and designers like yourself will increasingly be expected to use more and more SVG in websites, all around the world. If I've done this correctly, it will find all the Inkscape layers, get the label, replace any non-alphanumeric characters with underscores, then write the result to the ID.
Job done.įor the JavaScript minded, this is a bookmarklet consisting of the following line of code: document.querySelectorAll("g").forEach(el => el.id = el.getAttributeNS('', 'label').replace(/\W/g, '_')) Best to give it a slightly different name, to avoid overwriting your original, just in case. right-click and 'Save Page As.' or similar). It's best if you create it on your bookmarks toolbar and make sure that's visible: javascript:(function()%7Bdocument.querySelectorAll(%22g%5B*%7Cgroupmode%3D'layer'%5D%22).forEach(el%20%3D%3E%20el.id%20%3D%20el.getAttributeNS('http%3A%2F%2FThen open your Inkscape file in the browser, click the bookmark, and save the file from the browser again (e.g. Nevertheless, I've had a go at a solution that should work in most cases, but it's only been slightly tested so I offer no guarantees! Create a new bookmark in your browser, with the following as the location (all on one line). There's a problem with having a generic solution to do this, in that labels can contain characters that aren't allowed in IDs.
0 kommentar(er)
