Issue in svg images

Question

I am using svg images as i thought these are hight resolution images and auto adjust according to height of screen as i am using it in mobile device but when i check the app in the tablet it got blur what is the issue how can i resolve it

import * as React from "react"
import Svg, { Path } from "react-native-svg"
const SvgComponent = (props) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    fill="currentColor"
    viewBox="0 0 18 20"
    aria-hidden="true"
    className="w-6 h-6 text-gray-800 dark:text-white"
    viewBox="0 0 18 20"
    width={24}
    height={24}
    {...props}
  >
    <Path d="M16 0H4a2 2 0 0 0-2 2v1H1a1 1 0 0 0 0 2h1v2H1a1 1 0 0 0 0 2h1v2H1a1 1 0 0 0 0 2h1v2H1a1 1 0 0 0 0 2h1v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4.5a3 3 0 1 1 0 6 3 3 0 0 1 0-6ZM13.929 17H7.071a.5.5 0 0 1-.5-.5 3.935 3.935 0 1 1 7.858 0 .5.5 0 0 1-.5.5Z" />
  </Svg>
)
export default SvgComponent

in react native use as icon in react native

Answer 1

This is most likely because of the fixed width and height values you have set for the SVG component. When you specify a fixed width and height, the SVG will not automatically adjust its size based on the screen dimensions, leading to blur on different devices' scales, you can remove the fixed width and height props from the Svg component. This will allow the SVG to scale dynamically based on the "View" is rendered in.

 import * as React from "react"
import Svg, { Path } from "react-native-svg"

const SvgComponent = (props) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    fill="currentColor"
    viewBox="0 0 18 20"
    aria-hidden="true"
    className="w-6 h-6 text-gray-800 dark:text-white"
    {...props}
  >
    <Path d="M16 0H4a2 2 0 0 0-2 2v1H1a1 1 0 0 0 0 2h1v2H1a1 1 0 0 0 0 2h1v2H1a1 1 0 0 0 0 2h1v2H1a1 1 0 0 0 0 2h1v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4.5a3 3 0 1 1 0 6 3 3 0 0 1 0-6ZM13.929 17H7.071a.5.5 0 0 1-.5-.5 3.935 3.935 0 1 1 7.858 0 .5.5 0 0 1-.5.5Z" />
  </Svg>
)

export default SvgComponent

By removing the width and height props, the SVG will now scale based on the container it is rendered in