diff --git a/USAGE.md b/USAGE.md index 65e9b446e..af8c5d269 100644 --- a/USAGE.md +++ b/USAGE.md @@ -1390,3 +1390,74 @@ const styles = StyleSheet.create({ ``` ![FilterImage](./screenshots/filterImage.png) + +# toDataURL Method + +The `toDataURL` method is a utility function designed to convert an SVG element into a Base64-encoded image format (PNG or JPEG). + +```ts +toDataURL( + callback: (base64: string) => void, + options?: ToDataUrlOptions +) +``` + +## Parameters +```ts +callback: (base64: string) => void +``` +A function that receives the Base64-encoded string as its argument once the SVG conversion is complete. The string represents the converted image data. + +`options?: ToDataUrlOptions` +An object specifying the size, format (JPEG or PNG) and quality of the output image. Object can include the following properties: + +``` ts +format?: 'png' | 'jpeg' // default: 'png'. +size?: { + width: number + height: number +} +quality?: number // number in range `0-1` (only applicable for jpeg format) +``` + +## Example: + +```tsx +import * as React from 'react'; +import {Button, Dimensions, View} from 'react-native'; +import Svg, {Path, type ToDataUrlOptions} from 'react-native-svg'; + +const SvgLogoWelcome = () => { + const ref = React.useRef(null); + const {width, height} = Dimensions.get('screen'); + + const optionsWithJPEGFormat: ToDataUrlOptions = { + format: 'jpeg', + width, + height, + quality: 100, + }; + + const optionsWithPNGFormat: ToDataUrlOptions = { + format: 'png', + width, + height, + }; + + return ( + <> + + + +