nytimes / svg-crowbar Goto Github PK

In Firefox 34 (which, other than this issue, works better for me than Chrome), the z-index order of the overlays is confused, such that the download buttons are all underneath the semi-transparent overlay. Once I change the z-index in the console, I can click the download buttons successfully. (For example, on the first div.svg-crowbar, set z-index to 99.)

It could be good to add a way so the downloaded file have a custom name, by example from an attribute title within of the <svg></svg> element, or with a var svg-crowbar-name = "New_York_2014_elections_(NYT).svg";. Then, D3js devs will add that to their code.

It would be nice if they're not overlapping to each other or we just have a download all feature, that scans the whole HTML and CSS pages and extracts them all. Even for other interaction events (e.g. this SVG will only show when in mouse hover) because sometimes it's still hard to get something when you have to time it to be mouse hovered or such interaction

try SVG Crowbar 2 here: http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html

Note: with crowbar v.1.

Crowbar create a <defs xmlns="http://www.w3.org/1999/xhtml"><style>...</style></defs> element such as :

<defs xmlns="http://www.w3.org/1999/xhtml"><style type="text/css"><![CDATA[
svg { border: 1px dashed rgb(173, 216, 230); padding: 1em; }]]></style></defs>

And returns the following error :

In my text editor, removing the xmlns="http://www.w3.org/1999/xhtml" from the <defs> produce a valid svg.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="test" 
    width="200" height="200" 
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <style type="text/css"><![CDATA[svg { border: 1px dashed rgb(173, 216, 230); padding: 1em; }]]></style>
</defs>
<g id="circles" style="fill:red;fill-opacity:.5;stroke:#CCC;stroke-width:2px;">
    <circle cx="186" cy="46" r="7"/>
    <circle cx="157" cy="34" r="6"/>
</g>
</svg>

When using crowbar with content generated by svg.js, the resulting file gives invalid XML.

Loading in chrome shows this error:
error on line 1 at column 182: Attribute xmlns redefined

This page has SVG examples which exhibit this error:
http://svgjs.com/test/

Thank you for the great bookmarklet!
Currently I run $$(".svg-crowbar").forEach(e => e.remove()) in the console, but it would be nice if there was a close button.

I'm having an issue with SVG crowbar starting in Chrome 64/65, for which I get the above error message in the console. For some reason, this is only broken for some svgs.

The line breaking is the second one here:

https://github.com/NYTimes/svg-crowbar/blob/f41f811dba84c6e522c5c213361e6fe65a0b8313/svg-crowbar.js#L223-L224

This might lead towards a fix

Hi, when I use either SVG Crowbar or SVG Crowbar2 on this graph (generated with d3.js):

I end up with this (line chart is clipped for some reason):

Any idea why? I sometimes see similar issues if I print the page to PDF, or I try to generate a PDF using PhantomJS, but I chalked that up to timing (thinking it was trying to render the image before the SVG had settled down through animations).

I was scratching my head about this all day.

Because SVG Crowbar2 doesn't inline computed styles that are also computed styles of the parent SVG element, it won't, for instance, inline the font-size property if it's the same as the page's base font.

In practice, this means you can't override the default D3 v4 default 10px axis label font-size if you're wanting them to be 16px.

A workaround (that might not work for everyone) is to add the following to your page styles:

svg {
  font-size: 0;
}

