Adding an SVG with Path to css class not working

Question

For some reason, this svg isn't showing up when I set it to class.

Can anyone see why this is?

(using vue.js, class added as a regular class no binding. Have tested other background images and gradients and they are working, so is something specific to the code below).

Thanks.

<style lang="scss" scoped>
.curved-div {
  display: block;
  background-image: url("data:image/svg+xml;utf8,
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'>
  <path fill='#0099ff' fill-opacity='1' d='M0,96L60,128C120,160,240,224,360,218.7C480,213,600,139,720,122.7C840,107,960,149,1080,176C1200,203,1320,213,1380,218.7L1440,224L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z'></path></svg>");
}
 </style>

`#` won't play nicely. Use a tool like [URL encoder](https://yoksel.github.io/url-encoder/) to get a usable value. — chriskirknielsen, Mar 10 '20 at 17:54

score 2 · Answer 1 · answered Mar 10 '20 at 18:09

After URL-encoding your SVG using the tool mentioned in the comments, this is now working. I added the height: 50px just to prove it's working.

.curved-div {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%230099ff' fill-opacity='1' d='M0,96L60,128C120,160,240,224,360,218.7C480,213,600,139,720,122.7C840,107,960,149,1080,176C1200,203,1320,213,1380,218.7L1440,224L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
  height: 50px;
}

<div class="curved-div"></div>

score 1 · Accepted Answer · answered Mar 10 '20 at 18:16

The # must be url escaped (replaced with %23):

.curved-div {

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' viewBox='0 0 1440 320'><path fill='%230099ff' fill-opacity='1' d='M0,96L60,128C120,160,240,224,360,218.7C480,213,600,139,720,122.7C840,107,960,149,1080,176C1200,203,1320,213,1380,218.7L1440,224L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z' /></svg>");
}


.svg, svg {
  width: 150px; 
  height: 100px;

  background-repeat: no-repeat;
  background-color: lightgrey;

}

<div class="svg curved-div"></div>

Adding an SVG with Path to css class not working

2 Answers2