CODEWITHSUNDEEP
htmlcsssvg
RedWitch
RedWitch

Reputation: 153

Scale SVG to fit inside a div

I have gone through many threads here but was not able to get any of the proposed solutions to work for my use-case.

I have an SVG that was generated on an external website. It consists of three elements. I want to embed this SVG and make it centered and fit ~80% of div's width while maintaining the aspect ratio.

I have created a logo class, which I tried applying to both the SVG and the div, but it's not resizing the SVG. I might be missing something simple, as this is the first time I am embedding an SVG. Any tips will be appreciated.

HTML:

<div class="logo">
<svg viewBox="0 0 100 100" height="125.10821574604812" width="386" style="width: 386px; height: 125.108px; display: inline-block;">
  <g id="SvgjsG1007" featurekey="symbolFeature-0" transform="matrix(0.24606297734400367,0,0,0.24606297734400367,-0.99212501603224,-0.46136984249956975)" fill="black">
    <path xmlns="http://www.w3.org/2000/svg" d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"></path></g>
    <g id="SvgjsG1008" featurekey="textGroupContainer" transform="matrix(1,0,0,1,385,15)" fill="black">
      <rect xmlns="http://www.w3.org/2000/svg" y="0" height="1" width="1" opacity="0"></rect><rect xmlns="http://www.w3.org/2000/svg" y="0" x="-265" width="3" height="96"></rect></g>
      <g id="SvgjsG1009" featurekey="vMvB0T-0" transform="matrix(2.9018419606484582,0,0,2.9018419606484582,135.09815803935155,27.97299999605343)" fill="black">
        <path d="M1 20 l0 -8.4 c0 -5.58 0 -7.78 3 -7.78 s3 2.2 3 7.78 l0 8.4 l-2 0 l0 -4.6 l-2 0 l0 4.6 l-2 0 z"></path></g>
        </svg>
  </div>

CSS:

.logo {
  width: 80% !important;
  align-content: center;
}

Snippet - the SVG doesn't resize no matter the size set inside the div:

.logo {
  width: 80% !important;
  align-content: center;
}
<div class="logo">
<svg viewBox="0 0 100 100" height="125.10821574604812" width="386" style="width: 386px; height: 125.108px; display: inline-block;">
  <g id="SvgjsG1007" featurekey="symbolFeature-0" transform="matrix(0.24606297734400367,0,0,0.24606297734400367,-0.99212501603224,-0.46136984249956975)" fill="black">
    <path xmlns="http://www.w3.org/2000/svg" d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"></path></g>
    <g id="SvgjsG1008" featurekey="textGroupContainer" transform="matrix(1,0,0,1,385,15)" fill="black">
      <rect xmlns="http://www.w3.org/2000/svg" y="0" height="1" width="1" opacity="0"></rect><rect xmlns="http://www.w3.org/2000/svg" y="0" x="-265" width="3" height="96"></rect></g>
      <g id="SvgjsG1009" featurekey="vMvB0T-0" transform="matrix(2.9018419606484582,0,0,2.9018419606484582,135.09815803935155,27.97299999605343)" fill="black">
        <path d="M1 20 l0 -8.4 c0 -5.58 0 -7.78 3 -7.78 s3 2.2 3 7.78 l0 8.4 l-2 0 l0 -4.6 l-2 0 l0 4.6 l-2 0 z"></path></g>
        </svg>
  </div>

Upvotes: 4

Views: 15807

Answers (2)

wanna_coder101
wanna_coder101

Reputation: 186

If you use tailwind then add scale-100

scale-100 = transform: scale(1);

Like

<figure>
  <img className="scale-100 w-16 h-16" src={/img.svg} alt='SVG Image'/>
</figure>

CSS equivalent would be

.svg_img {
  transform: scale(1);
  width: 10rem;
  height: 10rem;
}

Upvotes: 2

Rene van der Lende
Rene van der Lende

Reputation: 5281

First

  • You need to remove the inline style from the <svg> as it overrides the values you set in CSS

  • Set <svg viewbox="0 0 386 126">` as it seems to be the width/height from the path

Then

  • either set <svg width="100%" height="100%">
  • or remove those values too from <svg> and set them in a CSS rule.

.logo {
  width: 80%;
  margin: 0 auto /* to center it inside parent */
}
<div class="logo">
    <svg viewBox="0 0 386 126" width="100%" height="100%">
      <g id="SvgjsG1007" featurekey="symbolFeature-0" transform="matrix(0.24606297734400367,0,0,0.24606297734400367,-0.99212501603224,-0.46136984249956975)" fill="black">
        <path xmlns="http://www.w3.org/2000/svg" d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"></path></g>
        <g id="SvgjsG1008" featurekey="textGroupContainer" transform="matrix(1,0,0,1,385,15)" fill="black">
          <rect xmlns="http://www.w3.org/2000/svg" y="0" height="1" width="1" opacity="0"></rect><rect xmlns="http://www.w3.org/2000/svg" y="0" x="-265" width="3" height="96"></rect></g>
          <g id="SvgjsG1009" featurekey="vMvB0T-0" transform="matrix(2.9018419606484582,0,0,2.9018419606484582,135.09815803935155,27.97299999605343)" fill="black">
            <path d="M1 20 l0 -8.4 c0 -5.58 0 -7.78 3 -7.78 s3 2.2 3 7.78 l0 8.4 l-2 0 l0 -4.6 l-2 0 l0 4.6 l-2 0 z"></path></g>
    </svg>
</div>

Upvotes: 6

Related Questions