Export SVG with Style
Extension Actions
- Extension status: Featured
- Live on Store
Adds a SVG export button to the browser, which spits out SVG DOM elements present on page as files including CSS.
Exports any SVG DOM elements (now including those within same-origin IFrames) on a web page to files for further use in drawing packages such as Inkscape.
Scans through CSS classes for styles the SVG and their child elements uses and adds them as standalone style elements to the SVG object, so the generated SVG file doesn't depend on external CSS classes. Good for passing out visualisations generated with D3.
----
Uses Eli Grey's fileSaver routine: https://github.com/eligrey/FileSaver.js/
1.1: Now adds dummy svg node which holds computed style of svg element's parent node. Irons out a few discrepancies.
1.11: Dummy svg node now holds computed style of actual svg element, solves couple of further bugs.
1.12: Catches errors caused by invalid style rules rather than crashes
1.13: Couple more errors to do with parent style recognition ironed out.
1.14: Can now also pull out svg elements within IFrames.
1.15: Bugfix when css styles not present - xinczhang
1.16: Bugfix when IFrame is inaccessible (caused crash)
1.17: Bugfix where styles applied to svg element itself weren't being picked up
1.18: Bugfix where class being an SVGAnimatedString caused a crash. Thanks to Robert Kerr for spotting this.
1.19: Thanks to Severin Neumann for adding the ability to include images embedded in SVG.
1.20: Catch stylesheet access exception error
1.22: Add alert popup to say what svgExport has found. Save svg's with slightly useful filenames (svg element's id and class)
1.23 Update to manifest v3, remove some unneeded permissions
Latest reviews
- Y K
- CSS Variables are ignored (not included in the exported files).
- Dmitry Monarev
- Не работает
- Gus Alizade
- плагин не работает. непонятно зачем он нужен
- Sudev Suresh Sreedevi
- Doesn't seem to do anything at all when clicked. Tried exporting SVG in an HTML page I created and there was no response. Tried to do the same on this very page (this comment page) to export svg icons here (the settings icon, for eg, is SVG) and did nothing.
- Sudev Suresh Sreedevi
- Doesn't seem to do anything at all when clicked. Tried exporting SVG in an HTML page I created and there was no response. Tried to do the same on this very page (this comment page) to export svg icons here (the settings icon, for eg, is SVG) and did nothing.
- Michael Wolz
- Worked like expected :)
- Michael Wolz
- Worked like expected :)
- simon
- what is savedSVGExport0.svg
- simon
- what is savedSVGExport0.svg
- Mensch Peter
- Note: If you have already a webpage with svg files open, you have to reload it after the installation of this extension to get it work. Works very well but could be improved, if the downloaded files do not have numbers in their file names, but the names of the svg images (if it is possible to get them). Instead of "savedSVGExport0.svg" it would be better "savedSVGExportWarning.svg" etc. or simply "warning.svg"
- Mensch Peter
- Note: If you have already a webpage with svg files open, you have to reload it after the installation of this extension to get it work. Works very well but could be improved, if the downloaded files do not have numbers in their file names, but the names of the svg images (if it is possible to get them). Instead of "savedSVGExport0.svg" it would be better "savedSVGExportWarning.svg" etc. or simply "warning.svg"
- Mike Ramos
- Cant select a PNG before downloading. have to download them all
- Mike Ramos
- Cant select a PNG before downloading. have to download them all
- Maria Kononova
- Didn't work for me as expected. Instead of creating one SVG of the whole page it downloads every single element of the page as as individual SVG file, each raising a separate download dialog. Those 50 download dialogs appear non-stop one after another - makes it impossible to close the browser tab until they're over. Tested on pinterest.com (logged in)
- Maria Kononova
- Didn't work for me as expected. Instead of creating one SVG of the whole page it downloads every single element of the page as as individual SVG file, each raising a separate download dialog. Those 50 download dialogs appear non-stop one after another - makes it impossible to close the browser tab until they're over. Tested on pinterest.com (logged in)
- Arihan Jalan
- It doesn't do anything. I'm trying to export .svg files loaded in here (click on an element to render svg variants on the canvas). http://emblemsbf.com/komod/
- Arihan Jalan
- It doesn't do anything. I'm trying to export .svg files loaded in here (click on an element to render svg variants on the canvas). http://emblemsbf.com/komod/
- Jackson Antonio do Prado Lima
- Doesn't work. I press the button and nothing!
- Jackson Antonio do Prado Lima
- Doesn't work. I press the button and nothing!
- Jonathan Hedstrom
- Pressing the button doesn't do anything. Using this on Chrome 66.0.3359.170 running on linux Ubuntu 18.04. Was hoping to use this plugin to help me export Google Sheets graphs in vector format.
- Jonathan Hedstrom
- Pressing the button doesn't do anything. Using this on Chrome 66.0.3359.170 running on linux Ubuntu 18.04. Was hoping to use this plugin to help me export Google Sheets graphs in vector format.
- Hal Armstrong
- Tried on 64-bit Chrome on Windows 7 and 32-bit Chrome on Ubuntu Linux. Pressing the button does absolutely nothing. No download. No error message. Vaporware as far as I'm concerned. Great idea. Let me know when it does something. I tried the python 1-liner webserver stunt. No error message and no download. python -m SimpleHTTPServer 1234 http://localhost:1234/sample.html SVG image renders fine. Won't download.
- Hal Armstrong
- Tried on 64-bit Chrome on Windows 7 and 32-bit Chrome on Ubuntu Linux. Pressing the button does absolutely nothing. No download. No error message. Vaporware as far as I'm concerned. Great idea. Let me know when it does something. I tried the python 1-liner webserver stunt. No error message and no download. python -m SimpleHTTPServer 1234 http://localhost:1234/sample.html SVG image renders fine. Won't download.
- Patrick JP
- I can only download the last svg element. like saved30 and no more.
- Patrick JP
- I can only download the last svg element. like saved30 and no more.
- Severin Neumann
- I have looked for exactly this solution! Works perfectly!
- Анатолий Кант
- скачались все svg c сайта в один файл. Очень удобно
- Mikhail Tolkonyuk
- Работает, большое спасибо!
- Lizao Li
- Thanks~ It works very well.
- Lizao Li
- Thanks~ It works very well.
- Pål Nes
- Did exactly what it says on the tin. Stellar effort!
- Pål Nes
- Did exactly what it says on the tin. Stellar effort!
- Emanuel Saramago
- It only exports some pages and just a few elements.
- Emanuel Saramago
- It only exports some pages and just a few elements.
- Vadim Osipov
- сохранил с сайте все нужные мне SVG
- Bernard de Jong
- Doesn't work at all
- Bernard de Jong
- Doesn't work at all
- Spe Chen
- Works well! Thanks a lot!
- Spe Chen
- Works well! Thanks a lot!
- Maoyin Sun
- It works good!
- Maoyin Sun
- It works good!
- Barry Parker
- It works! I don't get the down votes.
- Barry Parker
- It works! I don't get the down votes.
- karan vohra
- I am trying to use it on http://www.ctera.com/technology/platform/ it doesn't do a thing, no dialog, nothing in downloads. Clicking the icon does nothing.
- karan vohra
- I am trying to use it on http://www.ctera.com/technology/platform/ it doesn't do a thing, no dialog, nothing in downloads. Clicking the icon does nothing.
- Nicanor Gonzalez
- It just doesnt work, nothing else to say.
- Nicanor Gonzalez
- It just doesnt work, nothing else to say.
- Mark Littlefield
- It just works, which is exactly what you'd hope for with a tool that is entirely designed to simply extract an SVG.
- Mark Littlefield
- It just works, which is exactly what you'd hope for with a tool that is entirely designed to simply extract an SVG.
- Michael Ohff
- It works as it should. Getting on a Website with SVG inbound, press the button and finish.