How to put paragraph into svg background

Question

How can I put some paragraphs into a SVG file?

<div className="row footer"> 
  <div className="col mt-5 col-lg-4 col-md-6 col-sm-12">Test footer</div> 
  <div className="col mt-5 col-lg-4 col-md-6 col-sm-12">Test footer</div> 
  <div className="col mt-5 col-lg-4 col-md-6 col-sm-12">Test footer</div> 
</div>

.footer { 
  background-image: url('../images/curve-bg-footer.png') !important; }

Thanks

[

Answer 1

It is not clear from your question is the SVG should be in the HTML document or in CSS. In this example I use the SVG as a background in CSS.

This is the SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 100 60">
  <path fill="blue" d="M 0 0 V 10 H 100 V 0 C 90 0 85 3 75 3 C 65 3 60 0 50 0 C 40 0 35 3 25 3 C 15 3 10 0 0 0 Z"/>
  <rect x="0" y="10" width="100" height="50" fill="blue" />
</svg>

And here is the complete example where I turned the URL for the SVG into a data URI. Here the footer has the height of 150px, but if you add the right content you can probably remove the height property and just put a padding in the top.

.footer {
  display: flex;
  height: 150px;
  flex-direction: row;
  align-items: flex-end;
  padding: 1em;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAwIiB2aWV3Qm94PSIwIDAgMTAwIDYwIj4KICA8cGF0aCBmaWxsPSJibHVlIiBkPSJNIDAgMCBWIDEwIEggMTAwIFYgMCBDIDkwIDAgODUgMyA3NSAzIEMgNjUgMyA2MCAwIDUwIDAgQyA0MCAwIDM1IDMgMjUgMyBDIDE1IDMgMTAgMCAwIDAgWiIvPgo8cmVjdCB4PSIwIiB5PSIxMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSI1MCIgZmlsbD0iYmx1ZSIgLz4KPC9zdmc+');
  background-repeat: repeat-x;
  color: white;
}

.footer div {
  flex-grow: 1;
}

<div class="row footer">
  <div class="col mt-5 col-lg-4 col-md-6 col-sm-12">Test footer</div>
  <div class="col mt-5 col-lg-4 col-md-6 col-sm-12">Test footer</div>
  <div class="col mt-5 col-lg-4 col-md-6 col-sm-12">Test footer</div>
</div>