Scaling SVG with height/width/viewBox?

I’m trying to scale my SVG, which has viewBox='0 0 24 23', down to 16 x 16. However, when I change the width/height properties, the icon does not scale down, it just gets clipped off outside of the 16x16 box.

Icon with viewBox='0 0 24 23' andwidth=24andheight=23`:
image

Icon with viewBox='0 0 24 23' andwidth=16andheight=16`:
image

Am I missing something here? Here is my code.

import React from 'react'
import Svg, {
  Path
} from 'react-native-svg'

const AlarmIcon = ({width, height, fill, stroke, viewBox, style}) => {
  return (
    <Svg width={width} height={height} viewBox={viewBox} style={style}>
      <Path stroke={stroke} fill={fill} strokeCap='round' strokeJoin='round' d='M20.5,16.5V11A8.5,8.5,0,0,0,15,3,3,3,0,0,0,9,3,8.49,8.49,0,0,0,3.5,11v5.5a3,3,0,0,1-3,3h23A3,3,0,0,1,20.5,16.5Z'/>
      <Path stroke={stroke} fill={fill} strokeCap='round' strokeJoin='round' d='M15,19.5a3,3,0,0,1-6,0'/>
    </Svg>
  )
}

AlarmIcon.defaultProps = {
  width: 24,
  height: 23,
  stroke: '#fff',
  fill: '#fff',
  viewBox: '0 0 24 23'
}

export default AlarmIcon

6 thoughts on “Scaling SVG with height/width/viewBox?

  1. I managed to get the icon to scale properly by applying scale={width/24} to both of the path elements. Is there a better way to do this, though?

  2. I managed to get the icon to scale properly by applying scale={width/24} to both of the path elements. Is there a better way to do this, though?

    Thanks …I am using scale={0.5} on Path tag …it’s working fine

Scaling SVG with height/width/viewBox?

I’m trying to scale my SVG, which has viewBox='0 0 24 23', down to 16 x 16. However, when I change the width/height properties, the icon does not scale down, it just gets clipped off outside of the 16x16 box.

Icon with viewBox='0 0 24 23' andwidth=24andheight=23`:
image

Icon with viewBox='0 0 24 23' andwidth=16andheight=16`:
image

Am I missing something here? Here is my code.

import React from 'react'
import Svg, {
  Path
} from 'react-native-svg'

const AlarmIcon = ({width, height, fill, stroke, viewBox, style}) => {
  return (
    <Svg width={width} height={height} viewBox={viewBox} style={style}>
      <Path stroke={stroke} fill={fill} strokeCap='round' strokeJoin='round' d='M20.5,16.5V11A8.5,8.5,0,0,0,15,3,3,3,0,0,0,9,3,8.49,8.49,0,0,0,3.5,11v5.5a3,3,0,0,1-3,3h23A3,3,0,0,1,20.5,16.5Z'/>
      <Path stroke={stroke} fill={fill} strokeCap='round' strokeJoin='round' d='M15,19.5a3,3,0,0,1-6,0'/>
    </Svg>
  )
}

AlarmIcon.defaultProps = {
  width: 24,
  height: 23,
  stroke: '#fff',
  fill: '#fff',
  viewBox: '0 0 24 23'
}

export default AlarmIcon

7 thoughts on “Scaling SVG with height/width/viewBox?

  1. I managed to get the icon to scale properly by applying scale={width/24} to both of the path elements. Is there a better way to do this, though?

  2. I managed to get the icon to scale properly by applying scale={width/24} to both of the path elements. Is there a better way to do this, though?

    Thanks …I am using scale={0.5} on Path tag …it’s working fine

  3. Pingback: fake watches