SVG to React Native

How to convert SVG for React Native

React Native has no DOM and no built-in SVG renderer, so an SVG cannot be pasted into a native app the way it can into a web page. The convention the ecosystem settled on is react-native-svg: a component per SVG element, drawn with the platform's own graphics APIs. This converter does the translation — every tag is mapped to its capitalised component, <path> to <Path>, <linearGradient> to <LinearGradient>, <g> to <G> — attributes are camelCased (stroke-width to strokeWidth, xlink:href to href), and the import line is generated from the tags your file actually uses, so a two-path icon imports Svg and Path and nothing else. Everything runs in your browser; the file is never uploaded.

The root becomes <Svg> with width and height exposed as props, defaulting to the file's intrinsic size read from its viewBox, and a props spread last so callers can override fill, add accessibility props, or attach anything else react-native-svg accepts.

What cannot come along — and how you find out

A native canvas is not a browser, and the converter is explicit about the difference. CSS does not exist in React Native, so class attributes and inline style strings are dropped — whatever they carried has to become presentation attributes before conversion. DOM event attributes like onclick are dropped too; touch handling in RN belongs on Pressable or on the props react-native-svg itself provides. Elements with no counterpart in the tag map — filter primitives, <style> blocks, foreignObject, SMIL <animate> — are removed along with their contents.

None of this happens silently. Every dropped attribute and element is named in a Dropped on conversion list beside the output, deduplicated, so you can judge whether the loss matters before the component ships. The only things removed without comment are <title>, <desc> and metadata — pure documentation with no rendered effect — and XML plumbing like xmlns declarations, which mean nothing to a native renderer.

Sizing: viewBox stays, width and height become props

The file's viewBox is preserved on the <Svg> — it defines the coordinate system the paths are drawn in — while the exported width and height attributes are replaced by props with the intrinsic size as defaults. That split is what makes the icon scale: render <BoltBadge width={24} height={24} /> and the drawing maps its viewBox onto a 24-point box, crisp at any screen density because it is drawn, not rasterised. Sizes in React Native are density-independent points rather than CSS pixels, but the arithmetic is the same. If the source file's own box is wrong — art off-centre, excess padding — fix it with Resize & viewBox before converting rather than compensating with transforms in the app.

Into the app: install, touch, colour

The component assumes react-native-svg is installed — npm install react-native-svg, plus a pod install on bare iOS projects; Expo ships it as expo install react-native-svg. For taps, wrap the icon in Pressable rather than reaching for per-shape handlers — a 24-point icon is smaller than a comfortable touch target anyway, and the wrapper supplies the padding. For colour, react-native-svg honours fill="currentColor" by resolving it against a color prop on the <Svg>, so an icon prepared with the Color Replacer can be tinted per use site through the spread: <Icon color={theme.text} />. That is the native analogue of the CSS inheritance trick, minus the cascade.

Common problems

• Nothing renders. react-native-svg is not installed or not linked; the import line assumes it. On bare React Native, re-run pods after installing.
• The conversion dropped something you needed. Filters, CSS-driven styling and SMIL animation have no equivalent and are listed as dropped. Effects usually need flattening in a vector editor first; animation is rebuilt natively, typically with Reanimated driving props.
• Text renders in the wrong font. <Text> in react-native-svg uses fonts bundled with the app, found by fontFamily. For logos and wordmarks, sidestep fonts entirely: outline the text with Text to Path before converting.
• The icon is invisible but present. A common cause is a fill that lived in a dropped <style> block or class, leaving paths with no fill of their own. Move colours into attributes — the Color Replacer shows where each colour lives — and reconvert.

When to reach for something else

For the same artwork on web and native, keep the SVG file as the single source of truth and run it through two converters — this one for the app, SVG to JSX for the site — rather than maintaining two hand-edited components. For a photograph or a complex illustration with filters and blend modes, a PNG at 1×/2×/3× via SVG to PNG is often the honest answer: react-native-svg draws geometry well, but effect-heavy files lose their effects and gain nothing from being vector. And prune before porting — the Optimizer collapses editor groups and strips cruft, which directly shrinks the emitted component and its warning list.