iros / patternfills

A collection of svg patterns and build scripts that allow utilizing them in svg, css and d3.

Home Page:http://iros.github.io/patternfills/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

base64 encoding and inkscape svg

Thell opened this issue · comments

Interesting project! I found patternfills after doing a bunch of searching for the wikipedia chart module svg patterns for use with vega.

There is a problem though... svg rendering and then using inkscape to convert to eps and pdf fails! The svg patterns provided via the patternfills svg page do not work. After removing the 'image' tag and the base64 encoded data and replacing with the much shorter, modifiable, easier to read plain text the conversions worked. The base64 worked fine in every basic viewer and browser I checked with while debugging, but failed in all of the editors I tried for converting.

Thinking I could install the patternfills binary and generate the patterns locally I followed the directions on the front page and get a d3 error. Before trying to debug the binary issue...

Can the patterns be generated without base64 encoding? Can the public facing svg page display the actual pattern defs instead of unreadable base64?

Here's a sample of testing the output with ggvis (which is on top of vega which is on top of d3) ... rstudio/ggvis#424 (comment) with details at http://rpubs.com/Thell/patternfill

I'm following along with interest...

So all the patterns are available as SVG files in this directory: https://github.com/iros/patternfills/tree/master/src/patterns

You can just open them in inkscape since it supports svgs.
Is that not sufficient?

There are variables in a lot of them, so I could add support for just generating the svg files with the appropriate colors, if that's what you're looking for.

What I ended up doing, for testing, was taking the making the patterns like

    <pattern id="circles-1" patternUnits="userSpaceOnUse"
      x="0" y="0" width="10" height="10" >
        <rect width='10' height='10' fill="white" />
        <circle cx="1" cy="1" r="1" fill="black"/>
    </pattern>

from the details in src/pattern files. This is working and inkscape is able to convert an svg with this embedded. I just thought you might want to know that for the mildly curious base64 is really of no value and is actually a hinderance; as I found out. If the text on the pattern page was human consumable it might entice more people to dig in a bit more and see the code.

As for having the app generate plain text (xml) with color definitions, it would be nice; but honestly, I couldn't get the app to work to generate either the css or svg and since it was just going to generate encoded data anyhow I didn't investigate that side of things.

Perhaps two individual files, one for css and one for svg, in the source tree like patterns.css, but not encoded is doable?

@iros ,

The reason I was getting an error message was directly related to a change in d3 and the fix was (as stated in that thread) to use jsdom. I made the change in pattern_builder.js and the app works as expected.

I'll take a look at modifying the app and report back.

Thanks for your pull req. I added an issue to disable base64 encoding #13. I'll have it on by default, but we can definitely have a way to toggle that.