Как я могу создать полноразмерный фон прямоугольника SVG?

Question

Привет, я совершенно новичок в svg и хотел бы создать что-то вроде этого:

Оба способа были бы классными, но я не против использовать более легкий

Это мой код:

<div class="row">
  <div class="col-lg-4 col-md-6">
    <div class="single-product">
      <div class="thumb">
        <img src="img/p1.png" alt="">
      </div>
      <div class="details">
        <h4>Lorem ipsum </h4>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        </p>
      </div>
    </div>
  </div>

Answer 1

использовать теги HTML5

<svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg>

Answer 2

Использование атрибута viewBox без ширины и высоты в SVG обеспечит его масштабирование до 100% доступного пространства.

Чтобы добиться чего-то похожего на второй вариант в связанном примере, вы можете расположить SVG абсолютно так, чтобы он находился за списком изображений.

body {
  margin: 0;
}

.container {
  position: relative;
}

.svgcontainer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: grey;
}

.items {
  position: relative;
  display: flex;
  padding-top: 50px;
}

.item {
  flex: 1 1 33%;
  text-align: center;
}
.item img {
  display: block;
  margin: 0 auto;
}

<div class="container">
  <div class="svgcontainer">
    <svg viewBox="0 0 100 30">
    <path d="M93.8993 12C77.8993 -0.49999 -0.600744 -3.99999 0.899285 9C4.39923 32.5 43 26 70 26C97 26 97.7998 15.0473 93.8993 12Z" fill="currentcolor"/>
  </svg>
  </div>

  <div class="items">
    <div class="item"><img src="https://picsum.photos/200/300" /></div>
    <div class="item"><img src="https://picsum.photos/200/300" /></div>
    <div class="item"><img src="https://picsum.photos/200/300" /></div>
  </div>
</div>

Answer 3

Используйте Adobe Illustrator, чтобы нарисовать ваш объект, затем сохраните его как SVG, и вы сможете скопировать пути кода, которые он вам даст, и он сгенерирует его для вас!

Если вы просто делаете прямоугольник, хотя вам не нужно использовать SVG, вы наверняка можете использовать CSS?

https://helpx.adobe.com/uk/illustrator/how-to/export-svg.html