extension ExtPose

Export SVG with Style

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)

Latest reviews

  • (2019-11-04) Michael Wolz: Worked like expected :)
  • (2019-08-26) simon: what is savedSVGExport0.svg
  • (2019-05-03) 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"
  • (2019-01-03) Mike Ramos: Cant select a PNG before downloading. have to download them all
  • (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.
  • (2018-05-09) 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.
  • (2018-04-11) patrick JP: I can only download the last svg element. like saved30 and no more.
  • (2018-01-22) Severin Neumann: I have looked for exactly this solution! Works perfectly!
  • (2017-12-24) Анатолий Кант: скачались все svg c сайта в один файл. Очень удобно
  • (2017-11-22) Mikhail Tolkonyuk: Работает, большое спасибо!
  • (2017-09-16) Lizao Li: Thanks~ It works very well.
  • (2017-08-19) pal nes: Did exactly what it says on the tin. Stellar effort!
  • (2017-03-28) Emanuel Saramago: It only exports some pages and just a few elements.
  • (2017-03-13) Vadim Osipov: сохранил с сайте все нужные мне SVG
  • (2017-02-15) Bernard de Jong: Doesn't work at all
  • (2017-01-06) Spe Chen: Works well! Thanks a lot!
  • (2016-11-07) Maoyin Sun: It works good!
  • (2016-11-05) Barry Parker: It works! I don't get the down votes.
  • (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.
  • (2016-08-24) 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.
  • (2016-04-18) Michael Ohff: It works as it should. Getting on a Website with SVG inbound, press the button and finish.

Latest issues

  • (2018-08-03, v:1.21) S.: Cannot click on extension after accidentally clicking "do not download multiple" on chrome
    How do you undo this setting on chrome? All I want to do is use your extension...
  • (2018-07-27, v:1.21) initial attempts with no result on URL as mentioned below
    I tried to use the "Export SVG with Style"-Extension for the first time today. My aim was to grab the LOGO from this URL https://www.wienfluss.net/ . I was unaware whether it was sufficient to just have the URL loaded in chrome (and of cause the respective tab in chrome opened) To start the process, OR if I would need to somewhat "mark" the respective svg beforehand (or after I clicked the extension-button)? So I started to try to use the extension, simply by clicking the Icon in the system - tray. I tried around for a little bit, but the extension-Button did not provide me with any helpful feedback whatsoever. Therefore, I felt I was left in the blind. The Idea of this extension is brilliant though: I would still love to be able to use this extension effectively. Currently hitting the little button the Extension offers no feedback whatsoever. The extension-button is located next to the chrome Adress-Bar and does not yield any feedback at all, the process therefore feels pretty "dead". Could the extension bring up a layer to let the user know what happend ? Let the user know Where , or why, the extension fails? Some Feedback might provide information that: "Unluckily it did not succeed this time, but it might work out next time on a different page, this is why:... ".
  • (2018-02-24, v:1.20) Kilian Evang: How to use it?
    I couldn't find any information on how this is supposed to be used. When I click the SVG button, nothing happens.
  • (2017-11-03, v:1.18) Richard King: Maintaining relative layout of multiple svgs
    If there are multiple svgs on a page is there a way to export them all together or otherwise maintain their relative positions to one another when opened in a graphics package?
  • (2017-07-31, v:1.18) muggy ate: Does not work for my page
    So i created a resume page for myself and it seems that the plugin works nicely the last time i had to update my resume but this time oddly enough, it seems to fail. I tried it on a few other web sites and it seems to be working just fine. the URL to my resume is https://resume.mugdev.com/ and when I click the button it doesn't do anything. I tried to look in the console for any potential errors but there doesn't seem to be any. It would be nice if I can get this working again as it seems to be the only thing that I can do to get my page printed in a reasonable way. Thanks!
  • (2017-07-18, v:1.17) Robert Kerr: Export fails in SVG w/ Animation
    In svgexp.js, in parentChain around line 121. elemData.class.split fails in some cases. In my case, it was because elemData.class is of type SVGAnimatedString instead of type object. I was able to fix locally by wrapping lines 121 - 132 with an if clause that checks the type of elemData.class like so: function parentChain (elem, styles) { // Capture id / classes of svg's parent chain. var ownerDoc = elem.ownerDocument || document; var elemArr = []; while (elem.parentNode !== ownerDoc && elem.parentNode !== null) { elem = elem.parentNode; elemArr.push ({id: elem.id, class: elem.className}); } // see if id or element class are referenced in any styles collected below the svg node // if not, null the id / class as they're not going to be relevant elemArr.forEach (function (elemData) { var presences = {id: false, class: false}; if(typeof(elemData.class) == "string") { var classes = elemData.class.split(" ").filter(function(a) { return a.length > 0; }); // v1.13: may be multiple classes in a containing class attribute styles.forEach (function (style) { for (var c = 0; c < classes.length; c++) { if (style.indexOf ("."+classes[c]) >= 0) { presences.class = true; break; // no need to keep looking through rest of classtypes if one is needed } } if (elemData.id && style.indexOf ("#"+elemData.id) >= 0) { presences.id = true; } }); }; Object.keys(presences).forEach (function (presence) { if (!presences[presence]) { elemData[presence] = undefined; } }); }); return elemArr; } This fix is probably sub optimal because it would miss styles on the elements causing the error. I figure you will know a better way.
  • (2017-06-21, v:1.17) Hal Armstrong: Trying to use local CSS and save SVG to local disk. Does nothing
    If I press the SVG button nothing happens. No error message. No log file. How to debug this issue. Is all processing done in the SVG Chrome extension or is it trying to contact a remote server somewhere. Great idea. I wish it did something. If I can help, let me know.
  • (2017-02-21, v:1.17) M Graham: Possible 'Doesn't Work' Fix
    IMPORTANT NOTE: If nothing happens, there's a high chance the extension has been denied cross-origin access to an IFrame the svg is in. This is a security restriction put in place by Chrome. Search for and install zboogs Open Frame extension - https://chrome.google.com/webstore/detail/open-frame/kdhjgkkaacdhdioocfbpmhjidbinfajj?hl=en Then you can right-click on the graphic and open it in a new browser tab and try the SVG export from there. It works in JSFiddle for one.
  • (2017-02-15, v:1.17) Bernard de Jong: Doesn't work
    Nothing happens when clicking the button.. No settings available either, so it's useless..
  • (2017-01-13, v:1.17) shikha aggarwal: Doesn't do anything
    It is not working.I am unable to download svg file

Statistics

Installs
5,965
Category
Rating
3.375 (40 votes)
Last update / version
2019-02-11 / 1.22
Listing languages

Links