Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SVG with uri rendering larger than container and are cropped

See original GitHub issue

Bug

SvgUri is rendering the SVG but not containing it within the size specified.

Environment info

React native info output:

  React Native Environment Info:
    System:
      OS: macOS 10.15.1
      CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
      Memory: 311.12 MB / 16.00 GB
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.8.1 - /usr/local/bin/node
      Yarn: 1.17.3 - /usr/local/bin/yarn
      npm: 6.12.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
      Android SDK:
        API Levels: 23, 25, 26, 28
        Build Tools: 22.0.1, 23.0.1, 23.0.3, 25.0.2, 26.0.1, 26.0.3, 28.0.1, 28.0.3
        System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.1 AI-173.4819257
      Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: ^0.59.8 => 0.59.10
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-app-id: 0.0.5
      react-native-git-upgrade: 0.2.7

Library version: x.x.x

Steps To Reproduce

<SvgCssUri width="100px" height="100px" uri={source} />
or
<SvgUri width="100px" height="100px" uri={source} />

I’d like for the SVG to be contained within the size specified, otherwise what’s the point. Currently the image is cropped. The screenshot below should be of the linux penguin. Screenshot 2019-11-28 at 08 57 23

Reproducible sample code

see above

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:14

Top GitHub Comments

1reaction

SirCameroncommented, Nov 28, 2019

This is using a URI, though.

0reactions

vpress-admincommented, Jun 30, 2022

Alternatively, you can measure the size of the content, and decide some arbitrary amount of margin you want, and transform the content to fit inside your default / requested size.

Hi, I’m also facing a similar issue where the format of the SVG is all over the place, some don’t have viewboxes and some do but still get cropped. How would you achieve what you’re talking about here. I’m just trying to display an external SVG in a container with some padding so width=“100%” and height=“100%”