Login/Register
React Native SVG - Setting SVG width and height cause the icon to be cut off
Asked Answered
Solved reactjsreact-nativesvgreact-native-svg
S

1

9

I have an SVG component, and I am trying to pass in width and height props in order to scale all my icons to the same size depending on the display.

import React from "react";
import Svg, { G, Path } from "react-native-svg";

const GearIcon = props => {

  const {color = '#2672C9', height = 46, width = 46} = props;

  return (
    <Svg width={height} height={width}>
      <G fill="none" fillRule="evenodd">
        <Path
          d="M24.97 0h-4.84a3.423 3.423 0 0 0-3.419 3.419V5.36a17.93 17.93 0 0 0-2.39 1.013l-2.14-2.14a3.396 3.396 0 0 0-2.418-1.001c-.913 0-1.772.355-2.417 1L3.923 7.657a3.4 3.4 0 0 0-1.001 2.418 3.4 3.4 0 0 0 1 2.417l2.246 2.246c-.37.779-.684 1.585-.94 2.415h-1.81A3.422 3.422 0 0 0 0 20.569v4.841a3.422 3.422 0 0 0 3.418 3.418h2.11c.282.767.617 1.514 1.002 2.236L5.114 32.48a3.422 3.422 0 0 0 0 4.834l3.422 3.423a3.396 3.396 0 0 0 2.417 1c.914 0 1.771-.355 2.418-1l1.672-1.674c.686.312 1.39.58 2.108.803v2.254a3.423 3.423 0 0 0 3.419 3.419h4.84a3.422 3.422 0 0 0 3.418-3.419v-2.54a17.64 17.64 0 0 0 1.95-.857l1.702 1.703a3.397 3.397 0 0 0 2.418 1c.913 0 1.772-.355 2.417-1l3.423-3.423a3.4 3.4 0 0 0 1.001-2.417 3.4 3.4 0 0 0-1-2.417l-1.804-1.804c.305-.64.573-1.301.8-1.978h2.387a3.422 3.422 0 0 0 3.418-3.417V20.13a3.422 3.422 0 0 0-3.418-3.418h-2.388a17.944 17.944 0 0 0-.862-2.099l1.554-1.554a3.422 3.422 0 0 0 0-4.834l-3.422-3.423a3.398 3.398 0 0 0-2.417-1c-.914 0-1.772.355-2.418 1l-1.506 1.506a17.68 17.68 0 0 0-2.274-.949v-1.94A3.423 3.423 0 0 0 24.97 0m0 2.76c.365 0 .659.294.659.659v3.96c0 .03-.014.056-.017.085a15.314 15.314 0 0 1 5.56 2.334.654.654 0 0 1 .148-.244l2.802-2.8a.66.66 0 0 1 .93 0l3.423 3.423a.66.66 0 0 1 0 .931l-2.8 2.8a.647.647 0 0 1-.288.159 15.275 15.275 0 0 1 2.282 5.637.649.649 0 0 1 .492-.232h3.96c.364 0 .659.294.659.658v4.84a.658.658 0 0 1-.658.658h-3.96a.647.647 0 0 1-.493-.232 15.31 15.31 0 0 1-2.366 5.775.674.674 0 0 1 .224-.04c.166 0 .331.063.458.19l2.8 2.8a.659.659 0 0 1 0 .932l-3.421 3.421a.656.656 0 0 1-.932 0l-2.8-2.8a.642.642 0 0 1-.168-.59 15.287 15.287 0 0 1-5.72 2.522.648.648 0 0 1 .324.555v3.96a.658.658 0 0 1-.658.659h-4.84a.658.658 0 0 1-.659-.659v-3.96a.65.65 0 0 1 .172-.435A15.261 15.261 0 0 1 14.4 35.59a.643.643 0 0 1-.18.396l-2.8 2.8a.66.66 0 0 1-.931 0l-3.423-3.423a.66.66 0 0 1 0-.931l2.8-2.8a.653.653 0 0 1 .186-.123 15.307 15.307 0 0 1-2.483-5.479c-.061.019-.122.038-.189.038h-3.96a.658.658 0 0 1-.66-.658v-4.84c0-.364.296-.658.66-.658h3.96c.007 0 .014.003.02.003a15.28 15.28 0 0 1 2.328-5.872.639.639 0 0 1-.53-.181L5.875 10.54a.659.659 0 0 1 0-.932l3.422-3.422a.652.652 0 0 1 .466-.193c.168 0 .336.063.465.193l3.323 3.322c.12.12.179.276.186.434a15.31 15.31 0 0 1 5.752-2.478c-.004-.029-.018-.054-.018-.085V3.42c0-.365.296-.659.66-.659h4.84"
          fill={color}
        />
        <Path
          d="M28.52 22.54a5.98 5.98 0 1 1-11.96 0 5.98 5.98 0 0 1 11.96 0z"
          stroke={color}
          strokeWidth={3}
        />
      </G>
    </Svg>
  );

};

