Refine creation process

[ackerdev]

AKA "Free as in Freedom" the shit out of the shield creation process.

To both remove the need for proprietary tools like Photoshop and Illustrator, and to automate the creation of new badges, we should do the following:

• Create new, clean template SVG
  Remove illustrator noise, use semantic class names for easy node manipulation. Make note of gradients for automation in the generator script.
• Create a generator script to parse and edit the SVGs, and spit them out as PNGs
  Nokogiri to parse SVG XML. Make it easy to define the required badges that will be generated. See https://github.com/olivierlacan/shields/issues/15#issuecomment-13878052 for a guide to convert the SVGs to PNGs using imagemagick
• Create a rake script to install font & deps via homebrew

[ackerdev]

Commit 8010dc9 adds my hand-made SVG template. Includes definitions for all our gradients, as well.

Generating script should need to do the following:

• Replace the content of the text node in g#vendor and g#status
• Change the fill attribute of rect and path nodes in g#status to the matching gradient definition
• Edit width and x-values for the path and rect in each group

That last one's a bit of doozy when talking about fitting the shapes to the text, and we'll have to find a way to determine how much space the text will take up...

/cc @olivierlacan

[olivierlacan]

I've been slacking good sir. Can we pair on the script using ScreenHero this week end or on Friday afternoon?

[ackerdev]

No worries, I've been a bit distracted too. Sure, you know where to get a hold of me, so just let me know when you've got the time and we'll work something out.

[mgedmin]

This project excited me enough that I spent this morning writing a small script that generates badges dynamically:

It's written in Python and requires Cairo and lxml. Try it out:

$ sudo apt-get install python-cairosvg python-lxml # for Ubuntu
$ git clone -b python-badge-server https://github.com/mgedmin/shields
$ cd shields
$ mkdir -p ~/.local/share/fonts && cp font/Open_Sans/*.ttf ~/.local/share/fonts/
$ ./badgeserver.py
Listening on http://localhost:8000/

[mgedmin]

You can see in my screenshot that the text drop shadow is missing. That's because CairoSVG doesn't support filters, and it's not likely to be ever supported.

[olivierlacan]

@mgedmin This is awesome, thanks so much for making it. 😸

With the limitations you mentioned we might not be able to use it for our purposes but it's a fantastic proof of concept.

Is it me or does the font look different too? Different rendering option?

[ackerdev]

Could just be Cairo's SVG rendering. Could also be a side effect of the filters (even though Cairo doesn't render them, it could still be making the text look thin like that). Like I mentioned the other day if that becomes a problem we could just fall back to using 2 text nodes instead of the filter.

The interesting part there is the determining of the width the paths need to be, which looks like he's doing it by having Cairo render the desired text into an empty image and returning the width from that. I think we can do that with IMagick too, though I'm not super familiar with it.

[mgedmin]

The font rendering noticeably differs when I switch between PNG and SVG options, but I'm not sure why. Different hinting options? Different layout engine? I see that CairoSVG uses the "toy" text_path API instead of integrating Pango properly.

I currently determine the text width by using Cairo's text_extents. It exactly matches CairoSVG's rendering, but fails to match native browser SVG rendering in some cases, which results in the text being cut off:

Meanwhile Inkscape renders the same SVG file as

and here's CairoSVG's rendering for reference:

I'll try ImageMagick next.

[mgedmin]

ImageMagick gives me this:

which is somewhat disappointing. But at least the text width matches my calculations!

I haven't done the dance with type.xml generation because I assume convert will find the font in ~/.local/share/fonts. I verified that assumption by hand-editing the SVG and replacing font-family="Open Sans" with font-family="Nosuchfont Sans", and seeing that the output looked different:

$ convert -version
Version: ImageMagick 6.7.7-10 2012-08-17 Q16 http://www.imagemagick.org
Copyright: Copyright (C) 1999-2012 ImageMagick Studio LLC
Features: OpenMP    

$ identify -list format
   Format  Module    Mode  Description
-------------------------------------------------------------------------------
...
     MSVG  SVG       rw+   ImageMagick's own SVG internal renderer
...
      SVG  SVG       rw+   Scalable Vector Graphics (RSVG 2.36.1)
     SVGZ  SVG       rw+   Compressed Scalable Vector Graphics (RSVG 2.36.1)
...

[mgedmin]

ImageMagick's native SVG support (convert msvg:image.svg magick-msvg.png) produces nicer text but mangles the gradients:

and I just noticed that ImageMagick gives me a white background instead of a transparent one.

[JeanMertz]

@mgedmin very nice tool. Another option might be to "render @2x image" for retina support. It simply means making the image twice as high and wide.

[ackerdev]

@mgedmin Take a look @ https://github.com/olivierlacan/shields/issues/15. afeld managed to create a pretty near-perfect replica using ImageMagick, with its default SVG renderer.

The template SVG I made was changed from the one he used there, so if you follow that perfectly and it still breaks then it probably has to do with the things I've changed in the new SVG. Could be that ImageMagick doesn't support the text shadow filters and causes mass breakage? Not sure why else the gradient could be broken, it worked with afeld's method, and I can see it at least recognizes the defs element so it should be rendering them correctly.

Also, I know ImageMagick does support transparent backgrounds, though I don't know off hand how you'd make it do so.

[mgedmin]

I looked at #15, and even referred to it obliquely (by mentioning the steps I skipped) in my ImageMagick comment. I don't know why I got different results -- perhaps my ImageMagick is too old? I had 6.7.7, @afeld had 6.8.0.

[afeld]

I can try again with the new SVG this weekend, if that would help.

[kookster]

This is awesome. I need to make 100+ badges, and was futzing about with imagemagick text annotations on base image files, but the svg method is much more elegant.

Is the template the start of the art at the moment? How can I help or use the latest and greatest generation technique (the @afeld process from #15 seems to be the way, but with the updated template from @ackerdev - true?)

[afeld]

I'm still dedicated to doing a script and/or service to do this. Will try to work on it tonight.

[kookster]

ok - I'll focus on other things, but if I can help at all, at least testing, let me know.

[ackerdev]

We're (slowly) working on creating a gem to completely automate this process (#27).

@kookster I'm not quite completely sure whether the new template svg will work 100% properly–I changed some things from the Illustrator SVGs that made more sense, but could cause it to render strangely in some cases, and I haven't had a chance to test that out yet. I would suggest testing it out on one first. Also be sure to move & resize the background to fit the text width.

Sorry, shields is in a bit of a transitional state and it's hard to get up and running to create your own badge set right now... If you want, I can help you out with generating your badges and making sure that they are up to spec.

[kookster]

you guys are great, no apologies pls. I'll try the svg stuff, invest some more of my own time, and we'll have a friendly race; either I'll figure it out, or you and @afeld will finish the gem ;)

[chadwhitacre]

How does this ticket relate to #15?

[ackerdev]

@whit537 pretty much focused on solidifying the conversion process rather than launching a SaaS. #15 was on the backburner at the time this was made.

[ackerdev]

Most of this discussion has moved over to #15.