Incorrect CSS minification for inline SVGs

  • Resolved matikk

    (@matikk)


    6 years ago

    Good day,

    I have CSS files, where I’m using inline SVGs as data images.
    And if any hash(#) symbol exists, it will be prepended with theme path, what is wrong.

    I have this SVG image:

    
<?xml version="1.0" encoding="UTF-8"?>
<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient x1="0.0433673469%" y1="50.0443262%" x2="100.02551%" y2="50.0443262%" id="linearGradient-1">
            <stop stop-color="#1A4697" offset="0%"></stop>
            <stop stop-color="#3150A3" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="flag_estonia_round" fill-rule="nonzero">
            <path d="M24.8795181,0 C13.9156627,0 4.57831325,7.10843373 1.26506024,16.9879518 L48.4939759,16.9879518 C45.1807229,7.10843373 35.9036145,0 24.8795181,0 Z" id="Shape" fill="url(#linearGradient-1)"></path>
            <path d="M24.8795181,49.8192771 C35.8433735,49.8192771 45.1807229,42.7108434 48.4939759,32.8313253 L1.26506024,32.8313253 C4.57831325,42.6506024 13.9156627,49.8192771 24.8795181,49.8192771 Z" id="Shape" fill="#F9F9F9"></path>
            <path d="M49.8192771,24.8795181 C49.8192771,22.1084337 49.3373494,19.4578313 48.5542169,16.9879518 L1.26506024,16.9879518 C0.481927711,19.4578313 0,22.1084337 0,24.8795181 C0,27.6506024 0.481927711,30.3012048 1.26506024,32.7710843 L48.4939759,32.7710843 C49.3373494,30.3012048 49.8192771,27.6506024 49.8192771,24.8795181 Z" id="Shape" fill="#1A1A1A"></path>
        </g>
    </g>
</svg>

    And after CSS minify, I have different inline SVG, where url(#linearGradient-1) converts to url(/wp-content/themes/levelup/#linearGradient-1)

    Examples:

    Before:
    background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='50px' height='50px' viewBox='0 0 50 50' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3ClinearGradient x1='0.0433673469%25' y1='50.0443262%25' x2='100.02551%25' y2='50.0443262%25' id='linearGradient-1'%3E%3Cstop stop-color='%231A4697' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%233150A3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='flag_estonia_round' fill-rule='nonzero'%3E%3Cpath d='M24.8795181,0 C13.9156627,0 4.57831325,7.10843373 1.26506024,16.9879518 L48.4939759,16.9879518 C45.1807229,7.10843373 35.9036145,0 24.8795181,0 Z' id='Shape' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M24.8795181,49.8192771 C35.8433735,49.8192771 45.1807229,42.7108434 48.4939759,32.8313253 L1.26506024,32.8313253 C4.57831325,42.6506024 13.9156627,49.8192771 24.8795181,49.8192771 Z' id='Shape' fill='%23F9F9F9'%3E%3C/path%3E%3Cpath d='M49.8192771,24.8795181 C49.8192771,22.1084337 49.3373494,19.4578313 48.5542169,16.9879518 L1.26506024,16.9879518 C0.481927711,19.4578313 0,22.1084337 0,24.8795181 C0,27.6506024 0.481927711,30.3012048 1.26506024,32.7710843 L48.4939759,32.7710843 C49.3373494,30.3012048 49.8192771,27.6506024 49.8192771,24.8795181 Z' id='Shape' fill='%231A1A1A'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

    After:
    background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='50px' height='50px' viewBox='0 0 50 50' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3ClinearGradient x1='0.0433673469%25' y1='50.0443262%25' x2='100.02551%25' y2='50.0443262%25' id='linearGradient-1'%3E%3Cstop stop-color='%231A4697' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%233150A3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='flag_estonia_round' fill-rule='nonzero'%3E%3Cpath d='M24.8795181,0 C13.9156627,0 4.57831325,7.10843373 1.26506024,16.9879518 L48.4939759,16.9879518 C45.1807229,7.10843373 35.9036145,0 24.8795181,0 Z' id='Shape' fill='url(/wp-content/themes/levelup/%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M24.8795181,49.8192771 C35.8433735,49.8192771 45.1807229,42.7108434 48.4939759,32.8313253 L1.26506024,32.8313253 C4.57831325,42.6506024 13.9156627,49.8192771 24.8795181,49.8192771 Z' id='Shape' fill='%23F9F9F9'%3E%3C/path%3E%3Cpath d='M49.8192771,24.8795181 C49.8192771,22.1084337 49.3373494,19.4578313 48.5542169,16.9879518 L1.26506024,16.9879518 C0.481927711,19.4578313 0,22.1084337 0,24.8795181 C0,27.6506024 0.481927711,30.3012048 1.26506024,32.7710843 L48.4939759,32.7710843 C49.3373494,30.3012048 49.8192771,27.6506024 49.8192771,24.8795181 Z' id='Shape' fill='%231A1A1A'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

    Because of this bug I just can’t use any CSS minifications with this plugin.
    I think it is a bug, I’m really waiting for the fix.

    Best regards

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Contributor Marko Vasiljevic

    (@vmarko)

    6 years ago

    Hello @matikk

    I am sorry about the issue you are experiencing and I am happy to assist you with this.
    Does the issue occur with CSS minification or HTML minification and inlining CSS?
    Thank you!

    Thread Starter matikk

    (@matikk)

    6 years ago

    @vmarko CSS minification, not tested on HTML minification/inlining CSS

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    6 years ago

    Hello @matikk

    Just to confirm, CSS minify is enabled In Performance>Minify
    HTML minify is disabled in Performance>Minify
    Is this correct?

    Thread Starter matikk

    (@matikk)

    6 years ago

    @vmarko yes, this is correct

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    6 years ago

    Hello,
    Thank you for the information.
    We need to test and replicate this. I’ll get back to you as soon as we investigate.
    Thank you!

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    6 years ago

    Hello @matikk

    I’ve spoken to the team and we found what may be causing this.
    I’ve opened a GitHub issue on your behalf in our repository. Please make sure to follow the progress of the issue regularly.
    Thank yoU!

    Thread Starter matikk

    (@matikk)

    6 years ago

    @vmarko Awesome, thank you!

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    6 years ago

    Hello @matikk

    Just to let you know that this is fixed in the latest 0.14.0 release so please make sure to update the plugin.
    Thank you!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Incorrect CSS minification for inline SVGs’ is closed to new replies.