Breeze CSS minify causes errors with inline SVGs
-
In a lot of cases I’m using inline SVGs in my CSS. I’ve just discovered that, with Breeze’s CSS minification turned on, it adds absolute URLs to all
url()values, including gradients in SVG images. For example, take an SVG with a gradient like this:<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient y2="0" x2="1" y1="0" x1="0" id="svg_2"> <stop offset="0" stop-opacity="0.996094" stop-color="#bf0000"/> <stop offset="1" stop-opacity="0.996094" stop-color="#bf00bf"/> </linearGradient> </defs> <ellipse ry="150" rx="150" id="svg_1" cy="150" cx="150" stroke-width="0" stroke="#fff" fill="url(#svg_2)"/> </svg>In CSS, you’d declare it inline like this:
background-image: url('data:image/svg+xml,<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient y2="0" x2="1" y1="0" x1="0" id="svg_2"><stop offset="0" stop-opacity="0.996094" stop-color="#bf0000"/><stop offset="1" stop-opacity="0.996094" stop-color="#bf00bf"/></linearGradient></defs><ellipse ry="150" rx="150" id="svg_1" cy="150" cx="150" stroke-width="0" stroke="#fff" fill="url(#svg_2)"/></svg>');The problem is, Breeze’s minification replaces
fill="url(#svg_2)"withfill="url(//example.com/wp-content/themes/sitetheme/#svg_2)", which is obviously breaking the gradient fill.I haven’t taken a look at the code, but my suggestion would be to NOT put in an absolute path for any
url()s that are inside aurl()declaration.
The topic ‘Breeze CSS minify causes errors with inline SVGs’ is closed to new replies.