Replace Ruby logo with an SVG image

[postmodern]

We should embrace Scalable Vector Graphics for logos/graphs/etc, so that the site renders appropriately on all screen resolutions. SVGs can either be embedded directly into the HTML or used in img tags.

http://caniuse.com/#search=svg

[chikamichi]

The thing is, do we have the resource to produce a SVG icon? By resource, I mean, both a smart designer and a good (as in quality) raster version.

[postmodern]

We can use an existing SVG. I'm semi handy with InkSkape. 😉

[postmodern]

Just needs a reflection added. Also we could split the text out into translation specific images?

[abelards]

Hi guys, how about this one?
https://github.com/abelards/www.ruby-lang.org/blob/svg_reflection/images/Ruby_logo_reflection.svg
I'm no designer either, semi-handy with InkScape too ^^
Let me know if it helps.

[abelards]

Up!

[hsbt]

@abelards Sorry, too late response. If you create pull request of replace svg to ruby logo, I can merge it. Could you create pull request?

[stomar]

I might be wrong, but I vaguely remember that there had been an official logo tarball on rubyidentiy.org (which is now not available). Maybe there probably already are better resolution or vector graphics files?

[abelards]

@stomar Found it on the Web Archive!
http://web.archive.org/web/20130305013254/http://rubyidentity.org/
The ZIP does not have SVG though: jpg, png, pdf, xar, ai, swf
Maybe someone with current Flash knowledge can do a proper extract?
(I haven't touched Adobe tools since 2008)

[abelards]

@hsbt well, I've sent an SVG but I don't know if people want to actually change the logo from current image format to SVG everywhere.

IE < 9 and Android < 2.3 wouldn't like it. I'm all for goign forward but "enterprise" people may have aging browsers and I guess Ruby has already converted the cool kids so I wouldn't like to cut the only audience we still have to conquer.

There seems to be a hack though: http://lynn.ru/examples/svg/en.html

<svg width="96" height="96">
    <image xlink:href="svg.svg" src="svg.png" width="96" height="96"/>
</svg>

[devdiva]

The lynn.ru example doesn't load right now, but it is also described here: http://css-tricks.com/svg-fallbacks/

One approach for fallbacks is to use js-based feature detection (yepnope, modernizr) and css to show/hide the supported format. Are there any preferences for or against a particular javascript library?

[stomar]

This is only my very personal opinion, but IMO the less javascript the better... I have it disabled in my browser.

[devdiva]

FYI - The ruby logo on the wikipedia page doesn't have the reflection, but the quality of the facets looks better (no black corners). The revision history there says "SVG from original pdf version" (2007). http://en.wikipedia.org/wiki/File:Ruby_logo.svg