Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add web support for toDataURL() on svg tags #2072

Merged

Conversation

chrispader
Copy link
Contributor

@chrispader chrispader commented Jun 22, 2023

Summary

Implement web support for Svg.toDataURL()

Continuing the work of @wood1986 from this PR

Test Plan

  1. Create an Svg element (react-native-web: svg)
  2. Give it a ref
  3. Run svgRef.toDataURL(callback)
  4. Print data url string from callback like: (data) => console.log(data)

What's required for testing (prerequisites)?

What are the steps to reproduce (after prerequisites)?

Compatibility

OS Implemented
iOS
Android
Web

(Added web support)

Checklist

  • I have tested this on a device and a simulator
  • I added documentation in README.md
  • I updated the typed files (typescript)
  • I added a test for the API in the __tests__ folder

@chrispader chrispader marked this pull request as ready for review June 22, 2023 15:21
@chrispader chrispader changed the title @chrispader/web svg to data url Add web support for Svg.toDataURL() Jun 22, 2023
@chrispader
Copy link
Contributor Author

chrispader commented Jun 22, 2023

This is how an example image looks like after i fetched the data url and then converted it back to an image:

Screenshot 2023-06-22 at 17 30 17

(the image in the middle of the QR code isn't relevant, this was taken as a screenshot of a react-native-qr-code-svg)

@chrispader chrispader changed the title Add web support for Svg.toDataURL() Add web support for toDataURL() on svg tags Jun 22, 2023
Copy link
Member

@WoLewicki WoLewicki left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Thanks for your contribution 🚀

@WoLewicki WoLewicki merged commit 7983ad2 into software-mansion:main Jul 5, 2023
renovate bot referenced this pull request in valora-inc/wallet Oct 19, 2023
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
|
[react-native-svg](https://github.com/react-native-community/react-native-svg)
| [`^13.9.0` ->
`^13.14.0`](https://renovatebot.com/diffs/npm/react-native-svg/13.9.0/13.14.0)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/react-native-svg/13.14.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/react-native-svg/13.14.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/react-native-svg/13.9.0/13.14.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/react-native-svg/13.9.0/13.14.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>react-native-community/react-native-svg
(react-native-svg)</summary>

###
[`v13.14.0`](https://github.com/software-mansion/react-native-svg/releases/tag/v13.14.0)

[Compare
Source](https://github.com/react-native-community/react-native-svg/compare/v13.13.0...v13.14.0)

PR adding improvements to the library. Thanks for all your contributions
🚀

#### What's Changed

- Create FUNDING.yml by [@&#8203;aleqsio](https://github.com/aleqsio)
in
[https://github.com/software-mansion/react-native-svg/pull/2133](https://github.com/software-mansion/react-native-svg/pull/2133)
- docs: Update deprecated expo install instructions to \`npx expo
install´ by
[@&#8203;GabrieldosSantosOliveira](https://github.com/GabrieldosSantosOliveira)
in
[https://github.com/software-mansion/react-native-svg/pull/2128](https://github.com/software-mansion/react-native-svg/pull/2128)
- \[macOS]\[Xcode 15] Avoid using dirtyRect in `drawRect:` by
[@&#8203;Saadnajmi](https://github.com/Saadnajmi) in
[https://github.com/software-mansion/react-native-svg/pull/2136](https://github.com/software-mansion/react-native-svg/pull/2136)
- fix: error for transform on web by
[@&#8203;WoLewicki](https://github.com/WoLewicki) in
[https://github.com/software-mansion/react-native-svg/pull/2139](https://github.com/software-mansion/react-native-svg/pull/2139)
- chore(deps): bump activesupport from 6.1.7.4 to 7.0.7.2 in
/TestsExample by [@&#8203;dependabot](https://github.com/dependabot)
in
[https://github.com/software-mansion/react-native-svg/pull/2122](https://github.com/software-mansion/react-native-svg/pull/2122)
- fix: web not working with reanimated in example by
[@&#8203;WoLewicki](https://github.com/WoLewicki) in
[https://github.com/software-mansion/react-native-svg/pull/2140](https://github.com/software-mansion/react-native-svg/pull/2140)

#### New Contributors

- [@&#8203;aleqsio](https://github.com/aleqsio) made their first
contribution in
[https://github.com/software-mansion/react-native-svg/pull/2133](https://github.com/software-mansion/react-native-svg/pull/2133)
-
[@&#8203;GabrieldosSantosOliveira](https://github.com/GabrieldosSantosOliveira)
made their first contribution in
[https://github.com/software-mansion/react-native-svg/pull/2128](https://github.com/software-mansion/react-native-svg/pull/2128)
- [@&#8203;Saadnajmi](https://github.com/Saadnajmi) made their first
contribution in
[https://github.com/software-mansion/react-native-svg/pull/2136](https://github.com/software-mansion/react-native-svg/pull/2136)

**Full Changelog**:
software-mansion/react-native-svg@v13.13.0...v13.14.0

###
[`v13.13.0`](https://github.com/software-mansion/react-native-svg/releases/tag/v13.13.0)

[Compare
Source](https://github.com/react-native-community/react-native-svg/compare/v13.12.0...v13.13.0)

Minor release restoring usage of
`UIGraphicsBeginImageContextWithOptions` on `macOS` since there is no
implementation for `UIGraphicsImageRendererFormat` there yet.

#### What's Changed

- feat: add macos back to Example app by
[@&#8203;WoLewicki](https://github.com/WoLewicki) in
[https://github.com/software-mansion/react-native-svg/pull/2119](https://github.com/software-mansion/react-native-svg/pull/2119)

**Full Changelog**:
software-mansion/react-native-svg@v13.12.0...v13.13.0

###
[`v13.12.0`](https://github.com/software-mansion/react-native-svg/releases/tag/v13.12.0)

[Compare
Source](https://github.com/react-native-community/react-native-svg/compare/v13.11.0...v13.12.0)

Minor release introducing the change of API used on `iOS` from
[UIGraphicsBeginImageContextWithOptions](https://developer.apple.com/documentation/uikit/1623912-uigraphicsbeginimagecontextwitho)
to
[UIGraphicsImageRenderer](https://developer.apple.com/documentation/uikit/uigraphicsimagerenderer).

#### What's Changed

- feat: remove UIGraphicsBeginImageContextWithOptions from repo by
[@&#8203;WoLewicki](https://github.com/WoLewicki) in
[https://github.com/software-mansion/react-native-svg/pull/2117](https://github.com/software-mansion/react-native-svg/pull/2117)

**Full Changelog**:
software-mansion/react-native-svg@v13.11.0...v13.12.0

###
[`v13.11.0`](https://github.com/software-mansion/react-native-svg/releases/tag/v13.11.0)

[Compare
Source](https://github.com/react-native-community/react-native-svg/compare/v13.10.0...v13.11.0)

Minor release cleaning the repository 🧹 Please submit any issues that
come up with the newest version 🐛 Thanks for your contributions 🚀

#### What's Changed

- fix: make web platform types compatible with native types by
[@&#8203;nderscore](https://github.com/nderscore) in
[https://github.com/software-mansion/react-native-svg/pull/2091](https://github.com/software-mansion/react-native-svg/pull/2091)
- docs: update usage.md for react-native 0.72 by
[@&#8203;Letty](https://github.com/Letty) in
[https://github.com/software-mansion/react-native-svg/pull/2104](https://github.com/software-mansion/react-native-svg/pull/2104)
- docs: update README.md by [@&#8203;Mhp23](https://github.com/Mhp23)
in
[https://github.com/software-mansion/react-native-svg/pull/2110](https://github.com/software-mansion/react-native-svg/pull/2110)
- fix: bump packages, eslint, tsconfig, prettier and resolve all
conflicts by [@&#8203;WoLewicki](https://github.com/WoLewicki) in
[https://github.com/software-mansion/react-native-svg/pull/2114](https://github.com/software-mansion/react-native-svg/pull/2114)

#### New Contributors

- [@&#8203;nderscore](https://github.com/nderscore) made their first
contribution in
[https://github.com/software-mansion/react-native-svg/pull/2091](https://github.com/software-mansion/react-native-svg/pull/2091)
- [@&#8203;Letty](https://github.com/Letty) made their first
contribution in
[https://github.com/software-mansion/react-native-svg/pull/2104](https://github.com/software-mansion/react-native-svg/pull/2104)
- [@&#8203;Mhp23](https://github.com/Mhp23) made their first
contribution in
[https://github.com/software-mansion/react-native-svg/pull/2110](https://github.com/software-mansion/react-native-svg/pull/2110)

**Full Changelog**:
software-mansion/react-native-svg@v13.10.0...v13.11.0

###
[`v13.10.0`](https://github.com/software-mansion/react-native-svg/releases/tag/v13.10.0)

[Compare
Source](https://github.com/react-native-community/react-native-svg/compare/v13.9.0...v13.10.0)

Minor release fixing some long-standing issues, adding new features such
as web support for `toDataURL`
([https://github.com/software-mansion/react-native-svg/pull/2072](https://github.com/software-mansion/react-native-svg/pull/2072))
and `fallback` prop for `SvgXml` and others
([https://github.com/software-mansion/react-native-svg/pull/2071](https://github.com/software-mansion/react-native-svg/pull/2071)).
It also adds support for RN 0.72 on **new architecture**, at the same
time dropping the support for RN 0.71 there. Thanks for all your
contributions 🚀

#### What's Changed

- Fix compilation errors on Windows by
[@&#8203;christophpurrer](https://github.com/christophpurrer) in
[https://github.com/software-mansion/react-native-svg/pull/2045](https://github.com/software-mansion/react-native-svg/pull/2045)
- Fix setNativeProps type by
[@&#8203;fauri13](https://github.com/fauri13) in
[https://github.com/software-mansion/react-native-svg/pull/2058](https://github.com/software-mansion/react-native-svg/pull/2058)
- fix: remove deprecated import from react-native-web by
[@&#8203;janlat](https://github.com/janlat) in
[https://github.com/software-mansion/react-native-svg/pull/2027](https://github.com/software-mansion/react-native-svg/pull/2027)
- fix: Updating iOS version
[#&#8203;2038](https://github.com/react-native-community/react-native-svg/issues/2038)
by [@&#8203;sgabriel](https://github.com/sgabriel) in
[https://github.com/software-mansion/react-native-svg/pull/2041](https://github.com/software-mansion/react-native-svg/pull/2041)
- Fix syntax error in RNSVGImageShadowNode::initialStateData by
[@&#8203;hsjoberg](https://github.com/hsjoberg) in
[https://github.com/software-mansion/react-native-svg/pull/2079](https://github.com/software-mansion/react-native-svg/pull/2079)
- Fix
[#&#8203;1345](https://github.com/react-native-community/react-native-svg/issues/1345):
opacity does not work with currentColor on Android by
[@&#8203;laptou](https://github.com/laptou) in
[https://github.com/software-mansion/react-native-svg/pull/2080](https://github.com/software-mansion/react-native-svg/pull/2080)
- chore: bump Example to 0.72 by
[@&#8203;WoLewicki](https://github.com/WoLewicki) in
[https://github.com/software-mansion/react-native-svg/pull/2084](https://github.com/software-mansion/react-native-svg/pull/2084)
- chore(deps): bump fast-xml-parser from 4.1.3 to 4.2.4 in /TestsExample
by [@&#8203;dependabot](https://github.com/dependabot) in
[https://github.com/software-mansion/react-native-svg/pull/2063](https://github.com/software-mansion/react-native-svg/pull/2063)
- chore(deps): bump vm2 from 3.9.14 to 3.9.19 by
[@&#8203;dependabot](https://github.com/dependabot) in
[https://github.com/software-mansion/react-native-svg/pull/2056](https://github.com/software-mansion/react-native-svg/pull/2056)
- chore(deps): bump fast-xml-parser from 4.2.4 to 4.2.5 in /TestsExample
by [@&#8203;dependabot](https://github.com/dependabot) in
[https://github.com/software-mansion/react-native-svg/pull/2085](https://github.com/software-mansion/react-native-svg/pull/2085)
- Add web support for toDataURL() on svg tags by
[@&#8203;chrispader](https://github.com/chrispader) in
[https://github.com/software-mansion/react-native-svg/pull/2072](https://github.com/software-mansion/react-native-svg/pull/2072)
- Prevents SvgUri crashes when uri is invalid and adds fallback prop by
[@&#8203;PiotrWszolek](https://github.com/PiotrWszolek) in
[https://github.com/software-mansion/react-native-svg/pull/2071](https://github.com/software-mansion/react-native-svg/pull/2071)
- chore: run prettier and lint by
[@&#8203;WoLewicki](https://github.com/WoLewicki) in
[https://github.com/software-mansion/react-native-svg/pull/2087](https://github.com/software-mansion/react-native-svg/pull/2087)
- chore: bump TestsExample to 0.72 by
[@&#8203;WoLewicki](https://github.com/WoLewicki) in
[https://github.com/software-mansion/react-native-svg/pull/2088](https://github.com/software-mansion/react-native-svg/pull/2088)
- feat: strokeDasharray with Animated by
[@&#8203;WoLewicki](https://github.com/WoLewicki) in
[https://github.com/software-mansion/react-native-svg/pull/2089](https://github.com/software-mansion/react-native-svg/pull/2089)

#### New Contributors

- [@&#8203;christophpurrer](https://github.com/christophpurrer) made
their first contribution in
[https://github.com/software-mansion/react-native-svg/pull/2045](https://github.com/software-mansion/react-native-svg/pull/2045)
- [@&#8203;fauri13](https://github.com/fauri13) made their first
contribution in
[https://github.com/software-mansion/react-native-svg/pull/2058](https://github.com/software-mansion/react-native-svg/pull/2058)
- [@&#8203;janlat](https://github.com/janlat) made their first
contribution in
[https://github.com/software-mansion/react-native-svg/pull/2027](https://github.com/software-mansion/react-native-svg/pull/2027)
- [@&#8203;sgabriel](https://github.com/sgabriel) made their first
contribution in
[https://github.com/software-mansion/react-native-svg/pull/2041](https://github.com/software-mansion/react-native-svg/pull/2041)
- [@&#8203;laptou](https://github.com/laptou) made their first
contribution in
[https://github.com/software-mansion/react-native-svg/pull/2080](https://github.com/software-mansion/react-native-svg/pull/2080)
- [@&#8203;chrispader](https://github.com/chrispader) made their first
contribution in
[https://github.com/software-mansion/react-native-svg/pull/2072](https://github.com/software-mansion/react-native-svg/pull/2072)
- [@&#8203;PiotrWszolek](https://github.com/PiotrWszolek) made their
first contribution in
[https://github.com/software-mansion/react-native-svg/pull/2071](https://github.com/software-mansion/react-native-svg/pull/2071)

**Full Changelog**:
software-mansion/react-native-svg@v13.9.0...v13.10.0

</details>

---

### Configuration

📅 **Schedule**: Branch creation - "after 5pm,every weekend" in timezone
America/Los_Angeles, Automerge - "after 5pm,every weekend" in timezone
America/Los_Angeles.

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/valora-inc/wallet).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4xOS4yIiwidXBkYXRlZEluVmVyIjoiMzcuMTkuMiIsInRhcmdldEJyYW5jaCI6Im1haW4ifQ==-->

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: valora-bot <valorabot@valoraapp.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants