search

Swaagie / minimize

Minimize HTML
MIT License
162 stars 18 forks source link

Problem with SVG #41

Closed pixelomo closed 9 years ago

pixelomo commented 9 years ago

I'm experiencing an issue when minimizing svg markup, I'm using the gulp-minify-html plugin which makes use of minimize, I initially reported it to that developer but he pointed me in your direction

https://github.com/jonathanepollack/gulp-minify-html/issues/22#event-286358362

I'm using svg filters on html5 video. My svg code is:

<svg id='image' version="1.1" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                                <filter id="blurEffect">
                                    <feGaussianBlur stdDeviation="4"/>
                                </filter>
                                <filter id="turbulence">
                                    <feTurbulence baseFrequency=".01" type="fractalNoise" numOctaves="3" seed="23" stitchTiles="stitch"/>
                                </filter>
                                <filter id="blur">
                                    <feGaussianBlur stdDeviation="10,3" result="outBlur"/>
                                </filter>
                                <filter id="inverse">
                                    <feComponentTransfer>
                                        <feFuncR type="table" tableValues="1 0"/>
                                        <feFuncG type="table" tableValues="1 0"/>
                                        <feFuncB type="table" tableValues="1 0"/>
                                    </feComponentTransfer>
                                </filter>
                                <filter id="convolve">
                                    <feConvolveMatrix order="3" kernelMatrix="1 -1  1 -1 -0.01 -1 1 -1 1" edgeMode="duplicate" result="convo"/>
                                </filter>
                                <filter id="blackandwhite">
                                    <feColorMatrix values="0.3333 0.3333 0.3333 0 0
                                    0.3333 0.3333 0.3333 0 0
                                    0.3333 0.3333 0.3333 0 0
                                    0      0      0      1 0"/>
                                </filter>
                                <filter id="convolve2">
                                    <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" order="3" kernelMatrix="0 -1 0   -1 4 -1   0 -1 0" preserveAlpha="true"/>
                                </filter>
                                <filter id="offset" x="-10%" y="-20%" height="230%" width="140%" transform="translate(90,0)">
                                    <feGaussianBlur stdDeviation="14"/>
                                    <feOffset dx="0" dy="240" result="B"/>
                                    <feMerge>
                                        <feMergeNode in="B"/>
                                        <feMergeNode in="SourceGraphic"/>
                                    </feMerge>
                                </filter>
                                <filter id="myblur">
                                    <feGaussianBlur stdDeviation="1"/>
                                </filter>
                                <filter id="myconvolve">
                                    <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" order="3" kernelMatrix="0 -1 0   -1 4 -1   0 -1 0" preserveAlpha="true"/>
                                </filter>
                                <filter id="bluefill" x="0%" y="0%" width="100%" height="100%">
                                    <feFlood flood-color="blue" result="A"/>
                                    <feColorMatrix type="matrix" in="SourceGraphic" result="B" values="1   0  0  0 0  
                                    0   1  0  0 0   
                                    0   0  1  0 0   
                                    1   1  1  0 0
                                    "/>
                                    <feMerge>
                                        <feMergeNode in="A"/>
                                        <feMergeNode in="B"/>
                                    </feMerge>
                                </filter>
                                <filter id="noir">
                                    <feGaussianBlur stdDeviation="1.5"/>
                                    <feComponentTransfer>
                                        <feFuncR type="discrete" tableValues="0 .5 1 1"/>
                                        <feFuncG type="discrete" tableValues="0 .5 1"/>
                                        <feFuncB type="discrete" tableValues="0"/>
                                    </feComponentTransfer>
                                </filter>
                            </defs>
                        </svg>

Minified it comes through as this:

<svg id=image version=1.1 xmlns=http://www.w3.org/2000/svg><defs><filter id=blurEffect><fegaussianblur stddeviation=4></fegaussianblur></filter><filter id=turbulence><feturbulence basefrequency=.01 type=fractalNoise numoctaves=3 seed=23 stitchtiles=stitch></feturbulence></filter><filter id=blur><fegaussianblur stddeviation=10,3 result=outBlur></fegaussianblur></filter><filter id=inverse><fecomponenttransfer><fefuncr type=table tablevalues="1 0"><fefuncg type=table tablevalues="1 0"><fefuncb type=table tablevalues="1 0"></fefuncb></fefuncg></fefuncr></fecomponenttransfer></filter><filter id=convolve><feconvolvematrix order=3 kernelmatrix="1 -1 1 -1 -0.01 -1 1 -1 1" edgemode=duplicate result=convo></feconvolvematrix></filter><filter id=blackandwhite><fecolormatrix values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"></fecolormatrix></filter><filter id=convolve2><feconvolvematrix filterres="100 100" style=color-interpolation-filters:sRGB order=3 kernelmatrix="0 -1 0 -1 4 -1 0 -1 0" preservealpha=true></feconvolvematrix></filter><filter id=offset x=-10% y=-20% height=230% width=140% transform=translate(90,0)><fegaussianblur stddeviation=14><feoffset dx=0 dy=240 result=B><femerge><femergenode in=B><femergenode in=SourceGraphic></femergenode></femergenode></femerge></feoffset></fegaussianblur></filter><filter id=myblur><fegaussianblur stddeviation=1></fegaussianblur></filter><filter id=myconvolve><feconvolvematrix filterres="100 100" style=color-interpolation-filters:sRGB order=3 kernelmatrix="0 -1 0 -1 4 -1 0 -1 0" preservealpha=true></feconvolvematrix></filter><filter id=bluefill x=0% y=0% width=100% height=100%><feflood flood-color=blue result=A><fecolormatrix type=matrix in=SourceGraphic result=B values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 1 1 1 0 0"><femerge><femergenode in=A><femergenode in=B></femergenode></femergenode></femerge></fecolormatrix></feflood></filter><filter id=noir><fegaussianblur stddeviation=1.5><fecomponenttransfer><fefuncr type=discrete tablevalues="0 .5 1 1"><fefuncg type=discrete tablevalues="0 .5 1"><fefuncb type=discrete tablevalues=0></fefuncb></fefuncg></fefuncr></fecomponenttransfer></fegaussianblur></filter></defs></svg>

Some of the filters work but others are broken

Swaagie commented 9 years ago

This is a known issue, see https://github.com/Moveo/minimize/issues/24 and https://github.com/fb55/htmlparser2/issues/79. Closing this issue in favour of those, please respond there if the fix listed in the first (closing inline elements) does not help.