This was a JS feature, we should be able to handle this a bit easier than the static stuff.

The animation is nothing but a spin, right? Instead of trying to continue using horrible gifs or animate SVG in a way that probably won't be supported. How about we try using css?
Most browsers with .svg support should support css3-animations.

We can detect animation support + .svg support. If the browser supports both then we'll use a .svg image and animate it with a css3-animation. Otherwise we'll just use the .gif.

A solution could be to replace the icon with plain text. That also solves the problem that a star has no obvious relation to watching articles.

fwiw bug 54307 proposes to substitute the current desktop star for the mobile star.

Unwatched svg

Attached:

Unwatched PNG

Attached:

Watched SVG

Attached:

Watched PNG

Attached:

I'm even more inclined to think we should be using css3 animations instead of an animated .gif for this now.

I did a little testing on the watch icon and there is a notable performance difference between the use of a .gif and a css3 animation.
A single running animated .gif makes Chrome on my computer renders the page at ~33FPS. While using a proper css3 animation instead renders at the complete 55-60FPS.

.gifs are inefficient. Because they are image frame based rather than a simple instruction like "rotate this" the browser has to re-draw images for each frame. As a result a css3 animation which gets to use the GPU to make simple modifications will always perform better. And will also do a much smoother animation. (Fixed frame list vs. a rotation that can create a frame for any point in the rotation and animate at the refresh rate).

maddiemadan wrote:

The star icon is changed but it still gets pixelated when zoomed in on a browser.
Chromium 28.0.1500

Nandakumar, a Google Code-in student, has a zip file with an SVG star and an HTML file to animate it at http://www.google-melange.com/gci/task/view/google/gci2013/5909942108160000

I have asked the student to submit a Gerrit change, but while he learns to do this, could you please check the zip file and comment? Isn't the animation too slow, or is this related with thefull screen size of the start I see when opening the file?

The animation is set to 10s, which seems pretty slow (in terms of total time). It also renders kind of slowly for me (poor frame rate), which is probably because it's a 1000x1000 image instead of the intended size. :)

Recommend:

• don't embed the SVG in the HTML; the SVG file should be loaded as a background image via CSS, so we can let it fall back to a PNG version for some older browsers
• size should match the current size
• shorten the animation duration to match the current animation
• only run the animation once, not continuously
• when the animation completes, the star needs to change state
• needs to be integrated into the actual stylesheets

Change 98856 had a related patch set uploaded by M4tx:
Add an SVG version of watch icon

https://gerrit.wikimedia.org/r/98856

The Gerrit changeset linked above has been submitted by a GCI student. Please help reviewing it.

Change 99258 had a related patch set uploaded by M4tx:
Add an SVG version of watch icon

https://gerrit.wikimedia.org/r/99258

Change 98856 abandoned by Bartosz Dziewoński:
Add an SVG version of watch icon

Reason:
OK, let's abandon this in favor of https://gerrit.wikimedia.org/r/#/c/99258/ then. (You can do it yourself by clicking the "Abandon Change" button.)

https://gerrit.wikimedia.org/r/98856

According to an informal chat with Bartosz and Timo at the Architecture Summit, https://gerrit.wikimedia.org/r/#/c/99258/ is ready. Can someone with +2 review it and eventually merge it, please?

Change 99258 merged by jenkins-bot:
Add an SVG version of watch icon

https://gerrit.wikimedia.org/r/99258

Done now. Yay!