How to increase the height of an svg image in css?

Question

I am working on svg image (as shown in the screenshot marked by an arrow having four triangles) html code as show below belonging to the webpage in which I want to increase the height of it.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
   <style>.path-one,.path-two{fill-rule:evenodd;clip-rule:evenodd;fill:#00afc9}.path-two{opacity:.4;fill:#93c83d}</style>
   <path class="path-one" d="M30 30H0V0"></path>
   <path class="path-two" d="M0 30V0h30"></path>
</svg>

I tried adding inline width="150px" and height="150px" in svg tag but it doesn't seem to work.

Problem Statement:

I am wondering what changes I should make in the code above so that the height of the svg image gets changed

Answer 1

You can achieve the same result using CSS and it will be easier to handle:

.box {
  display:inline-block;
  width:150px;
  height:150px;
  background:
    linear-gradient(to top left   ,transparent 49.3%,rgb(147, 200, 61,0.4) 50%),
    linear-gradient(to bottom left,transparent 49.3%,#00afc9 50%);
}

<div class="box">

</div>

You can also integrate it as background for your black bar:

.box {
  height:60px;
  background:
    linear-gradient(to top left   ,transparent 49.3%,rgb(147, 200, 61,0.4) 50%),
    linear-gradient(to bottom left,transparent 49.3%,#00afc9 50%),
    #000;
  background-size:60px 100%;
  background-repeat:no-repeat;
}

<div class="box">

</div>