fix: add support for svg uris without viewbox

[Prithpal-Sooriya]

Description

We have ran into some SVG rendering issues with SVG URIs. This is due to some SVGs do not contain a view-box, thus can be much larger or smaller than the container it is trying to fit in.

For example:

• This SVG does not have a viewbox, and does not "render correctly"
• This SVG does have a viewbox and can be rendered correctly.

See Example Screenshot

This adds an effect to use the SVG width/height for setting a view box if not set in the SVG.

Related issues

Known issue and temporary fix in react-native-svg:
software-mansion/react-native-svg#1202 (comment)

Manual testing steps

Screenshots/Recordings

Before

Before

After

After

Pre-merge author checklist

• I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: c620aef
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/09a4e463-1363-45e2-b125-1ee0378d7e47

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: a0581b4
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/f917cecc-2409-4cd4-a53c-c01b3d144d9f

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
92.5% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: f91517e
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/7126ccb9-4ff4-4c4c-8a62-2c2a23fb8246

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[Jonathansoufer]

LGTM! Well done!