Replies: 2
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