Using Svg as Background Image

Using SVG as background image

With my solution you're able to get something similar:

Here is bulletproff solution:

Your html:
<input class='calendarIcon'/>

Your SVG:
i used fa-calendar-alt

(any IDE may open svg image as shown below)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
  <path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/>
</svg>

To use it at css background-image you gotta encode the svg to address valid string. I used this tool (name: URL Decoder—Convert garbled address)

As far as you got all stuff you need, you're coming to css

.calendarIcon{
      //your url will be something like this:
      background-image: url("data:image/svg+xml,***<here place encoded svg>***");
      background-repeat: no-repeat;
    }

Note: these styling wont have any effect on encoded svg image

.{
      fill: #f00; //neither this
      background-color: #f00; //nor this
}

because all changes over the image must be applied directly to its svg code

<svg xmlns="" path="" fill="#f00"/></svg>

To achive the location righthand i copied some Bootstrap spacing and my final css get the next look:

.calendarIcon{
      background-image: url("data:image/svg+xml,%3Csvg...svg%3E");
      background-repeat: no-repeat;
      padding-right: calc(1.5em + 0.75rem);
      background-position: center right calc(0.375em + 0.1875rem);
      background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

SVG as background image inlined in style attribute

Use HTML escapes inside the attribute value: " for a double quote, and (in this case not necessary, but if the need arises) ' for a single quote.

<div

  style="background-image: url('data:image/svg+xml;charset=utf8,<svg width="30" height="25" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg" version="1.1"><path d="M3 14.0204L10.8806 21L27 3" stroke="%231CDFAF" stroke-width="5" stroke-linecap="round"/></svg>');"

>

<br style="line-height:25px">

</div>

Add background image in SVG

Correct a syntax error in the path, you are missing a " at the end and remove fill:none from CSS that is overriding the fill attribute used with the path:

Full code:

path {

  stroke: #000;

  stroke-width: 3px;

  stroke-linejoin: round;

  stroke-linecap: round;

}

<svg width="1000" height="700">

    <!-- <rect fill="#fff" width="100%" height="100%"></rect> -->

    <defs>

        <pattern id="img1" patternUnits="userSpaceOnUse" x="0" y="0" width="1000" height="700">

                    <image xlink:href="https://lorempixel.com/600/450/" width="600" height="450" />             

            </pattern>

    </defs>

    <path d="M5,5

        l0,680 l980,0 l0,-680 l-980,0"          

        fill="url(#img1)" />

</svg>

Inline SVG in CSS doing background image

• You're missing the definition of the xlink namespace.
• The # character is reserved in URLs to indicate the start of a fragment identifier. It must be written as %23

That gives us this as a valid URL

data:image/svg+xml;utf8,<svg class='editorial' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none' viewBox='0 24 150 28'><defs><path id='gentle-wave' d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z' /></defs><g class='parallax1'><use xlink:href='%23gentle-wave' x='50' y='3' fill='%23f461c1' /></g></svg>

Try pasting the URL directly into your browser's address bar and it will tell you.

How to make an svg image as a background image with react and Tailwind css?

If you've defined it in the tailwind.config.js file like you mentioned as

theme: {
   extend: {
      backgroundImage:
         {
           'hero_pattern': "url('/public/background.svg)"
         }
     }
 }

The you can simple use it as

<div class="bg-hero_pattern">
   ...
   ...
</div>

I have changed name from hero-pattern to hero_pattern

React SVG component as background-image to div

Unfortunately, what you're trying to achieve is not possible. You'll have to keep your SVG as an actual .svg file (and link to that), or do some CSS trickery to place SVG component behind your foreground-component.

In other words:

<!-- step.svg -->
<svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 193.3 129.7">
  <!-- copy paste your svg here -->
</svg>

And in your component:

import stepSvgUrl from "../../components/UI/SVGs/step.
// ...
<Wrap key={step._id} bg={stepSvgUrl}>

When you import an SVG file like that, create-react-app applies a Webpack loader that includes the generated URL to the SVG you're importing - which is fine to pass into the background-image css property.

Hope this helps!

svg as background image with mask to change the color and with drop-shadow to show the shadow

Apply the mask to a pseudo element because you need an extra element to apply the filter. It should be an element where you don't apply the mask.

.image-container {
  width: 100px;
  height: 100px;
  filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.75));
}
.image-container:before {
  content:"";
  display:block;
  height:100%;
  background-color: #E1A95F;
  -webkit-mask-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg");
  -webkit-mask-size: cover;
}

<div class="image-container"></div>

---

Related Topics