{"id":15319148,"url":"https://github.com/zoontek/react-native-svg","last_synced_at":"2025-10-09T05:30:41.306Z","repository":{"id":61900311,"uuid":"243008975","full_name":"zoontek/react-native-svg","owner":"zoontek","description":"SVG library for React Native, React Native Web, and plain React web projects.","archived":false,"fork":true,"pushed_at":"2022-03-10T09:22:19.000Z","size":17588,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-02T09:03:54.641Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"software-mansion/react-native-svg","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zoontek.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-25T13:41:11.000Z","updated_at":"2023-03-08T04:45:06.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/zoontek/react-native-svg","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Freact-native-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Freact-native-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Freact-native-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Freact-native-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zoontek","download_url":"https://codeload.github.com/zoontek/react-native-svg/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235791916,"owners_count":19045577,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-01T09:03:55.666Z","updated_at":"2025-10-09T05:30:35.809Z","avatar_url":"https://github.com/zoontek.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"## react-native-svg\n\n[![Version](https://img.shields.io/npm/v/react-native-svg.svg)](https://www.npmjs.com/package/react-native-svg)\n[![NPM](https://img.shields.io/npm/dm/react-native-svg.svg)](https://www.npmjs.com/package/react-native-svg)\n\n`react-native-svg` provides SVG support to React Native on iOS and Android, and a compatibility layer for the web.\n\n[Check out the demo](https://snack.expo.io/@msand/react-native-svg-example)\n\n## Looking for maintainers\n\nhttps://github.com/react-native-svg/react-native-svg/issues/1554\n\n## Features\n\n1. Supports most SVG elements and properties (Rect, Circle, Line, Polyline, Polygon, G ...).\n2. Easy to [convert SVG code](https://svgr.now.sh/) to react-native-svg.\n\n- [Installation](#installation)\n  - [Automatically](#automatically)\n  - [Manually](#manually)\n    - [Android](#android-pre-rn-060)\n    - [iOS](#ios-pre-rn-060)\n- [Troubleshooting](#troubleshooting)\n- [Opening issues](#opening-issues)\n- [Usage](#usage)\n  - [Use with content loaded from uri](#use-with-content-loaded-from-uri)\n  - [Use with svg files](#use-with-svg-files)\n  - [Use with xml strings](#use-with-xml-strings)\n- [Common props](#common-props)\n- [Supported elements](#supported-elements)\n  - [Svg](#svg)\n  - [Rect](#rect)\n  - [Circle](#circle)\n  - [Ellipse](#ellipse)\n  - [Line](#line)\n  - [Polygon](#polygon)\n  - [Polyline](#polyline)\n  - [Path](#path)\n  - [Text](#text)\n  - [TSpan](#tspan)\n  - [TextPath](#textpath)\n  - [G](#g)\n  - [Use](#use)\n  - [Symbol](#symbol)\n  - [Defs](#defs)\n  - [Image](#image)\n  - [ClipPath](#clippath)\n  - [LinearGradient](#lineargradient)\n  - [RadialGradient](#radialgradient)\n  - [Mask](#mask)\n  - [Pattern](#pattern)\n  - [Marker](#marker)\n  - [ForeignObject](#foreignobject)\n- [Touch Events](#touch-events)\n- [Serialize](#serialize)\n- [Run example](#run-example)\n- [TODO](#todo)\n- [Known issues](#known-issues)\n\n### Installation\n\n#### Automatically\n\n##### With expo-cli\n\n\u003e ✅ The [Expo client app](https://expo.io/tools) comes with the native code installed!\n\nInstall the JavaScript with:\n\n  ```bash\n  expo install react-native-svg\n  ```\n\n📚 See the [**Expo docs**](https://docs.expo.io/versions/latest/sdk/svg/) for more info or jump ahead to [Usage](#Usage).\n\n##### With react-native-cli\n\n1. Install library\n\n   from npm\n   ```bash\n   npm install react-native-svg\n   ```\n   from yarn\n   ```bash\n   yarn add react-native-svg\n   ```\n\n2. Link native code\n\n   With autolinking (react-native 0.60+)\n\n   ```bash\n   cd ios \u0026\u0026 pod install\n   ```\n\n   Pre 0.60\n\n   ```bash\n   react-native link react-native-svg\n   ```\n\n# NOTICE:\n\nDue to breaking changes in react-native, the version given in the left column\n(and higher versions) of react-native-svg only supports the react-native version\nin the right column (and higher versions, if possible).\n\nIt is recommended to use the version of react given in the peer dependencies\nof the react-native version you are using.\n\nThe latest version of react-native-svg should always work in a clean react-native project.\n\n| react-native-svg | react-native |\n| ---------------- | ------------ |\n| 3.2.0            | 0.29         |\n| 4.2.0            | 0.32         |\n| 4.3.0            | 0.33         |\n| 4.4.0            | 0.38         |\n| 4.5.0            | 0.40         |\n| 5.1.8            | 0.44         |\n| 5.2.0            | 0.45         |\n| 5.3.0            | 0.46         |\n| 5.4.1            | 0.47         |\n| 5.5.1            | \u003e=0.50       |\n| \u003e=6              | \u003e=0.50       |\n| \u003e=7              | \u003e=0.57.4     |\n| \u003e=8              | \u003e=0.57.4     |\n| \u003e=9              | \u003e=0.57.4     |\n\nOr, include [this PR](https://github.com/facebook/react-native/pull/17842) manually for v7+ stability on android for older RN ( [included in 0.57-stable](https://github.com/facebook/react-native/commit/d9f5319cf0d9828b29d0e350284b22ce29985042) and newer).\n\nThe latest version of v6, v7, v8 and v9 should all work in the latest react-native version.\n\nv7 and newer requires the patch for making android thread safe, to get native animation support.\n\n#### Manually\n\n##### Android pre RN 0.60\n\n1. `yarn add react-native-svg` In RN 0.60+, this is all you should ever need to do get Android working. Before this, react-native link was responsible for the following steps:\n\n2. Append the following lines to `android/settings.gradle`:\n\n   ```gradle\n   include ':react-native-svg'\n   project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')\n   ```\n\n3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n\n   ```gradle\n   implementation project(':react-native-svg')\n   ```\n\n4. Open up `android/app/src/main/java/[...]/MainApplication.java`\n\n- Add `import com.horcrux.svg.SvgPackage;` to the imports at the top of the file\n- Add `new SvgPackage()` to the list returned by the `getPackages()` method. Add a comma to the previous item if there's already something there.\n\n##### iOS pre RN 0.60\n\n[Manual linking](http://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking)\n\nTo install react-native-svg on iOS visit the link referenced above or do the following (react-native link should do this for you):\n\n1. Open your project in XCode and drag the `RNSVG.xcodeproj` file (located in `.../node_modules/react-native-svg/ios`) into the Libraries directory shown in XCode.\n2. Expand the `RNSVG.xcodeproj` file you just added to XCode until you see: `libRNSVG.a` (located in `RNSVG.xcodeproj` \u003e `Products` )\n3. Drag `libRNSVG.a` into the Link Binary With Libraries section (located in Build Phases which may be found at the top of the XCode window)\n\n###### CocoaPods\n\nAlternatively, you can use [CocoaPods](https://cocoapods.org/) to manage your native (Objective-C and Swift) dependencies:\n\n1. Add RNSVG to your Podfile (with RN 0.60+ autolinking, this is not needed)\n\n```ruby\npod 'RNSVG', :path =\u003e '../node_modules/react-native-svg'\n```\n\nIf `cocoapods` is used and if error `RNSVGImage.m:12:9: 'React/RCTImageLoader.h' file not found` occurs:\n\nAdd the following entry in Podfile:\n\n```ruby\n    pod 'React', :path =\u003e '../node_modules/react-native', :subspecs =\u003e [\n        [...]\n        'RCTImage', # \u003c-- Add RCTImage\n    ]\n```\n\nand run `pod install` from `ios` folder\n\n### Troubleshooting\n\n#### Problems with Proguard\n\nWhen Proguard is enabled (which it is by default for Android release builds), it causes runtime error.\nTo avoid this, add an exception to `android/app/proguard-rules.pro`:\n\n```bash\n-keep public class com.horcrux.svg.** {*;}\n```\n\nIf you have build errors, then it might be caused by caching issues, please try:\n\n```bash\nwatchman watch-del-all\nrm -fr $TMPDIR/react-*\nreact-native start --reset-cache\n\nOr,\n\nrm -rf node_modules\nyarn\nreact-native start --reset-cache\n```\n\n#### Unexpected behavior\n\nIf you have unexpected behavior, please create a clean project with the latest versions of react-native and react-native-svg\n\n```bash\nreact-native init CleanProject\ncd CleanProject/\nyarn add react-native-svg\ncd ios \u0026\u0026 pod install \u0026\u0026 cd ..\n```\n\nMake a reproduction of the problem in `App.js`\n\n```bash\nreact-native run-ios\nreact-native run-android\n```\n\n# Opening issues\n\nVerify that it is still an issue with the latest version as specified in the previous step. If so, open a new issue, include the entire `App.js` file, specify what platforms you've tested, and the results of running this command:\n\n```bash\nreact-native info\n```\n\nIf you suspect that you've found a spec conformance bug, then you can test using your component in a react-native-web project by forking this codesandbox, to see how different browsers render the same content: \u003chttps://codesandbox.io/s/pypn6mn3y7\u003e If any evergreen browser with significant userbase or other svg user agent renders some svg content better, or supports more of the svg and related specs, please open an issue asap.\n\n### Usage\n\nHere's a simple example. To render output like this:\n\n![SVG example](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/svg.png)\n\nUse the following code:\n\n```jsx\nimport Svg, {\n  Circle,\n  Ellipse,\n  G,\n  Text,\n  TSpan,\n  TextPath,\n  Path,\n  Polygon,\n  Polyline,\n  Line,\n  Rect,\n  Use,\n  Image,\n  Symbol,\n  Defs,\n  LinearGradient,\n  RadialGradient,\n  Stop,\n  ClipPath,\n  Pattern,\n  Mask,\n} from 'react-native-svg';\n\nimport React from 'react';\nimport { View, StyleSheet } from 'react-native';\n\nexport default class SvgExample extends React.Component {\n  render() {\n    return (\n      \u003cView\n        style={[\n          StyleSheet.absoluteFill,\n          { alignItems: 'center', justifyContent: 'center' },\n        ]}\n      \u003e\n        \u003cSvg height=\"50%\" width=\"50%\" viewBox=\"0 0 100 100\"\u003e\n          \u003cCircle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"45\"\n            stroke=\"blue\"\n            strokeWidth=\"2.5\"\n            fill=\"green\"\n          /\u003e\n          \u003cRect\n            x=\"15\"\n            y=\"15\"\n            width=\"70\"\n            height=\"70\"\n            stroke=\"red\"\n            strokeWidth=\"2\"\n            fill=\"yellow\"\n          /\u003e\n        \u003c/Svg\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n[Try this on Snack](https://snack.expo.io/@msand/react-native-svg-example)\n\n### Use with content loaded from uri\n\n```jsx\nimport * as React from 'react';\nimport { SvgUri } from 'react-native-svg';\n\nexport default () =\u003e (\n  \u003cSvgUri\n    width=\"100%\"\n    height=\"100%\"\n    uri=\"http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg\"\n  /\u003e\n);\n```\n\n#### CSS Support\n\nIf remote SVG file contains CSS in `\u003cstyle\u003e` element, use `SvgCssUri`:\n\n```jsx\nimport * as React from 'react';\nimport { SvgCssUri } from 'react-native-svg';\n\nexport default () =\u003e (\n  \u003cSvgCssUri\n    width=\"100%\"\n    height=\"100%\"\n    uri=\"http://thenewcode.com/assets/svg/accessibility.svg\"\n  /\u003e\n);\n```\n\n### Use with svg files\n\nTry [react-native-svg-transformer](https://github.com/kristerkari/react-native-svg-transformer) to get compile time conversion and cached transformations.\n\u003chttps://github.com/kristerkari/react-native-svg-transformer#installation-and-configuration\u003e\n\u003chttps://github.com/kristerkari/react-native-svg-transformer#for-react-native-v057-or-newer--expo-sdk-v3100-or-newer\u003e\n\n`metro.config.js`\n\n```js\nconst { getDefaultConfig } = require('metro-config');\n\nmodule.exports = (async () =\u003e {\n  const {\n    resolver: { sourceExts, assetExts },\n  } = await getDefaultConfig();\n  return {\n    transformer: {\n      babelTransformerPath: require.resolve('react-native-svg-transformer'),\n    },\n    resolver: {\n      assetExts: assetExts.filter(ext =\u003e ext !== 'svg'),\n      sourceExts: [...sourceExts, 'svg'],\n    },\n  };\n})();\n```\n\nImport your .svg file inside a React component:\n\n```jsx\nimport Logo from './logo.svg';\n```\n\nYou can then use your image as a component:\n\n```jsx\n\u003cLogo width={120} height={40} /\u003e\n```\n\nAlternatively, you can use SvgXml with [babel-plugin-inline-import](https://github.com/credcollective/babel-plugin-inline-import/), but with transforms done at run-time.\n\n.babelrc\n\n```json\n{\n  \"presets\": [\"module:metro-react-native-babel-preset\"],\n  \"plugins\": [\n    [\n      \"babel-plugin-inline-import\",\n      {\n        \"extensions\": [\".svg\"]\n      }\n    ]\n  ]\n}\n```\n\nApp.js\n\n```jsx\nimport * as React from 'react';\nimport { SvgXml } from 'react-native-svg';\nimport testSvg from './test.svg';\nexport default () =\u003e \u003cSvgXml width=\"200\" height=\"200\" xml={testSvg} /\u003e;\n```\n\n### Use with xml strings\n\n```jsx\nimport * as React from 'react';\nimport { SvgXml } from 'react-native-svg';\n\nconst xml = `\n  \u003csvg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"\u003e\n    \u003cpath\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      fill=\"url(#gradient)\"\n      d=\"M4 0C1.79086 0 0 1.79086 0 4V28C0 30.2091 1.79086 32 4 32H28C30.2091 32 32 30.2091 32 28V4C32 1.79086 30.2091 0 28 0H4ZM17 6C17 5.44772 17.4477 5 18 5H20C20.5523 5 21 5.44772 21 6V25C21 25.5523 20.5523 26 20 26H18C17.4477 26 17 25.5523 17 25V6ZM12 11C11.4477 11 11 11.4477 11 12V25C11 25.5523 11.4477 26 12 26H14C14.5523 26 15 25.5523 15 25V12C15 11.4477 14.5523 11 14 11H12ZM6 18C5.44772 18 5 18.4477 5 19V25C5 25.5523 5.44772 26 6 26H8C8.55228 26 9 25.5523 9 25V19C9 18.4477 8.55228 18 8 18H6ZM24 14C23.4477 14 23 14.4477 23 15V25C23 25.5523 23.4477 26 24 26H26C26.5523 26 27 25.5523 27 25V15C27 14.4477 26.5523 14 26 14H24Z\"\n    /\u003e\n    \u003cdefs\u003e\n      \u003clinearGradient\n        id=\"gradient\"\n        x1=\"0\"\n        y1=\"0\"\n        x2=\"8.46631\"\n        y2=\"37.3364\"\n        gradient-units=\"userSpaceOnUse\"\u003e\n        \u003cstop offset=\"0\" stop-color=\"#FEA267\" /\u003e\n        \u003cstop offset=\"1\" stop-color=\"#E75A4C\" /\u003e\n      \u003c/linearGradient\u003e\n    \u003c/defs\u003e\n  \u003c/svg\u003e\n`;\n\nexport default () =\u003e \u003cSvgXml xml={xml} width=\"100%\" height=\"100%\" /\u003e;\n```\n\n#### CSS support\n\nIf xml string contains CSS in `\u003cstyle\u003e` element, use `SvgCss`:\n\n```jsx\nimport * as React from 'react';\nimport { SvgCss } from 'react-native-svg';\n\nconst xml = `\n  \u003csvg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"\u003e\n    \u003cstyle\u003e\n      .red {\n        fill: #ff0000;\n      }\n    \u003c/style\u003e\n    \u003crect class=\"red\" x=\"0\" y=\"0\" width=\"32\" height=\"32\" /\u003e\n  \u003c/svg\u003e\n`;\n\nexport default () =\u003e \u003cSvgCss xml={xml} width=\"100%\" height=\"100%\" /\u003e;\n```\n\n### Common props:\n\n| Name             | Default  | Description                                                                                                                                                            |\n| ---------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| fill             | '#000'   | The fill prop refers to the color inside the shape.                                                                                                                    |\n| fillOpacity      | 1        | This prop specifies the opacity of the color or the content the current object is filled with.                                                                         |\n| fillRule         | nonzero  | The fillRule prop determines what side of a path is inside a shape, which determines how fill will paint the shape, can be `nonzero` or `evenodd`                      |\n| stroke           | 'none'   | The stroke prop controls how the outline of a shape appears.                                                                                                           |\n| strokeWidth      | 1        | The strokeWidth prop specifies the width of the outline on the current object.                                                                                         |\n| strokeOpacity    | 1        | The strokeOpacity prop specifies the opacity of the outline on the current object.                                                                                     |\n| strokeLinecap    | 'square' | The strokeLinecap prop specifies the shape to be used at the end of open subpaths when they are stroked. Can be either `'butt'`, `'square'` or `'round'`.              |\n| strokeLinejoin   | 'miter'  | The strokeLinejoin prop specifies the shape to be used at the corners of paths or basic shapes when they are stroked. Can be either `'miter'`, `'bevel'` or `'round'`. |\n| strokeDasharray  | []       | The strokeDasharray prop controls the pattern of dashes and gaps used to stroke paths.                                                                                 |\n| strokeDashoffset | null     | The strokeDashoffset prop specifies the distance into the dash pattern to start the dash.                                                                              |\n| x                | 0        | Translate distance on x-axis.                                                                                                                                          |\n| y                | 0        | Translate distance on y-axis.                                                                                                                                          |\n| rotation         | 0        | Rotation degree value on the current object.                                                                                                                           |\n| scale            | 1        | Scale value on the current object.                                                                                                                                     |\n| origin           | 0, 0     | Transform origin coordinates for the current object.                                                                                                                   |\n| originX          | 0        | Transform originX coordinates for the current object.                                                                                                                  |\n| originY          | 0        | Transform originY coordinates for the current object.                                                                                                                  |\n\n### Supported elements:\n\n#### Svg\n\n```jsx\n\u003cSvg height=\"100\" width=\"100\"\u003e\n  \u003cRect x=\"0\" y=\"0\" width=\"100\" height=\"100\" fill=\"black\" /\u003e\n  \u003cCircle cx=\"50\" cy=\"50\" r=\"30\" fill=\"yellow\" /\u003e\n  \u003cCircle cx=\"40\" cy=\"40\" r=\"4\" fill=\"black\" /\u003e\n  \u003cCircle cx=\"60\" cy=\"40\" r=\"4\" fill=\"black\" /\u003e\n  \u003cPath d=\"M 40 60 A 10 10 0 0 0 60 60\" stroke=\"black\" /\u003e\n\u003c/Svg\u003e\n```\n\nColors set in the Svg element are inherited by its children:\n\n```jsx\n\u003cSvg\n  width=\"130\"\n  height=\"130\"\n  fill=\"blue\"\n  stroke=\"red\"\n  color=\"green\"\n  viewBox=\"-16 -16 544 544\"\n\u003e\n  \u003cPath\n    d=\"M318.37,85.45L422.53,190.11,158.89,455,54.79,350.38ZM501.56,60.2L455.11,13.53a45.93,45.93,0,0,0-65.11,0L345.51,58.24,449.66,162.9l51.9-52.15A35.8,35.8,0,0,0,501.56,60.2ZM0.29,497.49a11.88,11.88,0,0,0,14.34,14.17l116.06-28.28L26.59,378.72Z\"\n    strokeWidth=\"32\"\n  /\u003e\n  \u003cPath d=\"M0,0L512,512\" stroke=\"currentColor\" strokeWidth=\"32\" /\u003e\n\u003c/Svg\u003e\n```\n\n![Pencil](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/pencil.png)\n\nCode explanation:\n\n- The fill prop defines the color inside the object.\n- The stroke prop defines the color of the line drawn around the object.\n- The color prop is a bit special in the sense that it won't color anything by itself, but define a kind of color variable that can be used by children elements. In this example we're defining a \"green\" color in the Svg element and using it in the second Path element via stroke=\"currentColor\". The \"currentColor\" is what refers to that \"green\" value, and it can be used in other props that accept colors too, e.g. fill=\"currentColor\".\n\n#### Rect\n\nThe \u003cRect\u003e element is used to create a rectangle and variations of a rectangle shape:\n\n```jsx\n\u003cSvg width=\"200\" height=\"60\"\u003e\n  \u003cRect\n    x=\"25\"\n    y=\"5\"\n    width=\"150\"\n    height=\"50\"\n    fill=\"rgb(0,0,255)\"\n    strokeWidth=\"3\"\n    stroke=\"rgb(0,0,0)\"\n  /\u003e\n\u003c/Svg\u003e\n```\n\n![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/rect.png)\n\nCode explanation:\n\n- The width and height props of the \u003cRect\u003e element define the height and the width of the rectangle.\n- The x prop defines the left position of the rectangle (e.g. x=\"25\" places the rectangle 25 px from the left margin).\n- The y prop defines the top position of the rectangle (e.g. y=\"5\" places the rectangle 5 px from the top margin).\n\n#### Circle\n\nThe \u003cCircle\u003e element is used to create a circle:\n\n```jsx\n\u003cSvg height=\"100\" width=\"100\"\u003e\n  \u003cCircle cx=\"50\" cy=\"50\" r=\"50\" fill=\"pink\" /\u003e\n\u003c/Svg\u003e\n```\n\n![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/circle.png)\n\nCode explanation:\n\n- The cx and cy props define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0,0)\n- The r prop defines the radius of the circle\n\n#### Ellipse\n\nThe \u003cEllipse\u003e element is used to create an ellipse.\n\nAn ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.\n\n```jsx\n\u003cSvg height=\"100\" width=\"110\"\u003e\n  \u003cEllipse\n    cx=\"55\"\n    cy=\"55\"\n    rx=\"50\"\n    ry=\"30\"\n    stroke=\"purple\"\n    strokeWidth=\"2\"\n    fill=\"yellow\"\n  /\u003e\n\u003c/Svg\u003e\n```\n\n![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/ellipse.png)\n\nCode explanation:\n\n- The cx prop defines the x coordinate of the center of the ellipse\n- The cy prop defines the y coordinate of the center of the ellipse\n- The rx prop defines the horizontal radius\n- The ry prop defines the vertical radius\n\n#### Line\n\nThe \u003cLine\u003e element is an SVG basic shape, used to create a line connecting two points.\n\n```jsx\n\u003cSvg height=\"100\" width=\"100\"\u003e\n  \u003cLine x1=\"0\" y1=\"0\" x2=\"100\" y2=\"100\" stroke=\"red\" strokeWidth=\"2\" /\u003e\n\u003c/Svg\u003e\n```\n\n![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/line.png)\n\nCode explanation:\n\n- The x1 prop defines the start of the line on the x-axis.\n- The y1 prop defines the start of the line on the y-axis.\n- The x2 prop defines the end of the line on the x-axis.\n- The y2 prop defines the end of the line on the y-axis.\n\n#### Polygon\n\nThe \u003cPolygon\u003e element is used to create a graphic that contains at least three sides. Polygons are made of straight lines, and the shape is \"closed\" (all the lines connect up).\n\n```jsx\n\u003cSvg height=\"100\" width=\"100\"\u003e\n  \u003cPolygon\n    points=\"40,5 70,80 25,95\"\n    fill=\"lime\"\n    stroke=\"purple\"\n    strokeWidth=\"1\"\n  /\u003e\n\u003c/Svg\u003e\n```\n\n![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/polygon.png)\n\nCode explanation:\n\n- The points prop defines the x and y coordinates for each corner of the polygon\n\n#### Polyline\n\nThe \u003cPolyline\u003e element is used to create any shape that consists of only straight lines:\n\n```jsx\n\u003cSvg height=\"100\" width=\"100\"\u003e\n  \u003cPolyline\n    points=\"10,10 20,12 30,20 40,60 60,70 95,90\"\n    fill=\"none\"\n    stroke=\"black\"\n    strokeWidth=\"3\"\n  /\u003e\n\u003c/Svg\u003e\n```\n\n![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/polyline.png)\n\nCode explanation:\n\n- The points prop defines the x and y coordinates for each point of the polyline\n\n#### Path\n\nThe \u003cPath\u003e element is used to define a path.\n\nThe following commands are available for path data:\n\n- M = moveto\n- L = lineto\n- H = horizontal lineto\n- V = vertical lineto\n- C = curveto\n- S = smooth curveto\n- Q = quadratic Bézier curve\n- T = smooth quadratic Bézier curveto\n- A = elliptical Arc\n- Z = closepath\n\n`Note:` All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned. See [Path document of SVG](https://www.w3.org/TR/SVG/paths.html) to know parameters for each command.\n\n```jsx\n\u003cSvg height=\"100\" width=\"100\"\u003e\n  \u003cPath\n    d=\"M25 10 L98 65 L70 25 L16 77 L11 30 L0 4 L90 50 L50 10 L11 22 L77 95 L20 25\"\n    fill=\"none\"\n    stroke=\"red\"\n  /\u003e\n\u003c/Svg\u003e\n```\n\n![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/path.png)\n\n#### Text\n\nThe \u003cText\u003e element is used to define text.\n\n```jsx\n\u003cSvg height=\"60\" width=\"200\"\u003e\n  \u003cText\n    fill=\"none\"\n    stroke=\"purple\"\n    fontSize=\"20\"\n    fontWeight=\"bold\"\n    x=\"100\"\n    y=\"20\"\n    textAnchor=\"middle\"\n  \u003e\n    STROKED TEXT\n  \u003c/Text\u003e\n\u003c/Svg\u003e\n```\n\n![Text](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/text.png)\n\n#### TSpan\n\nThe \u003cTSpan\u003e element is used to draw multiple lines of text in SVG. Rather than having to position each line of text absolutely, the \u003cTSpan\u003e element makes it possible to position a line of text relatively to the previous line of text.\n\n```jsx\n\u003cSvg height=\"160\" width=\"200\"\u003e\n  \u003cText y=\"20\" dx=\"5 5\"\u003e\n    \u003cTSpan x=\"10\"\u003etspan line 1\u003c/TSpan\u003e\n    \u003cTSpan x=\"10\" dy=\"15\"\u003e\n      tspan line 2\n    \u003c/TSpan\u003e\n    \u003cTSpan x=\"10\" dx=\"10\" dy=\"15\"\u003e\n      tspan line 3\n    \u003c/TSpan\u003e\n  \u003c/Text\u003e\n  \u003cText x=\"10\" y=\"60\" fill=\"red\" fontSize=\"14\"\u003e\n    \u003cTSpan dy=\"5 10 20\"\u003e12345\u003c/TSpan\u003e\n    \u003cTSpan fill=\"blue\" dy=\"15\" dx=\"0 5 5\"\u003e\n      \u003cTSpan\u003e6\u003c/TSpan\u003e\n      \u003cTSpan\u003e7\u003c/TSpan\u003e\n    \u003c/TSpan\u003e\n    \u003cTSpan dx=\"0 10 20\" dy=\"0 20\" fontWeight=\"bold\" fontSize=\"12\"\u003e\n      89a\n    \u003c/TSpan\u003e\n  \u003c/Text\u003e\n  \u003cText y=\"140\" dx=\"0 5 5\" dy=\"0 -5 -5\"\u003e\n    delta on text\n  \u003c/Text\u003e\n\u003c/Svg\u003e\n```\n\n![TSpan](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/tspan.png)\n\n#### TextPath\n\nIn addition to text drawn in a straight line, SVG also includes the ability to place text along the shape of a \u003cPath\u003e element. To specify that a block of text is to be rendered along the shape of a \u003cPath\u003e, include the given text within a \u003cTextPath\u003e element which includes an href attribute with a reference to a \u003cPath\u003e element.\n\n```jsx\n\u003cSvg height=\"100\" width=\"200\"\u003e\n  \u003cDefs\u003e\n    \u003cPath id=\"path\" d={path} /\u003e\n  \u003c/Defs\u003e\n  \u003cG y=\"20\"\u003e\n    \u003cText fill=\"blue\"\u003e\n      \u003cTextPath href=\"#path\" startOffset=\"-10%\"\u003e\n        We go up and down,\n        \u003cTSpan fill=\"red\" dy=\"5,5,5\"\u003e\n          then up again\n        \u003c/TSpan\u003e\n      \u003c/TextPath\u003e\n    \u003c/Text\u003e\n    \u003cPath d={path} fill=\"none\" stroke=\"red\" strokeWidth=\"1\" /\u003e\n  \u003c/G\u003e\n\u003c/Svg\u003e\n```\n\n![TextPath](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/text-path.png)\n\n#### G\n\nThe \u003cG\u003e element is a container used to group other SVG elements. Transformations applied to the g element are performed on all of its child elements, and any of its props are inherited by its child elements. It can also group multiple elements to be referenced later with the [\u0026lt;Use /\u0026gt;](#use) element.\n\n```jsx\n\u003cSvg height=\"100\" width=\"200\"\u003e\n  \u003cG rotation=\"50\" origin=\"100, 50\"\u003e\n    \u003cLine x1=\"60\" y1=\"10\" x2=\"140\" y2=\"10\" stroke=\"#060\" /\u003e\n\n    \u003cRect x=\"60\" y=\"20\" height=\"50\" width=\"80\" stroke=\"#060\" fill=\"#060\" /\u003e\n\n    \u003cText x=\"100\" y=\"75\" stroke=\"#600\" fill=\"#600\" textAnchor=\"middle\"\u003e\n      Text grouped with shapes\n    \u003c/Text\u003e\n  \u003c/G\u003e\n\u003c/Svg\u003e\n```\n\n![G](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/g.png)\n\n#### Use\n\nThe \u003cUse\u003e element can reuse an SVG shape from elsewhere in the SVG document, including \u003cG\u003e elements and \u003cSymbol\u003e elements. The reused shape can be defined inside the [\u0026lt;Defs\u0026gt;](#defs) element (which makes the shape invisible until used) or outside.\n\n```jsx\n\u003cSvg height=\"100\" width=\"300\"\u003e\n  \u003cDefs\u003e\n    \u003cG id=\"shape\"\u003e\n      \u003cG\u003e\n        \u003cCircle cx=\"50\" cy=\"50\" r=\"50\" /\u003e\n        \u003cRect x=\"50\" y=\"50\" width=\"50\" height=\"50\" /\u003e\n        \u003cCircle cx=\"50\" cy=\"50\" r=\"5\" fill=\"blue\" /\u003e\n      \u003c/G\u003e\n    \u003c/G\u003e\n  \u003c/Defs\u003e\n  \u003cUse href=\"#shape\" x=\"20\" y=\"0\" /\u003e\n  \u003cUse href=\"#shape\" x=\"170\" y=\"0\" /\u003e\n\u003c/Svg\u003e\n```\n\nThis example shows a \u003cG\u003e element defined inside a [\u0026lt;Defs\u0026gt;](#defs) element. This makes the \u003cG\u003e invisible unless referenced by a \u003cUse\u003e element.\n\nBefore the \u003cG\u003e element can be referenced, it must have an ID set on it via its id prop. The \u003cUse\u003e element references the \u003cG\u003e element via its `href` prop. Notice the # in front of the ID in the prop value.\n\nThe \u003cUse\u003e element specifies where to show the reused shapes via its x and y props. Notice that the shapes inside the \u003cG\u003e element are located at 0,0. That is done because their position is added to the position specified in the \u003cUse\u003e element.\n\n![use](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/use.png)\n\n#### Symbol\n\nThe SVG \u003cSymbol\u003e element is used to define reusable symbols. The shapes nested inside a \u003cSymbol\u003e are not displayed unless referenced by a \u003cUse\u003e element.\n\n```jsx\n\u003cSvg height=\"150\" width=\"110\"\u003e\n  \u003cSymbol id=\"symbol\" viewBox=\"0 0 150 110\" width=\"100\" height=\"50\"\u003e\n    \u003cCircle cx=\"50\" cy=\"50\" r=\"40\" strokeWidth=\"8\" stroke=\"red\" fill=\"red\" /\u003e\n    \u003cCircle\n      cx=\"90\"\n      cy=\"60\"\n      r=\"40\"\n      strokeWidth=\"8\"\n      stroke=\"green\"\n      fill=\"white\"\n    /\u003e\n  \u003c/Symbol\u003e\n\n  \u003cUse href=\"#symbol\" x=\"0\" y=\"0\" /\u003e\n  \u003cUse href=\"#symbol\" x=\"0\" y=\"50\" width=\"75\" height=\"38\" /\u003e\n  \u003cUse href=\"#symbol\" x=\"0\" y=\"100\" width=\"50\" height=\"25\" /\u003e\n\u003c/Svg\u003e\n```\n\n![Symbol](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/symbol.png)\n\n#### Defs\n\nThe \u003cDefs\u003e element is used to embed definitions that can be reused inside an SVG image. For instance, you can group SVG shapes together and reuse them as a single shape.\n\n#### Image\n\nThe \u003cImage\u003e element allows a raster image to be included in an Svg component.\n\n```jsx\n\u003cSvg height=\"100\" width=\"100\"\u003e\n  \u003cDefs\u003e\n    \u003cClipPath id=\"clip\"\u003e\n      \u003cCircle cx=\"50%\" cy=\"50%\" r=\"40%\" /\u003e\n    \u003c/ClipPath\u003e\n  \u003c/Defs\u003e\n  \u003cRect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"red\" /\u003e\n  \u003cRect x=\"5%\" y=\"5%\" width=\"50%\" height=\"90%\" /\u003e\n\n  \u003cImage\n    x=\"5%\"\n    y=\"5%\"\n    width=\"50%\"\n    height=\"90%\"\n    preserveAspectRatio=\"xMidYMid slice\"\n    opacity=\"0.5\"\n    href={require('../image.jpg')}\n    clipPath=\"url(#clip)\"\n  /\u003e\n  \u003cText\n    x=\"50\"\n    y=\"50\"\n    textAnchor=\"middle\"\n    fontWeight=\"bold\"\n    fontSize=\"16\"\n    fill=\"blue\"\n  \u003e\n    HOGWARTS\n  \u003c/Text\u003e\n\u003c/Svg\u003e\n```\n\n![Image](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/image.png)\n\n#### ClipPath\n\nThe \u003cClipPath\u003e SVG element defines a clipping path. A clipping path is used/referenced using the clipPath property\n\n```jsx\n\u003cSvg height=\"100\" width=\"100\"\u003e\n  \u003cDefs\u003e\n    \u003cRadialGradient\n      id=\"grad\"\n      cx=\"50%\"\n      cy=\"50%\"\n      rx=\"50%\"\n      ry=\"50%\"\n      fx=\"50%\"\n      fy=\"50%\"\n      gradientUnits=\"userSpaceOnUse\"\n    \u003e\n      \u003cStop offset=\"0%\" stopColor=\"#ff0\" stopOpacity=\"1\" /\u003e\n      \u003cStop offset=\"100%\" stopColor=\"#00f\" stopOpacity=\"1\" /\u003e\n    \u003c/RadialGradient\u003e\n    \u003cClipPath id=\"clip\"\u003e\n      \u003cG scale=\"0.9\" x=\"10\"\u003e\n        \u003cCircle cx=\"30\" cy=\"30\" r=\"20\" /\u003e\n        \u003cEllipse cx=\"60\" cy=\"70\" rx=\"20\" ry=\"10\" /\u003e\n        \u003cRect x=\"65\" y=\"15\" width=\"30\" height=\"30\" /\u003e\n        \u003cPolygon points=\"20,60 20,80 50,70\" /\u003e\n        \u003cText\n          x=\"50\"\n          y=\"30\"\n          fontSize=\"32\"\n          fontWeight=\"bold\"\n          textAnchor=\"middle\"\n          scale=\"1.2\"\n        \u003e\n          Q\n        \u003c/Text\u003e\n      \u003c/G\u003e\n    \u003c/ClipPath\u003e\n  \u003c/Defs\u003e\n  \u003cRect\n    x=\"0\"\n    y=\"0\"\n    width=\"100\"\n    height=\"100\"\n    fill=\"url(#grad)\"\n    clipPath=\"url(#clip)\"\n  /\u003e\n\u003c/Svg\u003e\n```\n\n![ClipPath](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/clip-path.png)\n\n#### LinearGradient\n\nThe \u003cLinearGradient\u003e element is used to define a linear gradient.\nThe \u003cLinearGradient\u003e element must be nested within a [\u0026lt;Defs\u0026gt;](#defs) tag. The [\u0026lt;Defs\u0026gt;](#defs) tag is short for definitions and contains definition of special elements (such as gradients).\n\nLinear gradients can be defined as horizontal, vertical or angular gradients:\n\n- Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ\n- Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ\n- Angular gradients are created when x1 and x2 differ and y1 and y2 differ\n\n```jsx\n\u003cSvg height=\"150\" width=\"300\"\u003e\n  \u003cDefs\u003e\n    \u003cLinearGradient id=\"grad\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\"\u003e\n      \u003cStop offset=\"0\" stopColor=\"#FFD080\" stopOpacity=\"1\" /\u003e\n      \u003cStop offset=\"1\" stopColor=\"red\" stopOpacity=\"1\" /\u003e\n    \u003c/LinearGradient\u003e\n  \u003c/Defs\u003e\n  \u003cEllipse cx=\"150\" cy=\"75\" rx=\"85\" ry=\"55\" fill=\"url(#grad)\" /\u003e\n\u003c/Svg\u003e\n```\n\nCode explanation:\n\n- The id prop of the \u003cLinearGradient\u003e tag defines a unique name for the gradient\n- The x1, x2, y1,y2 props of the \u003cLinearGradient\u003e tag define the start and end position of the gradient\n- The color range for a gradient can be composed of two or more colors. Each color is specified with a \u003cStop\u003e tag. The offset prop is used to define where the gradient color begin and end\n- The fill prop links the ellipse element to the gradient\n\n![LinearGradient](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/lineargradient.png)\n\n_NOTICE:_\nLinearGradient also supports percentage as prop:\n\n```jsx\n\u003cLinearGradient id=\"grad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\"\u003e\n  \u003cStop offset=\"0%\" stopColor=\"rgb(255,255,0)\" stopOpacity=\"0\" /\u003e\n  \u003cStop offset=\"100%\" stopColor=\"red\" stopOpacity=\"1\" /\u003e\n\u003c/LinearGradient\u003e\n```\n\nThis result is same as the example before. But it's recommend to use exact number instead; it has performance advantages over using percentages.\n\n#### RadialGradient\n\nThe \u003cRadialGradient\u003e element is used to define a radial gradient. The \u003cRadialGradient\u003e element must be nested within a [\u0026lt;Defs\u0026gt;](#defs) tag. The [\u0026lt;Defs\u0026gt;](#defs) tag is short for definitions and contains definition of special elements (such as gradients).\n\n```jsx\n\u003cSvg height=\"150\" width=\"300\"\u003e\n  \u003cDefs\u003e\n    \u003cRadialGradient\n      id=\"grad\"\n      cx=\"150\"\n      cy=\"75\"\n      rx=\"85\"\n      ry=\"55\"\n      fx=\"150\"\n      fy=\"75\"\n      gradientUnits=\"userSpaceOnUse\"\n    \u003e\n      \u003cStop offset=\"0\" stopColor=\"#ff0\" stopOpacity=\"1\" /\u003e\n      \u003cStop offset=\"1\" stopColor=\"#83a\" stopOpacity=\"1\" /\u003e\n    \u003c/RadialGradient\u003e\n  \u003c/Defs\u003e\n  \u003cEllipse cx=\"150\" cy=\"75\" rx=\"85\" ry=\"55\" fill=\"url(#grad)\" /\u003e\n\u003c/Svg\u003e\n```\n\nCode explanation:\n\n- The id prop of the \u003cradialGradient\u003e tag defines a unique name for the gradient\n- The cx, cy and r props define the outermost circle and the fx and fy define the innermost circle\n- The color range for a gradient can be composed of two or more colors. Each color is specified with a \u003cstop\u003e tag. The offset prop is used to define where the gradient color begin and end\n- The fill prop links the ellipse element to the gradient\n\n![RadialGradient](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/radialgradient.png)\n\n#### Mask\n\nIn SVG, you can specify that any other graphics object or ‘G’ element can be used as an alpha mask for compositing the current object into the background.\n\nA mask is defined with a ‘Mask’ element. A mask is used/referenced using the ‘mask’ property.\n\nA ‘Mask’ can contain any graphical elements or container elements such as a ‘G’.\n\nThe \u003cMask\u003e element must be nested within a [\u0026lt;Defs\u0026gt;](#defs) tag. The [\u0026lt;Defs\u0026gt;](#defs) tag is short for definitions and contains definition of special elements (such as gradients).\n\n\u003chttps://www.w3.org/TR/SVG11/images/masking/mask01.svg\u003e\n\n```jsx\n\u003cSvg width=\"100%\" height=\"100%\" viewBox=\"0 0 800 300\"\u003e\n  \u003cDefs\u003e\n    \u003cLinearGradient\n      id=\"Gradient\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"0\"\n      y1=\"0\"\n      x2=\"800\"\n      y2=\"0\"\n    \u003e\n      \u003cStop offset=\"0\" stopColor=\"white\" stopOpacity=\"0\" /\u003e\n      \u003cStop offset=\"1\" stopColor=\"white\" stopOpacity=\"1\" /\u003e\n    \u003c/LinearGradient\u003e\n    \u003cMask\n      id=\"Mask\"\n      maskUnits=\"userSpaceOnUse\"\n      x=\"0\"\n      y=\"0\"\n      width=\"800\"\n      height=\"300\"\n    \u003e\n      \u003cRect x=\"0\" y=\"0\" width=\"800\" height=\"300\" fill=\"url(#Gradient)\" /\u003e\n    \u003c/Mask\u003e\n    \u003cText\n      id=\"Text\"\n      x=\"400\"\n      y=\"200\"\n      fontFamily=\"Verdana\"\n      fontSize=\"100\"\n      textAnchor=\"middle\"\n    \u003e\n      Masked text\n    \u003c/Text\u003e\n  \u003c/Defs\u003e\n  \u003cRect x=\"0\" y=\"0\" width=\"800\" height=\"300\" fill=\"#FF8080\" /\u003e\n  \u003cUse href=\"#Text\" fill=\"blue\" mask=\"url(#Mask)\" /\u003e\n  \u003cUse href=\"#Text\" fill=\"none\" stroke=\"black\" stroke-width=\"2\" /\u003e\n\u003c/Svg\u003e\n```\n\nCode explanation: \u003chttps://www.w3.org/TR/SVG11/masking.html#MaskElement\u003e\n\n![Mask](https://www.w3.org/TR/SVG11/images/masking/mask01.svg)\n\nv10 adds experimental support for using masks together with native elements.\nIf you had native elements inside any Svg root before (which was unsupported),\nThen your content might change appearance when upgrading,\nas e.g. transforms and masks now take effect.\n\n#### Pattern\n\nA pattern is used to fill or stroke an object using a pre-defined graphic object which can be replicated (\"tiled\") at fixed intervals in x and y to cover the areas to be painted. Patterns are defined using a ‘pattern’ element and then referenced by properties ‘fill’ and ‘stroke’ on a given graphics element to indicate that the given element shall be filled or stroked with the referenced pattern.\nThe \u003cPattern\u003e element must be nested within a [\u0026lt;Defs\u0026gt;](#defs) tag. The [\u0026lt;Defs\u0026gt;](#defs) tag is short for definitions and contains definition of special elements (such as gradients).\n\n\u003chttps://www.w3.org/TR/SVG11/images/pservers/pattern01.svg\u003e\n\n```jsx\n\u003cSvg width=\"100%\" height=\"100%\" viewBox=\"0 0 800 400\"\u003e\n  \u003cDefs\u003e\n    \u003cPattern\n      id=\"TrianglePattern\"\n      patternUnits=\"userSpaceOnUse\"\n      x=\"0\"\n      y=\"0\"\n      width=\"100\"\n      height=\"100\"\n      viewBox=\"0 0 10 10\"\n    \u003e\n      \u003cPath d=\"M 0 0 L 7 0 L 3.5 7 z\" fill=\"red\" stroke=\"blue\" /\u003e\n    \u003c/Pattern\u003e\n  \u003c/Defs\u003e\n  \u003cRect fill=\"none\" stroke=\"blue\" x=\"1\" y=\"1\" width=\"798\" height=\"398\" /\u003e\n  \u003cEllipse\n    fill=\"url(#TrianglePattern)\"\n    stroke=\"black\"\n    strokeWidth=\"5\"\n    cx=\"400\"\n    cy=\"200\"\n    rx=\"350\"\n    ry=\"150\"\n  /\u003e\n\u003c/Svg\u003e\n```\n\nCode explanation: \u003chttps://www.w3.org/TR/SVG11/pservers.html#PatternElement\u003e\n\n![Pattern](https://www.w3.org/TR/SVG11/images/pservers/pattern01.svg)\n\n#### Marker\n\nA marker is a symbol which is attached to one or more vertices of ‘path’, ‘line’, ‘polyline’ and ‘polygon’ elements. Typically, markers are used to make arrowheads or polymarkers. Arrowheads can be defined by attaching a marker to the start or end vertices of ‘path’, ‘line’ or ‘polyline’ elements. Polymarkers can be defined by attaching a marker to all vertices of a ‘path’, ‘line’, ‘polyline’ or ‘polygon’ element.\n\nThe graphics for a marker are defined by a ‘marker’ element. To indicate that a particular ‘marker’ element should be rendered at the vertices of a particular ‘path’, ‘line’, ‘polyline’ or ‘polygon’ element, set one or more marker properties (‘marker’, ‘marker-start’, ‘marker-mid’ or ‘marker-end’) to reference the given ‘marker’ element.\n\n\u003chttps://www.w3.org/TR/SVG11/images/painting/marker.svg\u003e\n\n```jsx\n\u003cSvg width=\"400\" height=\"200\" viewBox=\"0 0 4000 2000\"\u003e\n  \u003cDefs\u003e\n    \u003cMarker\n      id=\"Triangle\"\n      viewBox=\"0 0 10 10\"\n      refX=\"0\"\n      refY=\"5\"\n      markerUnits=\"strokeWidth\"\n      markerWidth=\"4\"\n      markerHeight=\"3\"\n      orient=\"auto\"\n    \u003e\n      \u003cPath d=\"M 0 0 L 10 5 L 0 10 z\" /\u003e\n    \u003c/Marker\u003e\n  \u003c/Defs\u003e\n  \u003cRect\n    x=\"10\"\n    y=\"10\"\n    width=\"3980\"\n    height=\"1980\"\n    fill=\"none\"\n    stroke=\"blue\"\n    strokeWidth=\"10\"\n  /\u003e\n  \u003cPath\n    d=\"M 1000 750 L 2000 750 L 2500 1250\"\n    fill=\"none\"\n    stroke=\"black\"\n    strokeWidth=\"100\"\n    markerEnd=\"url(#Triangle)\"\n  /\u003e\n\u003c/Svg\u003e\n```\n\nCode explanation: \u003chttps://www.w3.org/TR/SVG11/painting.html#Markers\u003e\n\n![Marker](https://www.w3.org/TR/SVG11/images/painting/marker.svg)\n\n```jsx\nimport React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { SvgXml } from 'react-native-svg';\n\nconst markerRendering = `\u003csvg xmlns=\"http://www.w3.org/2000/svg\"\n     width=\"275\" height=\"200\" viewBox=\"0 0 100 30\"\u003e\n  \u003cdefs\u003e\n    \u003cmarker id=\"m1\" viewBox=\"0 0 10 10\" refX=\"5\" refY=\"5\"\n     markerWidth=\"8\" markerHeight=\"8\"\u003e\n      \u003ccircle cx=\"5\" cy=\"5\" r=\"5\" fill=\"green\"/\u003e\n    \u003c/marker\u003e\n    \u003cmarker id=\"m2\" viewBox=\"0 0 10 10\" refX=\"5\" refY=\"5\"\n     markerWidth=\"6.5\" markerHeight=\"6.5\"\u003e\n      \u003ccircle cx=\"5\" cy=\"5\" r=\"5\" fill=\"skyblue\" opacity=\"0.9\"/\u003e\n    \u003c/marker\u003e\n    \u003cmarker id=\"m3\" viewBox=\"0 0 10 10\" refX=\"5\" refY=\"5\"\n     markerWidth=\"5\" markerHeight=\"5\"\u003e\n      \u003ccircle cx=\"5\" cy=\"5\" r=\"5\" fill=\"maroon\" opacity=\"0.85\"/\u003e\n    \u003c/marker\u003e\n  \u003c/defs\u003e\n\n  \u003cpath d=\"M10,10 h10 v10 z m20,0 h10 v10 z m20,0 h10 v10 z\"\n  fill=\"none\" stroke=\"black\"\n  marker-start=\"url(#m1)\"\n  marker-mid=\"url(#m2)\"\n  marker-end=\"url(#m3)\"\n  /\u003e\n\u003c/svg\u003e`;\n\nexport default class App extends React.Component {\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cSvgXml xml={markerRendering} /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    backgroundColor: 'white',\n    justifyContent: 'center',\n    alignItems: 'center',\n    flex: 1,\n  },\n});\n```\n\n![MarkerDoubled](https://www.w3.org/TR/SVG2/images/painting/marker-doubled.svg)\n\n```jsx\nimport React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { SvgXml } from 'react-native-svg';\n\nconst markerRendering = `\u003csvg xmlns=\"http://www.w3.org/2000/svg\"\n     width=\"275\" height=\"200\" viewBox=\"0 0 275 200\"\u003e\n  \u003cdefs\u003e\n    \u003cmarker id=\"Triangle\" viewBox=\"0 0 10 10\" refX=\"1\" refY=\"5\"\n            markerUnits=\"strokeWidth\" markerWidth=\"4\" markerHeight=\"3\"\n            orient=\"auto\"\u003e\n      \u003cpath d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"context-stroke\" /\u003e\n    \u003c/marker\u003e\n  \u003c/defs\u003e\n\n  \u003cg fill=\"none\" stroke-width=\"10\" marker-end=\"url(#Triangle)\"\u003e\n    \u003cpath stroke=\"crimson\" d=\"M 100,75 C 125,50 150,50 175,75\" marker-end=\"url(#Triangle)\"/\u003e\n    \u003cpath stroke=\"olivedrab\" d=\"M 175,125 C 150,150 125,150 100,125\" marker-end=\"url(#Triangle)\"/\u003e\n  \u003c/g\u003e\n\u003c/svg\u003e`;\n\nexport default class App extends React.Component {\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cSvgXml xml={markerRendering} /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    backgroundColor: 'white',\n    justifyContent: 'center',\n    alignItems: 'center',\n    flex: 1,\n  },\n});\n```\n\n![MarkerRendering](https://www.w3.org/TR/SVG2/images/painting/marker-rendering.svg)\n\nCode explanation: \u003chttps://www.w3.org/TR/SVG2/painting.html#VertexMarkerProperties\u003e\n\n#### ForeignObject\n\nSVG is designed to be compatible with other XML languages for describing and rendering other types of content. The ‘foreignObject’ element allows for inclusion of elements in a non-SVG namespace which is rendered within a region of the SVG graphic using other user agent processes. The included foreign graphical content is subject to SVG transformations, filters, clipping, masking and compositing.\n\nOne goal for SVG is to provide a mechanism by which other XML language processors can render into an area within an SVG drawing, with those renderings subject to the various transformations and compositing parameters that are currently active at a given point within the SVG content tree. One particular example of this is to provide a frame for XML content styled with CSS or XSL so that dynamically reflowing text (subject to SVG transformations and compositing) could be inserted into the middle of some SVG content.\n\nhttps://svgwg.org/svg2-draft/embedded.html#ForeignObjectElement\nhttps://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement\n\n```jsx\nimport React, { Component } from 'react';\nimport { Text, View, Image } from 'react-native';\nimport {\n  Svg,\n  Defs,\n  LinearGradient,\n  Stop,\n  Mask,\n  Rect,\n  G,\n  Circle,\n  ForeignObject,\n} from 'react-native-svg';\n\nexport default class App extends Component {\n  render() {\n    return (\n      \u003cView style={{ flex: 1, justifyContent: 'center' }}\u003e\n        \u003cSvg height=\"50%\"\u003e\n          \u003cDefs\u003e\n            \u003cLinearGradient\n              id=\"Gradient\"\n              gradientUnits=\"userSpaceOnUse\"\n              x1=\"0\"\n              y1=\"0\"\n              x2=\"800\"\n              y2=\"0\"\n            \u003e\n              \u003cStop offset=\"0\" stopColor=\"white\" stopOpacity=\"0.2\" /\u003e\n              \u003cStop offset=\"1\" stopColor=\"white\" stopOpacity=\"1\" /\u003e\n            \u003c/LinearGradient\u003e\n            \u003cMask\n              id=\"Mask\"\n              maskUnits=\"userSpaceOnUse\"\n              x=\"0\"\n              y=\"0\"\n              width=\"800\"\n              height=\"300\"\n            \u003e\n              \u003cRect\n                x=\"0\"\n                y=\"0\"\n                width=\"800\"\n                height=\"300\"\n                fill=\"url(#Gradient)\"\n              /\u003e\n            \u003c/Mask\u003e\n          \u003c/Defs\u003e\n          \u003cG mask=\"url(#Mask)\"\u003e\n            \u003cCircle cx={50} cy={70} r={65} /\u003e\n            \u003cForeignObject x={50} y={0} width={100} height={100}\u003e\n              \u003cView style={{ width: 200, height: 400, transform: [] }}\u003e\n                \u003cImage\n                  style={{ width: 200, height: 200 }}\n                  source={{\n                    uri: 'https://picsum.photos/200/200',\n                  }}\n                /\u003e\n              \u003c/View\u003e\n            \u003c/ForeignObject\u003e\n            \u003cForeignObject x={55} y={5} width={100} height={100}\u003e\n              \u003cView style={{ width: 200, height: 400, transform: [] }}\u003e\n                \u003cText style={{ color: 'blue' }}\u003eTesting\u003c/Text\u003e\n                \u003cText style={{ color: 'green' }}\u003eTesting2\u003c/Text\u003e\n              \u003c/View\u003e\n            \u003c/ForeignObject\u003e\n          \u003c/G\u003e\n        \u003c/Svg\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n#### Touch Events\n\nTouch events are supported in react-native-svg. These include:\n\n- `disabled`\n- `onPress`\n- `onPressIn`\n- `onPressOut`\n- `onLongPress`\n- `delayPressIn`\n- `delayPressOut`\n- `delayLongPress`\n\nYou can use these events to provide interactivity to your react-native-svg components.\n\n```jsx\n\u003cCircle\n  cx=\"50%\"\n  cy=\"50%\"\n  r=\"38%\"\n  fill=\"red\"\n  onPress={() =\u003e alert('Press on Circle')}\n/\u003e\n```\n\n![TouchEvents](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/touchevents.gif)\n\nFor more examples of touch in action, checkout the [TouchEvents.js examples](https://github.com/magicismight/react-native-svg-example/blob/master/examples/TouchEvents.js).\n\n### Serialize\n\n```jsx\nimport * as React from 'react';\nimport { Platform, StyleSheet, TouchableOpacity } from 'react-native';\nimport { Svg, Rect } from 'react-native-svg';\nimport ReactDOMServer from 'react-dom/server';\n\nconst isWeb = Platform.OS === 'web';\n\nconst childToWeb = child =\u003e {\n  const { type, props } = child;\n  const name = type \u0026\u0026 type.displayName;\n  const webName = name \u0026\u0026 name[0].toLowerCase() + name.slice(1);\n  const Tag = webName ? webName : type;\n  return \u003cTag {...props}\u003e{toWeb(props.children)}\u003c/Tag\u003e;\n};\n\nconst toWeb = children =\u003e React.Children.map(children, childToWeb);\n\nexport default class App extends React.Component {\n  renderSvg() {\n    return (\n      \u003cSvg height=\"100%\" width=\"100%\" style={{ backgroundColor: '#33AAFF' }}\u003e\n        \u003cRect\n          x=\"50\"\n          y=\"50\"\n          width=\"50\"\n          height=\"50\"\n          fill=\"#3399ff\"\n          strokeWidth=\"3\"\n          stroke=\"rgb(0,0,0)\"\n        /\u003e\n      \u003c/Svg\u003e\n    );\n  }\n  serialize = () =\u003e {\n    const element = this.renderSvg();\n    const webJsx = isWeb ? element : toWeb(element);\n    const svgString = ReactDOMServer.renderToStaticMarkup(webJsx);\n    console.log(svgString);\n  };\n  render() {\n    return (\n      \u003cTouchableOpacity style={styles.container} onPress={this.serialize}\u003e\n        {this.renderSvg()}\n      \u003c/TouchableOpacity\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    backgroundColor: '#ecf0f1',\n    padding: 8,\n  },\n});\n```\n\n### Run example:\n\n```bash\n\ngit clone https://github.com/magicismight/react-native-svg-example.git\ncd react-native-svg-example\nyarn\n\n# run Android: react-native run-android\n# run iOS: react-native run-ios\n\n```\n\n### TODO:\n\n1. Filters\n\n### Known issues:\n\n1. Unable to apply focus point of RadialGradient on Android.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoontek%2Freact-native-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzoontek%2Freact-native-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoontek%2Freact-native-svg/lists"}