CODEWITHSUNDEEP
htmlcsssvg
Jimmy
Jimmy

Reputation: 3880

How to change the size of an SVG via CSS

I want to customize the size of my circle svg, however, when I set the font-size to 300px, the size of the svg does not change / get updated. How can I change the size of this svg via css? Thanks.

svg {
  font-size: 300px;
}

svg > circle {
  fill: red;
}

svg > path {
  fill: orange;
}
<svg width="100" height="100">
  <circle cx="50" cy="50" r="50"/>
  <path d="M0,50 a1,1 0 0,0 100,0" />
</svg>

Upvotes: 5

Views: 9572

Answers (4)

prajun karn
prajun karn

Reputation: 71

I hope this code will help you.

svg {
 width: 300px;
 height: 300px
}

#semi-circle1 {
  fill: red;
}

#semi-circle2 {
  fill: orange;
}
<svg>
  <defs>
    <clipPath id="cut-off-top">
      <rect x="0%" y="0%" width="100%" height="100%"/>
    </clipPath>
    <clipPath id="cut-off-bottom">
      <rect x="0%" y="50%" width="100%" height="100%"/>
    </clipPath>
  </defs>
  <circle id="semi-circle1" cx="50%" cy="50%" r="50%" fill="red" clip-path="url(#cut-off-top)" />
  <circle id="semi-circle2" cx="50%" cy="50%" r="50%" fill="orange" clip-path="url(#cut-off-bottom)" />
</svg>

Upvotes: 3

ElBrm
ElBrm

Reputation: 344

You can use viewbox. The value of the viewBox attribute is a list of four numbers: min-x, min-y, width and height. This way you can change the size by css too.

svg {
  width: 300px;/*Overwrites the width in the svg viewbox*/
  height: 300px;/*Overwrites the height in the svg viewbox*/
}

svg > circle {
  fill: red;
}

svg > path {
  fill: orange;
}
<svg viewbox="0 0 100 100"> <!-- Width 100px, height 100px -->
  <circle cx="50" cy="50" r="50"/>
  <path d="M0,50 a1,1 0 0,0 100,0" />
</svg>

Upvotes: 1

Richard Hunter
Richard Hunter

Reputation: 2200

Here is one approach: You set the viewBox attribute on the SVG so that it will scale to its container. Then you set the width of that container in em's. This means it will scale with the font size you set on the container.

svg>circle {
  fill: red;
}

svg>path {
  fill: orange;
}

.svg-container {
  font-size: 300px;
  width: 4em;
  border: solid 1px red;
}

.alpha {
  font-size: 10px;
}

.beta {
  font-size: 20px;
}

.gamma {
  font-size: 100px;
}
<div class="svg-container alpha">
  10px
  <svg viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="50"/>
      <path d="M0,50 a1,1 0 0,0 100,0" />
    </svg>
</div>

<div class="svg-container beta">
  20px
  <svg viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="50"/>
      <path d="M0,50 a1,1 0 0,0 100,0" />
    </svg>
</div>

<div class="svg-container gamma">
  100px
  <svg viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="50"/>
      <path d="M0,50 a1,1 0 0,0 100,0" />
    </svg>
</div>

Upvotes: 2

David
David

Reputation: 34573

You want to use the scale command. From CanIUse.com, it looks like this works everywhere except for IE11.

svg {
  transform-origin: left top;
  transform: scale(3);
}

svg > circle {
  fill: red;
}

svg > path {
  fill: orange;
}
<svg width="100" height="100">
  <circle cx="50" cy="50" r="50"/>
  <path d="M0,50 a1,1 0 0,0 100,0" />
</svg>

Upvotes: 7

Related Questions