Greasy Fork

Greasy Fork SVG logo

I wanted to get an SVG version of the Greasy Fork logo, but I couldn't find it. So I made one myself!

https://github.com/denilsonsa/denilsonsa.github.io/blob/master/icons/GreasyFork.svg

The background text is not 100% accurate, but it is close enough. And, since it is stored as text, it may be rendered slightly differently by different tools.

Looks nice!

Not that it matters, but I noticed a small mistake in the background text. The text has XmlHttpRequ, but the actual API is XMLHttpRequest, with uppercase XML. :)

Thanks for the link to the 512px Gimp file!

Two comments: font and format.

Font:

Note that font definitions are not the same.
XCF-font = 'Sans'
SVG-font = 'DejaVu Sans', Arial, 'Liberation Sans', 'Open Sans', sans-serif
I found 'DejaVu Sans' exact as original, but people that doesn't have this font installed will see the second option, Arial, that is very different. I think Verdana should be better that Arial.
But the best solution will be if you outlines font 'DejaVu Sans' (convert text to curves).

Another issue is that original font has a letter-spacing of -4%, showing the letters a bit more "joined".

Format:

Note that original Gimp files are in different sizes with diferent formats.
16x16 , and
32x32 has no background text at all;

96x96 match your SVG version, showing 4 and half text lines; but
128x128 and
512x512
hi-res versions shows 5 text lines.




PD:

The text has XmlHttpRequ, but the actual API is XMLHttpRequest, with uppercase XML. :)

I think that doesn't matters. `GM_xmlhttpRequest` is with lowercase xmlhttp, and you can build your own function names.

The Gimp XCF file seems to use Sans font, which matches:

$ fc-match Sans
DejaVuSans.ttf: "DejaVu Sans" "Book"

Thank you very much for pointing out the Verdana font! It is a better fit, indeed.

Regarding the letter-spacing, I've added textLength attribute to make sure the letter spacing, even with other fonts, look similar to the desired one. Unfortunately, Firefox does not support it on <tspan>. Inkscape also seems to ignore it.

Then now I tried adding letter-spacing attribute to the SVG. Firefox still ignored it, but at least the text looks closer in Inkscape.

And I agree that converting to curves would be the best solution. I may even do it in a later time.

Regarding the number of lines… Well, having different versions for different sizes requires me to pick one for the scalable version. Given the cleanliness of the tiny logos, I was inclined to use one of them, but I ended up using the larger one. It was also as a challenge (now I know a bit more about SVG than before!).

Not just the background text, but the fork proportions are also different on each one.

Do you have any suggestion on how to proceed? I don't want multiple SVG versions, I would prefer a single version.

You can build something like this:

gf.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
 <style>
  @media screen and (max-width: 50px)
  {
   #text-group { display: none }
  }
  @media screen and (min-width: 100px)
  {
   #text-group { transform: scale(1,.9) }
  }
 </style>
 <circle fill="#000" r="48" cy="48" cx="48"/>
 <g id="text-group"><path fill="#fff" d="
  M10 5h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18
  M10 25h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18
  M10 45h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18
  M10 65h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18
  M10 85h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18
 "/></g>
 <g id="fork-group"><path fill="#000" d="M20 16l62 62l-8 8l-62-62z"/><path fill="#fff" d="M18 18l60 60l-4 4l-60-60z"/></g>
</svg>

Note: I don't draw the text and the real fork. I used lines instead. (Yeah, too lazy)

See results with this one:

test.html:

<html>
 <head>
  <style>table,tbody,tr,td{vertical-align:top;text-align:center}</style>
 </head>
 <body>
  <table>
   <tbody>
     <tr>
       <td>16x16</td>
       <td>32x32</td>
       <td>64x64x</td>
       <td>96x96</td>
       <td>120x120x</td>
       <td>512x512</td>
     </tr>
     <tr>
       <td><img src="gf.svg" width="16px" height="16px"/></td>
       <td><img src="gf.svg" width="32px" height="32px"/></td>
       <td><img src="gf.svg" width="64px" height="64px"/></td>
       <td><img src="gf.svg" width="96px" height="96px"/></td>
       <td><img src="gf.svg" width="120px" height="120px"/></td>
       <td><img src="gf.svg" width="512px" height="512px"/></td>
     </tr>
   </tbody>
  </table>
 </body>
</html>

Great idea! I've never tried using CSS Media Queries together with SVGs before! Thanks for showing me this technique!

However, it does not work "everywhere", and does not for me. The media queries only check for the whole SVG size, and if I decide to (re)use that graphic inside another SVG, the media queries won't work the way as we want.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 532 532">
 <style> … </style>
 <defs>
  <symbol id="icon" viewBox="0 0 96 96">
   <!-- Insert the graphic definition here. -->
  </symbol>
 </defs>
 <use xlink:href="#icon" x="0" y="0" width="32" height="32"/>
 <use xlink:href="#icon" x="32" y="32" width="500" height="500"/>
</svg>

The smaller icon at the top-left will change the style at the same moment as the bigger icon; even though they have very different dimensions. So, I don't see a reliable way of using this technique with <use>.

The solution was for using one single file for the diferent versions of image. It does that. No more.
I don't know how to (re)use that graphic inside a symbol declaration. But I started to play with SVG format images 3 weeks ago.

But why do you want to put two images together in a single file ? You can show two separated images with the same file -and they can be diferent !-.

But why do you want to put two images together in a single file?

This: http://denilson.sa.nom.br/aboutme.svg and http://denilson.sa.nom.br/

But you can do the same effect using HTML with multiple image files:
http://stackoverflow.com/questions/12813573/position-icons-into-circle
http://stackoverflow.com/questions/30783139/wrap-icons-around-an-extendable-circle
http://codepen.io/HugoGiraudel/pen/Bigqr
http://dabblet.com/gist/3864650

The fork shows 11:00.
I think, the fork pointing to 01:00 would look more progressive
and we'd like to see the fork made of stainless steel, not of cheap plastic!