CODEWITHSUNDEEP
htmlcsssvg
user11206142
user11206142

Reputation:

Adjust SVG background width and height

I would like to achieve this: enter image description here

But I was not able to change the rect's width/height. Is there a way to change the svg's background width and height only (without affecting the the logo)?

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="#4267b2" />
<path d="M11.9756 0.0498047C5.36171 0.0498047 0 5.41152 0 12.0254C0 17.9572 4.31743 22.8698 9.97829 23.8211V14.5238H7.08943V11.1781H9.97829V8.71109C9.97829 5.84866 11.7266 4.28881 14.2804 4.28881C15.5036 4.28881 16.5547 4.37995 16.8599 4.42009V7.41209L15.0886 7.41295C13.7 7.41295 13.4323 8.07266 13.4323 9.04109V11.1764H16.7456L16.3134 14.5221H13.4323V23.9011C19.3574 23.1799 23.951 18.1422 23.951 12.0219C23.951 5.41152 18.5893 0.0498047 11.9756 0.0498047Z" fill="white"/>
</svg>

Upvotes: 0

Views: 73

Answers (4)

SIMBIOSIS surl
SIMBIOSIS surl

Reputation: 397

The accepted answer suggest the use of transform="scale() translate()" but there are better and more optimal options. The main problem with your rect is that you omitted the x and y values.

Try one of the following:

1- Open the svg on Inkscape, Illustrator or CorelDraw and change the size of the background rect.

2- Do the same as in 1 but additionally select both, rect and icon and combine them in a single path.

3- Open the svg file in a text editor and change the viewBox, then change the width, height and x y values of the rect. Just like this:

Upvotes: 0

Paul LeBeau
Paul LeBeau

Reputation: 101918

<svg width="126" height="88" viewBox="0 0 63 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="#4267b2" rx="6"/>
<path d="M11.9756 0.0498047C5.36171 0.0498047 0 5.41152 0 12.0254C0 17.9572 4.31743 22.8698 9.97829 23.8211V14.5238H7.08943V11.1781H9.97829V8.71109C9.97829 5.84866 11.7266 4.28881 14.2804 4.28881C15.5036 4.28881 16.5547 4.37995 16.8599 4.42009V7.41209L15.0886 7.41295C13.7 7.41295 13.4323 8.07266 13.4323 9.04109V11.1764H16.7456L16.3134 14.5221H13.4323V23.9011C19.3574 23.1799 23.951 18.1422 23.951 12.0219C23.951 5.41152 18.5893 0.0498047 11.9756 0.0498047Z" fill="white"
 transform="translate(19.5,10)"/>
</svg>

Upvotes: 2

Varvara Sandakova
Varvara Sandakova

Reputation: 139

You can add the id to the svg and add styles for this id.

HTML:

<svg id="test" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="#4267b2" />
<path d="M11.9756 0.0498047C5.36171 0.0498047 0 5.41152 0 12.0254C0 17.9572 4.31743 22.8698 9.97829 23.8211V14.5238H7.08943V11.1781H9.97829V8.71109C9.97829 5.84866 11.7266 4.28881 14.2804 4.28881C15.5036 4.28881 16.5547 4.37995 16.8599 4.42009V7.41209L15.0886 7.41295C13.7 7.41295 13.4323 8.07266 13.4323 9.04109V11.1764H16.7456L16.3134 14.5221H13.4323V23.9011C19.3574 23.1799 23.951 18.1422 23.951 12.0219C23.951 5.41152 18.5893 0.0498047 11.9756 0.0498047Z" fill="white"/>
</svg>

CSS:

  #test {
      width:25px;
      height:25px;
    }

Upvotes: 0

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23500

You can use transform="scale() translate()" on path

svg {
  border-radius: 10px;
}
<svg width="140px" height="100px" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="140px" height="70px" fill="#4267b2" />
<path d="M11.9756 0.0498047C5.36171 0.0498047 0 5.41152 0 12.0254C0 17.9572 4.31743 22.8698 9.97829 23.8211V14.5238H7.08943V11.1781H9.97829V8.71109C9.97829 5.84866 11.7266 4.28881 14.2804 4.28881C15.5036 4.28881 16.5547 4.37995 16.8599 4.42009V7.41209L15.0886 7.41295C13.7 7.41295 13.4323 8.07266 13.4323 9.04109V11.1764H16.7456L16.3134 14.5221H13.4323V23.9011C19.3574 23.1799 23.951 18.1422 23.951 12.0219C23.951 5.41152 18.5893 0.0498047 11.9756 0.0498047Z" fill="white" transform="scale(0.2) translate(23,13)"  />
</svg>

Upvotes: 1

Related Questions