I’ve looked around the set of repos at graphviz · GitLab and so far come up empty-handed, so I’m wondering: Are source files available for the Graphviz app.png logo(s)? (I’ve found at least two versions, coming back to that in a second…)
Specific reason I’m asking: I noticed that the logo banner here at the forum is a non-transparent image, and it looks pretty bad in the dark theme:
It’s possible to “transparent-ize” PNG files with a background, but the results are usually less-than-perfect. It’s especially hard to do when the image uses things like gradient drop-shadows, as the app.png logo does.
I found a different version of the icon in the old-static-website repo, which I personally feel looks a lot better (it doesn’t have that green nonsense on it), and which initially seemed promising because it actually does have a transparent background.
But, turns out the transparency there is an illusion, it was clearly an after-the-fact background erase that looks OK against light backgrounds, but will look like hot garbage against a dark background:
Long and short, the easiest thing would be to just use a vector source file to create a transparent version of the logo. But that’s assuming such a vector source exists somewhere. Or even a Photoshop/etc. bitmap source file with separated layers.
Icons in this style were first created by Glen Low for the MacOS front end to Graphviz. I think some of the source files like Graphviz.ai (for Adobe Illustrator) are still found in macosx · main · graphviz / graphviz · GitLab
There are some variants of this icon seen in the wild, but I don’t believe anyone in our project designed them.
Ah, excellent, thank you! So, here’s what I found there.
There is indeed an Adobe Illustrator file (Graphviz.ai), which after conversion by Adobe’s online AI → PDF converter tool became a Graphviz.pdf that’s openable in Inkscape.
It appears to contain the building blocks of the icon, in a somewhat unfinished state. Both of the layers are there (the primary layer, and the underlying one “revealed” by the magnifying glass), but the actual magnifying glass itself and the effect of combining the two layers is not executed. (Also, I’m getting a bad font substitution for whatever font the blue letters should be rendered in.)
There’s also a Graphviz.psd (Photoshop) file, which does contain the fully-executed icon, on a transparent background, at 512×512 pixels which is four times the size (16 times the surface area) of the 128×128 versions I’ve seen so far:
So, just exporting that bitmap file to PNG should provide a transparent version of the icon that’s far higher-resolution than most of what’s in use now (I won’t cry that it sacrifices the green “stuff” above the magnifying glass), and maybe that’s sufficient even though a fully-completed vector version doesn’t seem to be present in a ready-to-go state.
(There’s also a second Illustrator file, Graph.ai, which is something completely different:)
Hmm. Looking at Graphviz.psd more, I’m beginning to suspect that there’s no “pure-vector” version of the final logo, because it was executed entirely in Photoshop. Possibly because the magnifying glass is a bitmap image. I can believe Illustrator would’ve been… “reluctant” to do that properly.
The .psd file contains two layers for bitmap-rendered versions of the two sheets in the vector file, which it combines using a mask to create the magnifying-glass effect. Then the magnifying glass itself is inserted on top in another layer. (Well, like 3 layers, when you include the shadow effects and whatnot.)
That particular combination was made by me. I could easily change the “Graphviz” text to be on a transparent background. I agree the green “stuff” looks bad. I’ve never used Photoshop or Illustrator or anything similar and have no intention to learn. But if you can provide the nicer logo on a transparent background, I can try to combine them and update the forum logo. Or, even better, you give me a ready-made logo that I can use .
Ooh, thanks for poking this, I’d completely forgotten about it.
Where I last left off (and hadn’t yet updated this thread yet) was that I’ve actually found an extremely close match to the magnifying-glass image used in the logo, but as an SVG file:
That file lives at WikiMedia Commons, no less, licensed under Creative Commons CC0-1.0 (public domain dedication) terms that would make it available for use in the Graphviz logo imagery.
So it’s just a matter of me finding the time to combine the elements in Graphviz.ai with extracted elements of Commons’ File:Magnifying glass icon mgx2.svg (losing the drop shadow and lens shading, basically), and turn them into a vector version of the logo.
Ohh-kay. So it’s taken me over 2 years, but I finally have at least a first draft of the mostly-recreated, 100% bitmap-free, entirely-vector-based version of the logo.
A few things are undeniably changed. The goal was never to create something 100% identical to the bitmap version. For starters, this vector logo is made with the assets I had available to me, which means a different magnifying glass (as noted above), and different fonts for the text pieces.
I have an Inkscape SVG of the logo with the text as fonts. The blue “formula” text uses a font called Kalam, which is available from Google Fonts. If that’s not installed, the text won’t look right. (The numbers are Helvetica, so that’s easily obtained or substituted.) Since a drawing with fonts that need matching or replacing won’t work well for an icon, I also exported a version with all of the text converted to paths:
Hm. Still messing up the magnifying glass handle. That was copy-pasted right from the original SVG I linked to above, and uses some complicated gradient tricks. Let me see if I can debug where it’s breaking the SVG renderer here, since that’ll likely happen in other places where it’s used, too. (Looks fine in Inkscape, but that’s hardly the point.)
Maybe, but with the (“magnified” numbers) text being flowed onto curves, too many SVG renderers seem to handle that badly, so I figure it’s better that all the text be converted to path objects. Then there are no worries about support for various font features.
Here’s another try, with the clipping path removed from the magnifying glass handle (which I hope is what was throwing things off), and the elements inside the magnifying glass “dumbed-down” for wider support. (Previously the magnified graph paper viewed through the lens was constructed from an actual clone of the base paper/grid objects, enlarged by 20% and then clipped into the circular lens area. But that seems to confound a lot of SVG renderers, so now it’s just an enlarged, circular, completely-separate copy of the “paper” elements. Hopefully that’s less of a challenge.)
It’s constructed from a 5-stop gradient, which I suppose may be the problem. Either that, or it’s the drop-shadow filter. I’ll try removing the shadow first, if that fixes the handle rendering I can add it back in as a separate object instead of a filter effect. If it’s not the shadow, then I’ll just simplify the gradient into a set of layered solid-color objects.
Now, let’s see how it looks shrunk down as tiny as the headerbar icon at the top of this page… here’s a 68x64px scaled version, so Discourse will render it appropriately tiny.
Eh. Not bad. The mag-glass handle could maybe use a bit of a light-colored outline, for when it’s placed against a dark background. (As it is above, for those of us who’re viewing the site in dark mode). The SVG can of course be used against light or dark backgrounds.
Here it is against the dark-mode background color of this site, the blue of the graphviz.org headerbar, and a #fff white page:
The page also has a drop shadow filter applied to it, which I am now realizing the SVG renderer here is not showing either. Makes the “paper” get kind of lost against the background. I’ll replace that filter with a separate shadow object, like for the handle.
There were magnifying-glass-lens shadows that also weren’t rendering, so I baked those in as well. Now all of the (obviously not well-supported) filter shadows are gone.
.
