fix: turn off cleanupIds for svgo loader #268
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🎟️ Asana Task
Description
There is a problem on safari dev portal where a svg that is used as a background image is blurry. To fix this, I used the svg inline instead of as a background image. That worked in most places but on the hcp page, the svg was getting cut off. This was because the title svg being used was different from other products. This svg had a clip-path and the other product svgs do not. Since the new blurry svg and the title svg have a clip-path, there became a problem. Our svgo settings currently minify the ids on svgs to reduce size. However, if you have two svgs in the same spot, this can become a problem. The algorithm svgo uses is very simple and assigns the ids as a, b, c, ... Because of this, both svgs had a clip-path with an id of 'a' which caused the second svg to get cut off incorrectly.
This PR fixes this problem. Certain plugins are installed as default for svgo, one of them being cleanupIds. This PR changes the settings for that plugin so the ids are no longer minified and we don't run into this problem anymore. There are more details about this setting at the docs and this github issue. Also, this is being used in this dev-portal PR
Screenshots
Before
After
Testing
PR Checklist 🚀