Skip to main content
The 2024 Developer Survey results are live! See the results
deleted 27 characters in body
Source Link
ZYinMD
  • 4.6k
  • 1
  • 30
  • 43

Here's thean easy way:

Type 1: if your svg only hasMost SVGs have a viewbox, but no width and height, like so:

<svg viewBox="0 0 24 30">30" ...>

ThenAnd you can just specify itseasily control their size in css:

svg {
  height: 80px;20px;
}

Type 2: If the svg has width and height, but doesn't have a viewport, like so:

<svg width="810" height="540">

Then you can just manually add a viewbox that's exactly the same as its width and hegith, like so:

<svg width="810" height="540" viewBox="0 0 810 540">

Then you can do the same as type 1.

Here's the easy way:

Type 1: if your svg only has a viewbox, but no width and height, like so:

<svg viewBox="0 0 24 30">

Then you can just specify its size in css:

svg {
  height: 80px;
}

Type 2: If the svg has width and height, but doesn't have a viewport, like so:

<svg width="810" height="540">

Then you can just manually add a viewbox that's exactly the same as its width and hegith, like so:

<svg width="810" height="540" viewBox="0 0 810 540">

Then you can do the same as type 1.

Here's an easy way:

Type 1: Most SVGs have a viewbox, like so:

<svg viewBox="0 0 24 30" ...>

And you can easily control their size in css:

svg {
  height: 20px;
}

Type 2: If the svg has width and height, but doesn't have a viewport, like so:

<svg width="810" height="540">

Then you can just manually add a viewbox that's exactly the same as its width and hegith, like so:

<svg width="810" height="540" viewBox="0 0 810 540">

Then you can do the same as type 1.

Source Link
ZYinMD
  • 4.6k
  • 1
  • 30
  • 43

Here's the easy way:

Type 1: if your svg only has a viewbox, but no width and height, like so:

<svg viewBox="0 0 24 30">

Then you can just specify its size in css:

svg {
  height: 80px;
}

Type 2: If the svg has width and height, but doesn't have a viewport, like so:

<svg width="810" height="540">

Then you can just manually add a viewbox that's exactly the same as its width and hegith, like so:

<svg width="810" height="540" viewBox="0 0 810 540">

Then you can do the same as type 1.