Resizing SVG icons and text together responsively-CodePudding

I have an SVG icon with text inside. I put these two using the position on 4 photos in the middle of the page, the problem is that the icon does not change with the change of page size and the text comes out of it. Using media query for mobile, tablet, and desktop sizes, it shows correctly, but between the sizes of these 3, it does not work well because the transform command is unitless and does not change the size optimally by changing the screen size. The photos in the background are also of the grid type. What do you suggest to change the correct size?

My project on GitHub here

```
.grid {
  display: grid;
  position: relative;
} 
   
.icon--art {
  width: 200px;
}

.icon--wavy-edges-circle {
  filter: drop-shadow(0 0 0 #f3ede9);
  opacity: 0.95;
  position: absolute;
  left: 50%;
  right: 50%;
  transform: translate(-50%, 50%);
}
.art__img-text {
  font-size: 2.4rem;
  letter-spacing: 2px;
  line-height: 3.6rem;
  color: #c9b176;
  font-weight: 400;
  font-family: Alegreya, "Times New Roman", Times, serif;
  text-align: center;
  position: absolute;
  inset: 36% auto;
  transform: translate(0%, 18%);
  padding: 0 9rem;
}
```

```
<section >
  <article >
    <div > somethings... </div>
    <div >
      <img src="..." alt="..." />
      <img src="..." alt="..." />
      <img src="..." alt="..." />
      <img src="..." alt="..." />
      <div >
        <svg >
          <use href="images/sprite.svg#wavyEdgesCircle"></use>
          <span >TASTES SO GOOD!</span>
        </svg>
      </div>
    </div>
  </article>
</section>
```

CodePudding user response：

<span> is not a valid <svg> element. Text should be in a <text> element. Because of that, the browser will be trying create a sensible document by terminating the <svg> at the span element. Your actual document will ;look like the following:

...
<div >
  <svg >
    <use href="images/sprite.svg#wavyEdgesCircle"></use>
  </svg>
  <span >TASTES SO GOOD!</span>
  </svg> <!-- (ignored) -->
</div>

This may be all or part of your problem. It's hard to tell without a proper working example with actual images that we can resize and test.

CodePudding user response：

I solved the problem, the SVG format was not suitable for what I wanted to do and I used the jpg format instead and then used the Vh, Vw unit for the font size as well as the width and height, the text is always inside the image. Takes even changing the page size.

html {
    font-size: 62.5%;
  }
  .container {
    border: 1px solid darkblue;
    width: 15vw;
    height: 20vh;
    position: relative;
    padding: 1vh;
  }
  .container p {
    font-size: 3vh;
    color: rgb(71, 49, 49);
    text-align: center;
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
  }
  .container img {
    width: 15vw;
    height: 20vh;
  }

<body>
<div >
  <img src="https://s6.uupload.ir/files/circle-wave_pycn.jpeg" alt="" />
  <p>TASTES SO GOOD!</p>
</div>
  </body>