Redraw IE9 SVG to get from 600+KB to 8.5KB

[eoghanmurray]

Original was 100x the file size.
I'm comparing an export of this redraw against the 512x512px .png version and there's not much in it

[eoghanmurray]

[eoghanmurray]

I'm taking certain things in this old SVG to be artefacts — e.g. the extra yellow border above swoosh, and the lack of blue colour at top right

[alrra]

@eoghanmurray Great work! Thank you for doing this!

---

Here is the comparison view:

At first glance 2 main differences stand out to me:

• The bottom of the ring:

  

• The darker yellow part of the ring (it needs to be less):

  

[alrra]

@eoghanmurray You are getting really close! 👏

Here is the diff view:

diff.mp4

The darker yellow part of the ring still stands out as the main difference.

Also, very minor things:

• The length of the shadow underneath the ring needs to be increased a bit.
• The parts of the ring right before they go underneath the e should be a bit more transparent?

[eoghanmurray]

Ok loads more work done, basically redrew the 'swoosh' again, with probably about 6 complex and independent gradients rather than the 2 or 3 simpler ones in the previous version. Don't think I'm gonna get better than this as my reference .png is looking very close now; but maybe you have a different reference image which can uncover any further tweaks that are necessary?

[eoghanmurray]

This gif isn't the whole story as I think it introduces some artefacts in the raster of the svg due to reduced colour space maybe.

[alrra]

@eoghanmurray Thank you! 🙇‍♂️

---

This gif isn't the whole story as I think it introduces some artefacts in the raster of the svg due to reduced colour space maybe.

Note: You can use GitHub to compare the differences.

diff-view.mp4

as my reference .png

What PNG are you using?

maybe you have a different reference image which can uncover any further tweaks that are necessary?

Note: In this repository the image without any dimensions included in the filename is the biggest one dimensionwise and the best one when it comes to details. In the case of IE 9-11, that image would be this one.

For logos for which this project has the SVG, the SVG would be the best reference. As you previously notice, the PNG images are generated from the SVG.

[eoghanmurray]

Was wondering how you generated the previous 'swipe' video!

the PNG images are generated from the SVG.

I thought I noticed some serious artefacts in the prior SVG, as can be seen in this comparison:
#202 (comment)
e.g. SVG had a much darker blue in top left segment
Therefore I didn't think the pngs were ever generated from that SVG. Maybe they were all provided at once by that member of the IE team?

[alrra]

e.g. SVG had a much darker blue in top left segment
Therefore I didn't think the pngs were ever generated from that SVG.

@eoghanmurray Could it be that the software (i.e.: Inkscape) you open the SVG in doesn't render it correctly? Try opening the SVG image in a browser?

Here is the latest PNG and here is the latest SVG. I don't see any difference related to the blue background, and almost no difference overall:

diff.mp4

Note: I think the barely noticeable minor ring gradient differences come from resizing the SVG to be the same size as the PNG?

---

Even though only lossless optimizations were done on internet-explorer_9-11.svg since the PNGs were generated, I regenerated them again.

[eoghanmurray]

Could it be that the software (i.e.: Inkscape) you open the SVG in doesn't render it correctly? Try opening the SVG image in a browser?

Ah yes that was it! Previous version renders fine in certain sizes in the browser, but actually none of the gradients show when viewed raw. Also in Inkscape it doesn't render correctly which I didn't realize at the time. Good job I restarted comparing against the .png!

So defo the new version I've done is much better I think!

I'm attaching the 'full' Inkscape file in case anyone wants to use that for a further rework, which includes an embedded png for comparison, but otherwise the optimized SVG should be editable as I've labelled all the gradients/masks intelligibly.

internet-explorer_9-11.inkscape.zip

[alrra]

Previous version renders fine in certain sizes in the browser

@eoghanmurray Yes, use the view inside of github.com or just open the files directly from your computer.

but actually none of the gradients show when viewed raw.

@eoghanmurray That is because on the raw page all the embedded images are blocked by the CSP policy.

[eoghanmurray]

Any other issues before this can be accepted?

[alrra]

@eoghanmurray Great work! 👏 Again, thank you for working on this!

---

I've merged this PR in b26528e.