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!

Resize works with width and height which is you already applied, can you explain more? — Just code
– Just code, Commented Dec 24, 2018 at 8:28

YoshiJaeger · Accepted Answer · 2019-08-03 10:18:18Z

12

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>

answered Aug 3, 2019 at 10:18

YoshiJaeger

1,21012 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Javier Montoya · Accepted Answer · 2024-11-29 20:01:53Z

12

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

import HomeSvg from './assets/HomeSvg';

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

edited Nov 29, 2024 at 20:01

answered Nov 3, 2020 at 15:06

Javier Montoya

2113 silver badges9 bronze badges

1 Comment

Eugen Bondarev Over a year ago

I needed my SVG to stretch and I ended up passing window width. Thanks a lot for the reminder :)

SalsaJJ · Accepted Answer · 2021-10-28 17:04:09Z

3

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).

answered Oct 28, 2021 at 17:04

SalsaJJ

4036 silver badges16 bronze badges

Comments

ShridharBavannawar · Accepted Answer · 2018-12-24 09:56:45Z

1

You can wrap all the <Path /> elements inside a <G /> and scale the <G /> component by calculating the scale factor using Dimensions i.e 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")

answered Dec 24, 2018 at 9:56

ShridharBavannawar

1721 gold badge4 silver badges13 bronze badges

2 Comments

Yasir Over a year ago

Hi, can you please show a better example, I am struggling with this

John Franke Over a year ago

Where does G come from?

Cyrus · Accepted Answer · 2018-12-24 08:29:36Z

0

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!

answered Dec 24, 2018 at 8:29

Cyrus

7011 gold badge8 silver badges22 bronze badges

Collectives™ on Stack Overflow

Cannot resize an SVG image in React Native app

5 Answers 5

Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related