Export SVG with Style

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

Export SVG with Style - Chrome Extension for SVG Export with CSS

'Export SVG with Style' is a Chrome extension aiding the export of SVG DOM elements, even those within same-origin IFrames as files. It adds CSS classes to these SVGs as standalone style elements, making the created SVG file independent of external CSS classes. This is particularly useful for visualizations created with D3. It introduces various mechanisms to handle and eliminate errors, also including the ability to extract svg elements within iframes and images within SVGs.

Download

Extension stats

By: oroadfc

Users: 5,000+

Rating: 3.19

(42)

Version: 1.23 (Last updated: 2021-07-23)

Creation date: 2019-02-11

Risk impact: Low risk impact

Risk likelihood:

Very low risk likelihood

Manifest version: 3

Size: 21.92K

Email: or*****@googlemail.com

Ranking

# 14,265 ▲ 107

Other rankings

#880 in Workflow & Planning ▲ 6

#34 in export keyword 29 ▲ 5

#38 in style keyword 22 ▲ 8

#75 in iframe keyword 11 ▲ 8

#105 in cause keyword 21 ▲ 1

Upgrade to see more rankings

Other platforms

Not available on Android

Not available on Firefox

Not available on Edge

Want to check extension ranking and stats more quickly for other Chrome extensions? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Chrome Web Store.

Extension summary

Analyze keywords

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.

User reviews

These summaries are automatically generated weekly using AI based on recent user reviews. Chrome Web Store does not verify user reviews, so some user reviews may be inaccurate, spammy, or outdated.

Pros

Works well for some users
Convenient for downloading all SVGs from a site into one file
Some users found it useful for specific tasks

Cons

Many users report that it doesn't work at all
CSS variables are ignored in exported files
File naming is inconsistent and uses default names instead of original SVG names
Downloads individual SVG elements instead of a single combined SVG

Most mentioned