Export SVG with Style icon

Export SVG with Style

by oroadfc

v1.23 Updated Jul 23, 2021 21.41KiB
CWS
5K
Users
★ 3.22
41 reviews
#10753
of 207.6K
workflow
#3100 of 31.9K
⚠️Not updated in over 2 years

Description

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
Export SVG with Style screenshot 1

Reviews (11 cached)

★☆☆☆☆2018-11-01
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)

★☆☆☆☆2018-08-02
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/

★☆☆☆☆2018-05-31
Jackson Antonio do Prado Lima

Doesn't work. I press the button and nothing!

★☆☆☆☆2018-05-25
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.

★☆☆☆☆2017-06-15
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.

★☆☆☆☆2017-02-15
Bernard de Jong

Doesn't work at all

★☆☆☆☆2016-10-27
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.

★☆☆☆☆2016-10-19
Nicanor Gonzalez

It just doesnt work, nothing else to say.

★★☆☆☆2019-01-03
Mike Ramos

Cant select a PNG before downloading. have to download them all

★★☆☆☆2017-03-28
Emanuel Saramago

It only exports some pages and just a few elements.

★★★☆☆2019-08-26
cooper wen

what is savedSVGExport0.svg

Details

Version 1.23
Updated Jul 23, 2021
Size 21.41KiB
First Seen Mar 31, 2026