...Assuming you explicitly set the sizes on all fonts in your SVG graphics (which, if you're preparing them for print or to be opened in Adobe Illustrator, you probably do anyway).

Probably a better solution is to create a whitelist of properties that frequently need to be overridden, even if the parent SVG has them as a computed style — font-family, font-size and other properties explicitly set as attributes by d3-axis are probably good candidates for this.

Thanks for putting this together @shancarter et al!

I recently had a project where I wanted to have a button that downloaded an svg image as a png and, when combined with a few things from this blog post, I made it possible to download an svg with the click of a button (highlighted below):

I was thinking of contributing this back to the project so that others could easily download svg elements as a png with an interface that looks something like this:

<!-- index.html -->
<script src="//cdn.rawgit.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar-download.js"></script>
<script>
    var svg_el = document.getElementById("#my-svg");
    $("#my-button").click(function () {
        crowbar(svg_el, { // optional arguments
            filename: "awesome.png",
            width: 400,
            height: 400,
        });
    });
</script>

I would be happy to put together a pull request but, before I did, I thought I'd try and see if this is inline with the goals of this project or whether it would be better to just start a separate project that enables this functionality. Would you like this functionality to be baked into svg-crowbar or is your focus specifically on the bookmarklet?

Not really a bug on behalf of Crowbar, but I'm seeing really weird behavior when trying to export figures produced with Dc.js on Chrome.

For example, several figures on the example page are rendered so that only the axes, but not the main content, is visible on the figure when viewed in Chrome or Firefox. Inkscape, Ubuntu file viewer and other viewing tools are able to show the figures correctly.

There's probably some inline css that is interpreted differently on browsers than in Inkscape and others. When trying out Crowbar1, the figures show correctly in browser but obviously don't have the external css embedded.

Any ideas what inline css causes this phenomenon?

Try crowbar here - http://bl.ocks.org/mbostock/4061961

Once the popups are shown, they don't go away.

This is not really an issue, it's a feature request. I have portal.azure.com in mind. I want to get the SVG's so I can use them in my Visio diagrams. There are 781 SVG's found! So many that I can't move the Crowbar boxes out of each others' way so I can click the download button.

Currently, d3js generated SVG with linked images via :

svg.append("image")
  .attr("xlink:href", "file.jpg")
  .attr("width", width)
  .attr("height", height)
  .attr("class", "bg");

producing :

<image xlink:href="file.jpg" width="960" height="500" class="bg"></image>

, when dowloaded by v2.0, result into svg file with missing rasters.

The solution would be 1/ to convert file.jpg into a data URI string (var str) using JS. 2/ to replace

   <image xlink:href="file.jpg" ...

by

   <image href="data:image/png;base64,<dataURI>" ... 

3/ to repeat for each <image xlink:href= found.

The JS code to do 1. have been discussed here while 1 & 2 are in demo there (v/96/). The script successfully replace the href link by an href with valid and working data uri, so the image is really embedded within the svg. Then, crowbar naturally download both the SVG code and the (embedded) images :)

Note: as my stack appears to require server side base64 convertion and my d3js skills are limited, I will not push further in this way. But most of it is there, and it should be good to add to crowbar.

Note: I didn't tested if the data_uri type extension should really match the image's extension.

I noticed this while trying to crowbar the following SVGs:

http://bl.ocks.org/mbostock/raw/3795544/

The resulting SVG files svg elements appeared as:

<svg width="320" height="500" version="1.1">

However, the desired result includes xmlns and xmlns:xlink attributes:

<svg width="320" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Without these attributes, the SVG will not display properly.

If there are multiple SVG documents on a page, and one contains a node that can be used as a fill in CSS, the scripts does not pull that into the output.

For example, consider this example, which uses D3 to load a shapefile and create a world map. CSS and a SVG element in the page HTML are applied to style the dynamically created SVG element.

http://becausedata.com/tmp/svg-crowbar/radial-gradiant/

<style type="text/css">
.map {
        fill: url(#g489);
        stroke:#ddd;
        stroke-width:1px;
    }
</style>

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"  preserveAspectRatio="none">
    <radialGradient id="g489" gradientUnits="objectBoundingBox" cx="50%" cy="50%" r="50%">
        <stop stop-color="#999" offset="10%"/>
        <stop stop-color="#666" offset="95%"/>
    </radialGradient>
</svg>

The browser will apply the radialGradient directly, but it will not be merged into the downloaded SVG document (unsurprisingly).

The easiest workaround is to include the contents of the second SVG element inside the dynamically created one, e.g. via .appendChild() after load. In general, this works pretty well, but it does require an extra step.

When I use SVG Crowbar 2 to try and view the SVG, it injects style into all of the g elements, causing all of the color to disappear.

Before:

After:

And here's what my code produces in-browser vs what SVG Crowbar creates:

It would be great to have a "module" version, something that can be called:

downloadSVG(element)

This could be triggered by a custom button, that I would put myself statically in my page. When clicking that button, the function would be called to download the svg.

Thanks for your great product !!!

I used svg-crowbar with a Firefox version 30.0 (Lubuntu) and it worked with my example. But the project page says "It only works in Chrome."

I am sure you already know this issue:

[blocked] The page at 'https://*' was loaded over HTTPS, but ran insecure content from 'http://d3js.org/d3.v3.min.js': this content should also be loaded over HTTPS.

Since upgrading to Chrome 69, I seem to not be able to install the bookmarklet anymore. I've tried dragging it to the bookmark bar and adding it through the menus, but neither seems to work..

Per https://github.com/blog/1482-, GitHub is adding a header to prevent some browsers from executing scripts that are loaded from raw.github.com. As the bookmarklet dynamically loads the script from raw.github.com, the script fails to execute in those browsers. (For me, Chrome 36 is refusing to execute; while Firefox 34 Nightly runs it anyway.)