SVG Data URI with Compression

[joeyhoer]

The test below illustrates an issue compiling SVG data URIs. When compressed (with YUI), the whitespace is collapsed within the markup, and that leads to breakage.

.test {
border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0 24,26"><filter id="dropshadow" height="150%" width="150%"><feGaussianBlur in="SourceAlpha" stdDeviation="2"></feGaussianBlur><feOffset dx="0" dy="1" result="offsetblur"></feOffset><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><polygon fill="hsl(0, 0%, 100%)" filter="url(#dropshadow)" points="12,3 2,13 12,23 22,13"></polygon></svg>') 30.76923% 29.16667% repeat;
border-width: 0 0 8px;
border-style: solid;
background-clip: padding-box;
margin-bottom: -8px;
    position: relative;
}

[kares]

Hey Joey, does this work with less.js than (e.g. in the browser or on node) ?

[joeyhoer]

I haven't installed Node (or npm) on my system, so I can't confirm if it compiles the same on Node. Less.js in the browser doesn't have a compile option. It's occurs specifically when the code is compressed.