CODEWITHSUNDEEP
csssvg
Mike
Mike

Reputation: 5826

Inline SVG in CSS doing background image

I'm trying to do this with Inline SVG inside CSS, but it won't work.

The Original: https://codepen.io/cmdw/pen/vQqzyB

Inline SVG inside CSS:

https://codepen.io/honk007/pen/wvBgxGZ

.divider{
        content                   : " ";
        height                    : 25px;
        width                     : 100%;
        background-image: url("data:image/svg+xml;utf8,<svg class='editorial' xmlns='http://www.w3.org/2000/svg' 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='#gentle-wave' x='50' y='3' fill='#f461c1' /></g></svg>");

        background-size        : 49px 100%;
        -webkit-background-size: 49px 100%;
        position               : absolute;
        top                    : -25px;
    }

I have the feeling the quotes are the problem.

Upvotes: 4

Views: 8030

Answers (2)

Brett DeWoody
Brett DeWoody

Reputation: 62881

Inlining the SVG's might not be a great option here, mostly because of the animations. But here's one way to do it.

Robert Longson pointed out the issues with URL encoding the SVG's. You can also find many online tools to URL encode the SVG.

To achieve the animations we need to duplicate (at least, I think this is necessary) the <path> in each of the inline SVGs. Some tweaking also had to be made to the viewport of the SVGs to get the repeating to align. 

body
{
  margin:0;
  padding:0;
  background-color:#03396c;
}

.divider {
  display: block;
  width: 100%;
  height: 60px;
  max-height: 60px;
  margin: 0;
  bottom:0;
  position:absolute;
  left:0px;
  float:left;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 400%;
  height: 50px;
  background-repeat: repeat;
  background-position: bottom;
}

.parallax1 {
  background: url("data:image/svg+xml,%3Csvg class='editorial' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 24 176 28' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cpath 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' /%3E%3C/defs%3E%3Cg class='parallax1'%3E%3Cuse xlink:href='%23gentle-wave' x='50' y='3' fill='%23f461c1'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 25% 100%;
  animation: move-forever1 15s linear infinite;
}
.parallax2 {
  background: url("data:image/svg+xml,%3Csvg class='editorial' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 24 176 28 ' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cpath 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' /%3E%3C/defs%3E%3Cg class='parallax2'%3E%3Cuse xlink:href='%23gentle-wave' x='50' y='0' fill='%234579e2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 25% 100%;
  animation: move-forever2 18s linear infinite;
}
.parallax3 {
  background: url("data:image/svg+xml,%3Csvg class='editorial' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 24 176 28 ' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cpath 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' /%3E%3C/defs%3E%3Cg class='parallax2'%3E%3Cuse xlink:href='%23gentle-wave' x='50' y='0' fill='%233461c1'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 25% 100%;
  animation: move-forever3 15s linear infinite;
}
.parallax4 {
  background: url("data:image/svg+xml,%3Csvg class='editorial' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 24 176 28 ' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cpath 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' /%3E%3C/defs%3E%3Cg class='parallax2'%3E%3Cuse xlink:href='%23gentle-wave' x='50' y='0' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 25% 100%;
  bottom: -10px;
  animation: move-forever4 8s linear infinite;
}
@keyframes move-forever1 {
  0% {
    transform: translate(0%, 0%);
  }
  100% {
    transform: translate(-75%, 0%);
  }
}
@keyframes move-forever2 {
  0% {
    transform: translate(-75%, 0%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
@keyframes move-forever3 {
  0% {
    transform: translate(-25%, 0%);
  }
  100% {
    transform: translate(-75%, 0%);
  }
}
@keyframes move-forever4 {
  0% {
    transform: translate(-50%, 0%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
<div class="divider">
  <div class="wave parallax1"></div>
  <div class="wave parallax2"></div>
  <div class="wave parallax3"></div>
  <div class="wave parallax4"></div>
</div>

Upvotes: 3

Robert Longson
Robert Longson

Reputation: 124249

  • 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.

Upvotes: 6

Related Questions