Question 262622 in CSS Question posted in
Some basic documentation can be found here.

Css – SASS is failing to compile SVGs as background images due to not recognising `%3C`. Is there a work around?

I’m compiling SASS in a Create-React-App project on a MacOS environment, with Node.js.

I’m running into an issue where my project fails to compile due to the UTF-8 characters %3C and %3E(representing < and >), eg in the CSS rule:

  background-image: url("data:image/svg+xml,%3Csvg...svg%3E");

Would anyone know if there’s an alternative to using %3C and %3E when placing the SVG source code in a .scss file?

EDIT:

Error I’m getting in Storybook:

SassError: Undefined variable.
node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].oneOf[7].use[4]!./src/styles/components/components.scss
undefined

274 │background-image: url("data:image/svg+xml,%3Csvg width=’464′ height=’243′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cg
#{$fill-stroke} fill-rule=’evenodd’%3E%3Cpath d=’M463.409 18.439l-.02 223.245L364.326 130.1l99.084-111.661zM231.847.5c10.354 0 20.063 4.372 26.808 12.006h0l104.333 117.516L263.256 242.5H1.112L205.216 12.505A35.488 35.488 0 01231.847.5z’/%3E%3C/g%3E%3C/svg%3E");
│
^^^^^^^^^^^^

src/styles/mixins/_svgs.scss 274:123 keyline()

The SCSS in question is a mixin (you could hard-code the variables to test):

@mixin keyline($color: 'green', $style: 'stroke') {
    $colorcode: colourcode($color);
    @if $style == fill {
        $fill-stroke: "fill='%23#{$colorcode}'";
    }
    @else {
       $fill-stroke: "fill='none' stroke='%23#{$colorcode}'";
    }
    background-image: url("data:image/svg+xml,%3Csvg width='464' height='243' xmlns='http://www.w3.org/2000/svg'%3E%3Cg #{$fill-stroke} fill-rule='evenodd'%3E%3Cpath d='M463.409 18.439l-.02 223.245L364.326 130.1l99.084-111.661zM231.847.5c10.354 0 20.063 4.372 26.808 12.006h0l104.333 117.516L263.256 242.5H1.112L205.216 12.505A35.488 35.488 0 01231.847.5z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
}
Tags:

2

Answers


  1. 0

    There is nothing wrong with the SASS compiler, your SASS code compiles successfully.

    Executing:

    echo '.foo {background-image: url("data:image/svg+xml,%3Csvg width='464' height='243' xmlns='http://www.w3.org/2000/svg'%3E%3Cg #123456 fill-rule='evenodd'%3E%3Cpath d='M463.409 18.439l-.02 223.245L364.326 130.1l99.084-111.661zM231.847.5c10.354 0 20.063 4.372 26.808 12.006h0l104.333 117.516L263.256 242.5H1.112L205.216 12.505A35.488 35.488 0 01231.847.5z'/%3E%3C/g%3E%3C/svg%3E");}' | sass --stdin

    Gives:

    .foo {
  background-image: url("data:image/svg+xml,%3Csvg width=464 height=243 xmlns=http://www.w3.org/2000/svg%3E%3Cg #123456 fill-rule=evenodd%3E%3Cpath d=M463.409 18.439l-.02 223.245L364.326 130.1l99.084-111.661zM231.847.5c10.354 0 20.063 4.372 26.808 12.006h0l104.333 117.516L263.256 242.5H1.112L205.216 12.505A35.488 35.488 0 01231.847.5z/%3E%3C/g%3E%3C/svg%3E");
}

    So, whatever issue you are facing is not SASS-related – and in my opinion should not be tagged or titled as such.

    EDIT: Seeing your update, you should re-title and re-tag your question to make clear that you have an issue with Storybook. You are trying to bundle CSS into JavaScript, and have an issue with that; this is not related to SASS at all.

    Login or Signup to reply.
  2. 0

    Note the SassError: Undefined variable part of the error: the SVG data-uri has ... #{$fill-stroke} ... in it, and the keyline mixin can’t replace that $fill-stroke because by the time it tries to do so, that variable (no longer) exists.

    With the example above, change the mixin to:

    @mixin keyline($color: 'green', $style: 'stroke') {
    $colorcode: colourcode($color);
    $fill-stroke: "fill='none' stroke='%23#{$colorcode}'";
    @if $style == fill {
        $fill-stroke: "fill='%23#{$colorcode}'";
    }
    background-image: url("data:image/svg+xml,%3Csvg...#{$fill-stroke}...%3C/svg%3E");
    background-repeat: no-repeat;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search