search

ruby / www.ruby-lang.org

Source of the https://www.ruby-lang.org website.
881 stars 605 forks source link

Replace Ruby logo with an SVG image #130

Open postmodern opened 11 years ago

postmodern commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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

postmodern commented 11 years ago

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

abelards commented 11 years ago

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 commented 11 years ago

Up!

hsbt commented 11 years ago

@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 commented 11 years ago

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 commented 11 years ago

@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 commented 11 years ago

@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 commented 10 years ago

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 commented 10 years ago

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

devdiva commented 10 years ago

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