Sass DataURIs unclosed quotes

Question

Sass keeps giving me the unclosed quotes error:

ExecJS::ProgramError - /application.css.scss:10760:41102: Unclosed quote
11:47:13 web.1         |   background-position: right center;
11:47:13 web.1         |   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32" data-icon="check" data-container-transform="translate(0 2)" viewBox="0 0 32 32"> <path fill="#308A28" d="M27.375.25l-2.063 2.188-14.375 15.25-4.313-4.313-2.125-2.125-4.25 4.25 2.125 2.125 6.5 6.5 2.188 2.188 2.125-2.25 16.5-17.5 2.063-2.188-4.375-4.125z" transform="translate(0 2)" /> </svg>');

I can't see where this is unclosed?

button {
    padding-right: 2em;
    background-repeat: no-repeat;
    background-position: right center;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32" data-icon="check" data-container-transform="translate(0 2)" viewBox="0 0 32 32"> <path fill="#308A28" d="M27.375.25l-2.063 2.188-14.375 15.25-4.313-4.313-2.125-2.125-4.25 4.25 2.125 2.125 6.5 6.5 2.188 2.188 2.125-2.25 16.5-17.5 2.063-2.188-4.375-4.125z" transform="translate(0 2)" /> </svg>');

For some reason it renders, but doesn't recognise the fill attribute, if I put escaped quotes around the fill value:

background-image: url('data:image/svg+xml;utf8,'+'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" data-icon="check" data-container-transform="translate(0 2)" viewBox="0 0 32 32">'+'<path fill="\'#308A28\'" d="M27.375.25l-2.063 2.188-14.375 15.25-4.313-4.313-2.125-2.125-4.25 4.25 2.125 2.125 6.5 6.5 2.188 2.188 2.125-2.25 16.5-17.5 2.063-2.188-4.375-4.125z" transform="translate(0 2)" />'+'</svg>');

possible duplicate of [inline svg in css](http://stackoverflow.com/questions/10768451/inline-svg-in-css) — cimmanon, Nov 27 '14 at 01:35
I could not reproduce the error with the provided code when compiled with Sass. — cimmanon, Nov 27 '14 at 01:37
I'll try to base64 method in that question you linked to, but I think this is a separate issue with escaping — equivalentideas, Nov 27 '14 at 03:13

score 0 · Answer 1 · answered Nov 27 '14 at 01:10

A temp fix is to put in a made up attribute foo with two escaped ' as a value:

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" data-icon="check" data-container-transform="translate(0 2)" viewBox="0 0 32 32"><path fill="#308A28" foo="\'\'" d="M27.375.25l-2.063 2.188-14.375 15.25-4.313-4.313-2.125-2.125-4.25 4.25 2.125 2.125 6.5 6.5 2.188 2.188 2.125-2.25 16.5-17.5 2.063-2.188-4.375-4.125z" transform="translate(0 2)" /></svg>');

But this is totally invalid svg and just weird.

Sass DataURIs unclosed quotes

1 Answers1