FAN-985 Remove unneeded transforms from SVGs that break in Chrome

[mklucsarits]

The way in which we're using SVG sprites on Fandom Stories exposed a bug in Chrome. I don't entirely understand the issue, except that we had two SVGs not displaying properly as a result. However, the two files shared a pattern: They had both had group (<g>) tags containing masks separate from the main paths. This allowed me to propose a fix. I asked Derek H. to edit the files in Sketch, and to move the paths in separate groups into the main layer with the other paths. This resolved the issue.

This bug was not occurring on the Mediawiki stack. The difference being that on Wikia/app, each entire SVG is included inside the <svg> tag, whereas on Fandom stories we use <use> like Mercury. The separate transform groups in the problematic symbols also had their own <use> tags linking to paths in the combined/inlined <defs>. I would guess these multiple <use> links play a part in the underlying issue, although I'm not sure why.

[rogatty]

This is causing build to fail:

npm ERR! Failed to parse json
npm ERR! Unexpected token '\n' at 3:24
npm ERR!   "version": "0.14.5�,

http://jenkins.wikia-prod:8080/job/design-system-reference-page-pr-check/705/console

[rogatty]

After you fix it please check the VRT results to make sure there is no visual difference.

[mklucsarits]

There are visual differences. The reference page is completely different even though all I did was update the SVGs.

[rogatty]

In https://github.com/Wikia/upstream/pull/733 I see that you had an exception for google play and yet, here you modify the app store icon. Is that right?

<?php // todo: fix svg min FAN-985 ?>
<?php if ( $link['image'] == 'wds-company-store-googleplay' ): ?>
    <img class="logo-fandom-tagline" src="<?php echo get_site_url(); ?>/wp-content/themes/upstream/dist/svg/store-googleplay.svg">

[mklucsarits]

That's correct. The problem with the Google Play image was the gradient was not displaying, due to id conflicts in the inlined SVG. https://github.com/Wikia/upstream/pull/733 resolves that. The Apple store image then had the problems described in this PR. So they are two separate issues.

[rogatty]

Please use width and height without px to be consistent with the rest of the files.
Also, run npm run svgo to optimize the source files. There is a lot of ids, transforms, paths and other unnecessary cruft here.

[mklucsarits]

@rogatty Can you take another look at this please?

[rogatty]

@mklucsarits I've found that we have a bug in the SVGO configuration (https://wikia-inc.atlassian.net/browse/XW-2206) and manually optimized the assets you've updated.

I had to update the VRT baseline because in another PR were some changes in CSS but there was no index.html build done. This PR doesn't change anything visually.

LGTM

[mklucsarits]

Thanks, @rogatty !