Django-compressor: xml parsing error in svg image url after compression

Created on 26 May 2018  ·  2Comments  ·  Source: django-compressor/django-compressor

I have compressed bootstrap.min.js using django_compressor

the navbar collapse icon is not rendering due to XML parsing error.
I am using bootstrap4, I didn't face such problem with bootstrap3

i saw the difference using inspect element in firefox

No error (without compression)

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
}

this gives XML error (after compression)

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3CsvgviewBox='003030'xmlns='http://www.w3.org/2000/svg'%3E%3Cpathstroke='rgba(255,255,255,0.5)'stroke-width='2'stroke-linecap='round'stroke-miterlimit='10'd='M47h22M415h22M423h22'/%3E%3C/svg%3E")
}
bug

Most helpful comment

I can confirm this is still happening, despite the changes in #828

I'm using Django 2.0, Python 3.6, django-compressor 2.2, Bootstrap 4.1.1

The problem is caused by CSSMinFilter

All 2 comments

I can confirm this is still happening, despite the changes in #828

I'm using Django 2.0, Python 3.6, django-compressor 2.2, Bootstrap 4.1.1

The problem is caused by CSSMinFilter

Borrowing from a workaround for csscompressor, I added a custom filter to wrap rcssmin (replace CSSMinFilter in settings.COMPRESS_FILTERS with the dotted path string to this filter and change the callback path). This will replace spaces in data URLs with "%20" before handing off to rcssmin which prevents rcssmin from mangling the URLs.

def compress(css, **kwargs):
    capture_svg = re.compile(r'url\("(data:image/svg.*?svg%3[Ee])\"\)')
    data_urls = re.findall(capture_svg, css)
    for data_url in data_urls:
        css = css.replace(data_url, data_url.replace(' ', '%20'))
    css = cssmin(css, **kwargs)
    return css


class CSSMinFilter(CallbackOutputFilter):
    callback = 'myapp.core.utils.compress'

This issue has also been reported to rcssmin.

FYI, this issue appears to be a duplicate of #878.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

dasloss picture dasloss  ·  6Comments

albertyw picture albertyw  ·  16Comments

bobort picture bobort  ·  20Comments

amosjyng picture amosjyng  ·  5Comments

alper picture alper  ·  24Comments