Add SVG version of the Safari logo

[eoghanmurray]

This is created from scratch in Inkscape, working from the 512x512px .png version. I've attempted to minimize the diff with that when this SVG is exported to .png at that resolution.

[alrra]

I've attempted to minimize the diff with that when this SVG is exported to .png at that resolution.

Great work, @eoghanmurray! 👏

This is the closest to the original I've seen so far!

---

At first glance 2 main differences stand out to me:

• the dial lines are cut off

  

• the blue background gradient is darker

  1.mp4

---

@eoghanmurray Would you be willing / have the time to work on improving the things mentioned above?

[eoghanmurray]

Thanks for the review, amazing that someone cares about these details!
I've made quite a few changes now

• fixes to cut off dial lines
• main blue gradient redrawn (although still not perfect)
• top inner shadow improved
• adjustments to positions of some dial lines

I wish you had accepted some of the previous efforts, perhaps under a different filename, e.g. safari.imperfect.svg, as it would have been a better starting point and probably good enough for 99% of people (I'm actually scaling this small enough that you can barely make out the dial lines).

Also, is there any space for the workings, e.g. safari.inkscape.svg — future corrections would be easier to do in that rather than in the optimized version I've added here.

[alrra]

I've made quite a few changes now

@eoghanmurray Thank you! 🙇‍♂️

main blue gradient redrawn (although still not perfect)

I think it's good.  👍

---

One last thing and this should be good to merge:

The PNG version of the logo is embedded as a data URI in the SVG. That should be removed, however, once removed 2 of the dial lines lose their shadow.

---

I wish you had accepted some of the previous efforts, perhaps under a different filename, e.g. safari.imperfect.svg,

There are many reasons why I do not, the main ones being:

• Even though there are official/recommended ways to consume these logos, once a image is included, people can and will link directly to it (not even link to a specific commit / tag). For popular logos such as Safari, there will be a lot of direct links so removing any of the images becomes problematic (see: [1], [2]).
• You would be surprised, but people do care about the quality of the logos, and came to expect it (reason why I think this repository got some traction?).

In general this project tries as much as possible to match the official logos. Quite often they are provided by the official source (see: [1], [2], [3], etc.). Unfortunately, that has not been the case with Apple (see: [1], [2]). 😔

I wish you had accepted some of the previous efforts... as it would have been a better starting point

The code from the previous attempts is still available. Also, I did attach an even "closer to the original" version once I found it.

Also, is there any space for the workings, e.g. safari.inkscape.svg — future corrections would be easier to do in that rather than in the optimized version I've added here. That way the context of it is not lost.

I would recommend making a zip archive and attaching it to this issue.

[eoghanmurray]

I would recommend making a zip archive and attaching it to this issue.

Workings attached!

safari-macos.inkscape.zip

[eoghanmurray]

P.s. thanks for the explanations

[alrra]

Workings attached!
safari-macos.inkscape.zip

@eoghanmurray Thank you!

That should be removed, however, once removed 2 of the dial lines lose their shadow.

@eoghanmurray Would you be willing / have the time to work on the above mentioned?

[eoghanmurray]

once removed 2 of the dial lines lose their shadow

Whatever way I removed the accidentally embedded image, I didn't seem to lose any of those shadows.

This is the latest from this pull request:
https://raw.githubusercontent.com/alrra/browser-logos/18cdbe0dfa8190aaecc72aab9afd0231e385c75a/src/safari/safari.svg

[alrra]

@eoghanmurray Thank you for taking the time to do this! Great work! 👏

This is now merged in: 260d24e.

Note: To correct the shadow issue mentioned above, but also to reduce among other the number of transforms, I redid the dial lines. Also, I tweak some other minor things and further optimized the SVG.

---

I didn't seem to lose any of those shadows.

This is the latest from this pull request:
https://raw.githubusercontent.com/alrra/browser-logos/18cdbe0dfa8190aaecc72aab9afd0231e385c75a/src/safari/safari.svg

@eoghanmurray If you look a bit more carefully (or enlarge the SVG), you will see them. Here is a picture of only the dial lines to make it more clearer:

[eoghanmurray]

Are transforms negative from a performance point of view? I was using the <use>s to reduce code repetition and allow modification of them all at once (I suppose a group could accomplish the same for things like stroke-width).

Also I'm wondering about the regeneration of the .pngs; I assumed they were the source images taken from iOS directly. Regenerating them erases the memory that the SVG gradient isn't perfectly correct.

[alrra]

Are transforms negative from a performance point of view?

@eoghanmurray Yes.

For example in Chrome, rendering takes twice as much for the SVG with all the transforms (note: throttle the CPU to make the difference even more visible).

I was using the <use>s to reduce code repetition and allow modification of them all at once (I suppose a group could accomplish the same for things like stroke-width).

Using the <path> approach was also more efficient in terms of size.

Also I'm wondering about the regeneration of the .pngs

Having discrepancies between the images creates confusion and that leads to more issues.

Every time a SVG is changed, I regenerate the related PNGs. This is not something new (see for example: bd90dba).

Regenerating them erases the memory

That's why we us Git (see: old icons).

SVG gradient isn't perfectly correct.

If you have the time and want to tweak things even more, feel free! I would gladly accept the pull request!

---

@eoghanmurray Thank you again for this work!

[eoghanmurray]

Regenerating them erases the memory

That's why we us Git (see: old icons).

Ok just wondering if there's a way I can identify an official source .png image at the highest resolution in order to base future redraws of SVGs off of?

[alrra]

Ok just wondering if there's a way I can identify an official source .png image at the highest resolution

@eoghanmurray It depends. If the logo is not directly provided by the official source (such as in the case of the V8 related ones), things are not always straightforward.

For example, many browsers use variations of their logos depending on the platform, year, etc.

Here is the current UC browser logo on Android:

or the current Chrome browser logo on macOS

...and there are many other examples like the above.

If the logo is not directly provided, it will still be indirectly provided with the browser, on the official site, etc. (see for example: [1], [2], [3]). As for logo variations, this project tries to use the most commonly used form or base form used by all variations.