How to set svg size to fit its content?

Question

the content of my SVG is depending on width/height of device. there are multi elements and I cannot calculate the content of it. now How I can set the width/height if svg depending on the content?

      <Svg
        ref="circleslider"
        width={?}
        height={?}
        style={{ justifyContent: 'center', alignItems: 'center', }}>
           .. my elemetns

updated full code:

return (

  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

    <View style={{ width: '100%', height: '100%', borderRadius: ((width) / 2), justifyContent: 'center', alignItems: 'center' }}
    >

      <Svg
        ref="circleslider"
        width={width}
        height={width}
        style={{ justifyContent: 'center', alignItems: 'center', }}>

      <Circle
          cx={(width) / 2}
          cy={(width) / 2}
          r="140"
          fill="#f9ebea"
          {...this._panResponderTwo.panHandlers}
        />

      <Circle
          cx={(width) / 2}
          cy={(width) / 2}
          r="120"
          fill="#f9e1e1"
          {...this._panResponderTwo.panHandlers}
        />

        <Circle
          cx={(width) / 2}
          cy={(width) / 2}
          r="100"
          fill="#f9dbd9"
          {...this._panResponderTwo.panHandlers}
        />



        <Circle
          cx={(width) / 2}
          cy={(width) / 2}
          r={this.props.diameterCenter}
          fill="#fff"
        />

        {/* <Image
            x={((heightDevice) / 4) - (imageWidth/8)}
            y={((widthDevice) / 4) - (imageWidth/8)}
            r={this.props.diameterCenter}
            width={imageWidth}
            height={imageHeight}
            preserveAspectRatio="xMidYMid slice"
            opacity="0.5"
            style={{ alignSelf: 'center' }}
            href={require('../../../images/ics/home/ic_center.png')}
            clipPath="url(#clip)" /> */}



        <G x={bankingservicesCoord.x - widthHeight} y={bankingservicesCoord.y - widthHeight}
          style={{ justifyContent: 'center', alignItems: 'center' }}>

          {(moveed == 'bankingservices') ?
            (
              <Circle
                r={widthHeight}
                cx={widthHeight}
                cy={widthHeight}
                fill={selectedItemColor}
                stroke={selectedItemColor}
                {...this._panResponderBankingServices.panHandlers}
              />
            )
            :
            (
              <Circle
                r={widthHeight}
                cx={widthHeight}
                cy={widthHeight}
                fill="#fff"
                stroke={selectedItemColor}
                {...this._panResponderBankingServices.panHandlers}
              />
            )
          }

          <Image
            x={imageX}
            y={imageY}
            width={imageWidth}
            height={imageHeight}
            preserveAspectRatio="xMidYMid slice"
            opacity="0.5"
            style={{ alignSelf: 'center' }}
            href={require('../../../images/ics/home/ic_bank.png')}
            clipPath="url(#clip)"
            {...this._panResponderBankingServices.panHandlers} />

        </G>

        <G x={shopsCoord.x - widthHeight} y={shopsCoord.y - widthHeight}>

          {(moveed == 'shops') ?
            (
              <Circle
                r={widthHeight}
                cx={widthHeight}
                cy={widthHeight}
                fill={selectedItemColor}
                stroke={selectedItemColor}
                {...this._panResponderShops.panHandlers}
              />
            )
            :
            (
              <Circle
                r={widthHeight}
                cx={widthHeight}
                cy={widthHeight}
                fill="#fff"
                stroke={selectedItemColor}
                {...this._panResponderShops.panHandlers}
              />
            )
          }


          <Image
            x={imageX}
            y={imageY}
            width={imageWidth}
            height={imageHeight}
            preserveAspectRatio="xMidYMid slice"
            opacity="0.5"
            style={{ alignSelf: 'center' }}
            href={require('../../../images/ics/home/ic_shop.png')}
            clipPath="url(#clip)"
            {...this._panResponderShops.panHandlers} />

        </G>

        <G x={locationsCoord.x - widthHeight} y={locationsCoord.y - widthHeight}>

          {(moveed == 'location') ?
            (
              <Circle
                r={widthHeight}
                cx={widthHeight}
                cy={widthHeight}
                fill={selectedItemColor}
                stroke={selectedItemColor}
                {...this._panResponderLocations.panHandlers}
              />
            )
            :
            (
              <Circle
                r={widthHeight}
                cx={widthHeight}
                cy={widthHeight}
                fill="#fff"
                stroke={selectedItemColor}
                {...this._panResponderLocations.panHandlers}
              />
            )
          }

          <Image
            x={imageX}
            y={imageY}
            width={imageWidth}
            height={imageHeight}
            preserveAspectRatio="xMidYMid slice"
            opacity="0.5"
            style={{ alignSelf: 'center' }}
            href={require('../../../images/ics/home/ic_location.png')}
            clipPath="url(#clip)"
            {...this._panResponderLocations.panHandlers} />

        </G>

        <G x={kasianserviceCoord.x - widthHeight} y={kasianserviceCoord.y - widthHeight}>


          {(moveed == 'kasianservices') ?
            (
              <Circle
                r={widthHeight}
                cx={widthHeight}
                cy={widthHeight}
                fill={selectedItemColor}
                stroke={selectedItemColor}
                {...this._panResponderKasianServices.panHandlers}
              />
            )
            :
            (
              <Circle
                r={widthHeight}
                cx={widthHeight}
                cy={widthHeight}
                fill="#fff"
                stroke={selectedItemColor}
                {...this._panResponderKasianServices.panHandlers}
              />
            )
          }

          <Image
            x={imageX}
            y={imageY}
            width={imageWidth}
            height={imageHeight}
            preserveAspectRatio="xMidYMid slice"
            opacity="0.5"
            style={{ alignSelf: 'center' }}
            href={require('../../../images/ics/home/ic_kasian.png')}
            clipPath="url(#clip)"
            {...this._panResponderKasianServices.panHandlers} />
        </G>


      </Svg>


    </View>


  </View>
)

Answer 1

Just put the height / width of the svg as inline css style within the style attribute:

<Svg
    ref="circleslider"
    style={{ justifyContent: 'center', alignItems: 'center', width: '100px', height: '100px' }}>

Answer 2

Your question is hard to understand. I am going to assume that you want the SVG to scale to fit it's parent view. Is that correct?

If so, you probably want to do something like this:

  <Svg
    ref="circleslider"
    width="100%"
    height="100%"
    viewBox="0 0 {width} {width}">