export default GearIcon;

This when I pass in 41 and 41 as props results in the drawing itself being cut off.

enter image description here

I don't know much about how SVGs work, how do I fix this?

Shepp answered 13/2, 2020 at 19:30 Comment(0)
B
15

You need to define the viewBox attribute.

This will define the "frame" for your shape within the svg, relative to your coordinates and will then scale correctly.

In your case, as the correct sizing for the image is 46 x 46, you can define this in the viewBox - viewBox="0 0 46 46".

As you currently have no viewBox defined, it will take 100% of the SVG (equivalent to viewBox="0 0 41 41") which is why you see the image is cut off.

 return (
    <Svg width={height} height={width} viewbox="0 0 46 46">
      <G fill="none" fillRule="evenodd">
        <Path
          d="M24.97 0h-4.84a3.423 3.423 0 0 0-3.419 3.419V5.36a17.93 17.93 0 0 0-2.39 1.013l-2.14-2.14a3.396 3.396 0 0 0-2.418-1.001c-.913 0-1.772.355-2.417 1L3.923 7.657a3.4 3.4 0 0 0-1.001 2.418 3.4 3.4 0 0 0 1 2.417l2.246 2.246c-.37.779-.684 1.585-.94 2.415h-1.81A3.422 3.422 0 0 0 0 20.569v4.841a3.422 3.422 0 0 0 3.418 3.418h2.11c.282.767.617 1.514 1.002 2.236L5.114 32.48a3.422 3.422 0 0 0 0 4.834l3.422 3.423a3.396 3.396 0 0 0 2.417 1c.914 0 1.771-.355 2.418-1l1.672-1.674c.686.312 1.39.58 2.108.803v2.254a3.423 3.423 0 0 0 3.419 3.419h4.84a3.422 3.422 0 0 0 3.418-3.419v-2.54a17.64 17.64 0 0 0 1.95-.857l1.702 1.703a3.397 3.397 0 0 0 2.418 1c.913 0 1.772-.355 2.417-1l3.423-3.423a3.4 3.4 0 0 0 1.001-2.417 3.4 3.4 0 0 0-1-2.417l-1.804-1.804c.305-.64.573-1.301.8-1.978h2.387a3.422 3.422 0 0 0 3.418-3.417V20.13a3.422 3.422 0 0 0-3.418-3.418h-2.388a17.944 17.944 0 0 0-.862-2.099l1.554-1.554a3.422 3.422 0 0 0 0-4.834l-3.422-3.423a3.398 3.398 0 0 0-2.417-1c-.914 0-1.772.355-2.418 1l-1.506 1.506a17.68 17.68 0 0 0-2.274-.949v-1.94A3.423 3.423 0 0 0 24.97 0m0 2.76c.365 0 .659.294.659.659v3.96c0 .03-.014.056-.017.085a15.314 15.314 0 0 1 5.56 2.334.654.654 0 0 1 .148-.244l2.802-2.8a.66.66 0 0 1 .93 0l3.423 3.423a.66.66 0 0 1 0 .931l-2.8 2.8a.647.647 0 0 1-.288.159 15.275 15.275 0 0 1 2.282 5.637.649.649 0 0 1 .492-.232h3.96c.364 0 .659.294.659.658v4.84a.658.658 0 0 1-.658.658h-3.96a.647.647 0 0 1-.493-.232 15.31 15.31 0 0 1-2.366 5.775.674.674 0 0 1 .224-.04c.166 0 .331.063.458.19l2.8 2.8a.659.659 0 0 1 0 .932l-3.421 3.421a.656.656 0 0 1-.932 0l-2.8-2.8a.642.642 0 0 1-.168-.59 15.287 15.287 0 0 1-5.72 2.522.648.648 0 0 1 .324.555v3.96a.658.658 0 0 1-.658.659h-4.84a.658.658 0 0 1-.659-.659v-3.96a.65.65 0 0 1 .172-.435A15.261 15.261 0 0 1 14.4 35.59a.643.643 0 0 1-.18.396l-2.8 2.8a.66.66 0 0 1-.931 0l-3.423-3.423a.66.66 0 0 1 0-.931l2.8-2.8a.653.653 0 0 1 .186-.123 15.307 15.307 0 0 1-2.483-5.479c-.061.019-.122.038-.189.038h-3.96a.658.658 0 0 1-.66-.658v-4.84c0-.364.296-.658.66-.658h3.96c.007 0 .014.003.02.003a15.28 15.28 0 0 1 2.328-5.872.639.639 0 0 1-.53-.181L5.875 10.54a.659.659 0 0 1 0-.932l3.422-3.422a.652.652 0 0 1 .466-.193c.168 0 .336.063.465.193l3.323 3.322c.12.12.179.276.186.434a15.31 15.31 0 0 1 5.752-2.478c-.004-.029-.018-.054-.018-.085V3.42c0-.365.296-.659.66-.659h4.84"
          fill={color}
        />
        <Path
          d="M28.52 22.54a5.98 5.98 0 1 1-11.96 0 5.98 5.98 0 0 1 11.96 0z"
          stroke={color}
          strokeWidth={3}
        />
      </G>
    </Svg>
  );

