Export SVG with Style
Item logo image for Export SVG with Style

Export SVG with Style

Featured
3.2(

42 ratings

)
Item media 1 screenshot

Overview

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

3.2 out of 542 ratings

Google doesn't verify reviews. Learn more about results and reviews.

Review's profile picture

Y KMay 3, 2024

CSS Variables are ignored (not included in the exported files).

Review's profile picture

Sudev Suresh SreedeviJul 1, 2021

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.

5 out of 6 found this helpful
Review's profile picture

Michael WolzNov 4, 2019

Worked like expected :)

Details

  • Version
    1.23
  • Updated
    July 23, 2021
  • Offered by
    oroadfc
  • Size
    21.41KiB
  • Languages
    English (UK)
  • Developer
    Email
    oroadfc@googlemail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

Related

CSS Dig

2.9(51)

Collect and analyze CSS.

svg-grabber - get all the svg's from a site

4.1(94)

A tool to quickly preview and get all the svg assets from a website.

GitHub Inline SVG

5.0(3)

Shows an inline preview of SVG files on GitHub

SVG link viewer

1.5(6)

Show previews of all links to SVGs

SVG Export

4.4(192)

Download SVGs from websites as SVGs, PNGs or JPEGs

SVG Screenshot

3.5(4)

Create scalable screenshots.

SVG Gobbler

4.5(55)

Find, optimize, organize, edit, and export your SVGs

Canvas downloader. Find and export.

4.1(17)

Extension helps detect if canvas is used at the web page and allows to export and save canvas content.

SVG downloader

5.0(19)

download svg from any website

HTML to Figma - by Builder.io

4.3(46)

Import a web page to Figma layers

SVG Screenshot

4.4(25)

Take scalable, semantic, accessible screenshots, in SVG format.

Save SVG as PNG

2.6(58)

Save SVG images as PNG. Navigate to an .svg file, right click on it and click on the context menu item 'Save SVG as PNG.

CSS Dig

2.9(51)

Collect and analyze CSS.

svg-grabber - get all the svg's from a site

4.1(94)

A tool to quickly preview and get all the svg assets from a website.

GitHub Inline SVG

5.0(3)

Shows an inline preview of SVG files on GitHub

SVG link viewer

1.5(6)

Show previews of all links to SVGs

SVG Export

4.4(192)

Download SVGs from websites as SVGs, PNGs or JPEGs

SVG Screenshot

3.5(4)

Create scalable screenshots.

SVG Gobbler

4.5(55)

Find, optimize, organize, edit, and export your SVGs

Canvas downloader. Find and export.

4.1(17)

Extension helps detect if canvas is used at the web page and allows to export and save canvas content.

Google apps