• 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)" with fill="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 a url() declaration.

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)

The topic ‘Breeze CSS minify causes errors with inline SVGs’ is closed to new replies.