Depending on which version of react-native-svg you are using, you may need to use viewbox instead of viewBox.

You can test by running snippet below (using a standard SVG file)

<svg width="41" height="41" version="1.1" viewBox="0 0 46 46" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" fillRule="evenodd">
    <path
      d="M24.97 0h-4.84a3.423 3.423 0 0 0-3.419 3.419V5.36a17.93 17.93 0 0 0-2.39 1.013l-2.14-2.14a3.396 3.396 0 0 0-2.418-1.001c-.913 0-1.772.355-2.417 1L3.923 7.657a3.4 3.4 0 0 0-1.001 2.418 3.4 3.4 0 0 0 1 2.417l2.246 2.246c-.37.779-.684 1.585-.94 2.415h-1.81A3.422 3.422 0 0 0 0 20.569v4.841a3.422 3.422 0 0 0 3.418 3.418h2.11c.282.767.617 1.514 1.002 2.236L5.114 32.48a3.422 3.422 0 0 0 0 4.834l3.422 3.423a3.396 3.396 0 0 0 2.417 1c.914 0 1.771-.355 2.418-1l1.672-1.674c.686.312 1.39.58 2.108.803v2.254a3.423 3.423 0 0 0 3.419 3.419h4.84a3.422 3.422 0 0 0 3.418-3.419v-2.54a17.64 17.64 0 0 0 1.95-.857l1.702 1.703a3.397 3.397 0 0 0 2.418 1c.913 0 1.772-.355 2.417-1l3.423-3.423a3.4 3.4 0 0 0 1.001-2.417 3.4 3.4 0 0 0-1-2.417l-1.804-1.804c.305-.64.573-1.301.8-1.978h2.387a3.422 3.422 0 0 0 3.418-3.417V20.13a3.422 3.422 0 0 0-3.418-3.418h-2.388a17.944 17.944 0 0 0-.862-2.099l1.554-1.554a3.422 3.422 0 0 0 0-4.834l-3.422-3.423a3.398 3.398 0 0 0-2.417-1c-.914 0-1.772.355-2.418 1l-1.506 1.506a17.68 17.68 0 0 0-2.274-.949v-1.94A3.423 3.423 0 0 0 24.97 0m0 2.76c.365 0 .659.294.659.659v3.96c0 .03-.014.056-.017.085a15.314 15.314 0 0 1 5.56 2.334.654.654 0 0 1 .148-.244l2.802-2.8a.66.66 0 0 1 .93 0l3.423 3.423a.66.66 0 0 1 0 .931l-2.8 2.8a.647.647 0 0 1-.288.159 15.275 15.275 0 0 1 2.282 5.637.649.649 0 0 1 .492-.232h3.96c.364 0 .659.294.659.658v4.84a.658.658 0 0 1-.658.658h-3.96a.647.647 0 0 1-.493-.232 15.31 15.31 0 0 1-2.366 5.775.674.674 0 0 1 .224-.04c.166 0 .331.063.458.19l2.8 2.8a.659.659 0 0 1 0 .932l-3.421 3.421a.656.656 0 0 1-.932 0l-2.8-2.8a.642.642 0 0 1-.168-.59 15.287 15.287 0 0 1-5.72 2.522.648.648 0 0 1 .324.555v3.96a.658.658 0 0 1-.658.659h-4.84a.658.658 0 0 1-.659-.659v-3.96a.65.65 0 0 1 .172-.435A15.261 15.261 0 0 1 14.4 35.59a.643.643 0 0 1-.18.396l-2.8 2.8a.66.66 0 0 1-.931 0l-3.423-3.423a.66.66 0 0 1 0-.931l2.8-2.8a.653.653 0 0 1 .186-.123 15.307 15.307 0 0 1-2.483-5.479c-.061.019-.122.038-.189.038h-3.96a.658.658 0 0 1-.66-.658v-4.84c0-.364.296-.658.66-.658h3.96c.007 0 .014.003.02.003a15.28 15.28 0 0 1 2.328-5.872.639.639 0 0 1-.53-.181L5.875 10.54a.659.659 0 0 1 0-.932l3.422-3.422a.652.652 0 0 1 .466-.193c.168 0 .336.063.465.193l3.323 3.322c.12.12.179.276.186.434a15.31 15.31 0 0 1 5.752-2.478c-.004-.029-.018-.054-.018-.085V3.42c0-.365.296-.659.66-.659h4.84"
      fill="black"
    />
    <path
      d="M28.52 22.54a5.98 5.98 0 1 1-11.96 0 5.98 5.98 0 0 1 11.96 0z"
      stroke="black"
      strokeWidth="3"
    />
  </g>
</svg>

Here is a useful graphical representation of how viewBox works

How viewbox works

Bernabernadene answered 13/2, 2020 at 19:37 Comment(6)
so the view box has to equal what the original was before resizing? – Shepp
what do the 4 numbers represent? – Shepp
Yes, if you have a 10x10 square, and you rescale, it will get cut off. But if you set the viewBox to 10x10 you set the "frame" of the svg to show all of the square – Bernabernadene
The 4 numbers are x,y coordinates for the top left and bottom right corners – Bernabernadene
I have edited the question to include a graphical representation of how viewBox works which really helps to understand what is going on – Bernabernadene
that is probably one of the most helpful answers I have gotten here in a long time. thank you soo much :) – Shepp

© 2022 - 2024 — McMap. All rights reserved.