Cannot resize an SVG image in React Native app

Question

I have the following React Native project:

https://snack.expo.io/BkBU8fAlV

where I have the following code:

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

import HomerSvg from './assets/HomerSvg';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone! Save to get a shareable url.
        </Text>
        <View style={{ width: 80, height: 80 }}>
          <HomerSvg />
        </View>
        <Card>
          <AssetExample />
        </Card>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

I display the SVG image through the component: HomerSvg which uses the react-native-svg package.

What I need is to resize somehow the SVG image. On the code above I did a try with no success.

I tried by giving the container view some width and height with no success.

Do you have any idea on how can I achieve that?

Thanks!

Answer 1

This is actually very easy to solve without React Native but SVG itself.

Just set the preserveAspectRatio tag to none .

Example:

<Svg
  width={this.props.width}
  height={this.heights.h1}
  xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 750 352"
  preserveAspectRatio="none">
...
</Svg>

Answer 2

I know this is an old question but maybe we're forgetting the fundamentals here, remember that some imported SVGs can be provided a width and height .

import HomeSvg from './assets/HomeSvg';

<HomeSvg height={20} width={20}/>

Answer 3

You can wrap all the <Path /> elements inside a <G /> and scale the <G /> component by calculating the scale factor using Dimensions ie width and height of the device.

<G transform="scale(scaleFactor) translate(offsetX,offsetY)>
<Path/>
<Path/>
.
.
.
<G/>

where scaleFactor, offsetX and offsetY can be calculated via const { height, width } = Dimensions.get("window")

Answer 4

Unless the SVG's dimensions are based on the containers dimensions, they will not change. Images with set dimensions ignore their parent's dimensions, and you set the dimensions in HomerSvg.js

Hope this helps!

Answer 5

For me the problem was that SVG optimizations removed viewBox .
Try adding viewBox="0 0 width height" prop to the Svg ( width and height being the original dimensions).