Export SVG with Style icon

Export SVG with Style

Extension Actions

CRX ID
dkjdcaddoplepioppogpckelchefhddi
Status
  • Extension status: Featured
  • Live on Store
Description from extension meta

Adds a SVG export button to the browser, which spits out SVG DOM elements present on page as files including CSS.

Image from store
Export SVG with Style
Description from store

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.