SVG height and width

[LincMitch]

I'm using react-primitives-svg to render the same SVG code to both web and sketch:

switch (Platform.OS) {
  case "sketch":
    SvgLib = require("react-primitives-svg/lib/core.sketch");
    break;
  case "web":
    SvgLib = require("react-primitives-svg/lib/core.web");
    break;
  default: // React Native should be able to pick up `core.ios.js` or `core.android.js` according to the platform
    // SvgLib = require("react-primitives-svg");
}

Now the SVG height and width seem to be interpreted differently for Sketch and web.
<Svg viewBox="0 0 200 200" width="200" height="200"> is more like 20/20 on web, but OK in Sketch.
but...
<Svg viewBox="0 0 200 200"> renders 95.61px /.47px in Sketch, but OK on web.

So I can't use the same code.

@alampros suggests it maybe a yoga layout issue as he had a similar problem #204

[VinSpee]

I think I'm banging into this same issue:

Code:

const Bg = ({ type }: { type: string }) => (
  <Svg
    id="grad"
    style={{
      position: 'absolute',
      ...StyleSheet.absoluteFillObject,
      width: '100%',
      height: '100%',
    }}
  >
    <Defs>
      <LinearGradient
        id={`button-sheen-${type}`}
        x1="0"
        x2="0"
        y1="0"
        y2="1"
      >
        <Stop
          offset="0%"
          stopColor={THEME[type.toUpperCase()].BG_COLOR_START}
        />
        <Stop
          offset="100%"
          stopColor={THEME[type.toUpperCase()].BG_COLOR_END}
        />
      </LinearGradient>
    </Defs>
    <Rect
      fill={`url(#button-sheen-${type})`}
      style={{
        position: 'absolute',
        ...StyleSheet.absoluteFillObject,
        width: '100%',
        height: '100%',
      }}
      x="0"
      y="0"
    />
  </Svg>
);

Web screencap (yay!):

Sketch screencap (no gradient?):

Sketch gradient detail (ahh, there's a gradient it's just TINY?):

[isiaapp]

@VinSpee have you solved this problem?

[VinSpee]

@isiaap no I have not 😢

[isiaapp]

@VinSpee does it mean you have abandoned using gradients? Or some workaround has been found?

[VinSpee]

@isiaapp yes, not using gradients for now. certainly not ideal or acceptable, but such is life.

[VinSpee]

Hi! It's been quite some time and a couple of large version bumps - is there any intent to fix this issue? I'm just curious if it's even on the roadmap. "No" is a completely acceptable and sane answer.