Inline SVG image is broken in proudction mode, because whitespaces are removed

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Inline SVG image is broken in proudction mode, because whitespaces are removed

balapal
Hi!

I have this in my *.less* file

*background-image: url("data:image/svg+xml,%3Csvg width='32' height='32'
viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath
<http://www.w3.org/2000/svg'%3E%3Cpath> d='M5.414 11L4 12.414l5.414
5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff'
fill-rule='nonzero'/%3E%3C/svg%3E ");*

Which works fine unless I run it with *-Dtapestry.production-mode=true*,
becuase then the whitespaces get removed breaking the SVG definition:
*url("data:image/svg+xml,%3Csvgwidth='32'height='32'viewBox='003232'xmlns='http://www.w3.org/2000/svg'%3E%3Cpathd='M5.41411L412.414l5.4145.414L20.8286.41419.4145l-1010z'fill='%23fff'fill-rule='nonzero'/%3E%3C/svg%3E
<http://www.w3.org/2000/svg'%3E%3Cpathd='M5.41411L412.414l5.4145.414L20.8286.41419.4145l-1010z'fill='%23fff'fill-rule='nonzero'/%3E%3C/svg%3E>")*

(it is surely to do with *-Dtapestry.production-mode=true* , becuase the
issue does not manifest when I run it with
*-Dtapestry.compress-whitespace=true* *-Dtapestry.production-mode=false*)

Any suggestions how to workaround this issue?

Many thanks,
Balazs
Reply | Threaded
Open this post in threaded view
|

Re: Inline SVG image is broken in proudction mode, because whitespaces are removed

Ben Weidig
Hi,

we ran into the same issue...

production-mode=true enables resource minimizing and you are hitting an
open bug in YUICompressor since 2014

https://github.com/yui/yuicompressor/issues/304
https://github.com/yui/yuicompressor/issues/141
and some more...

We stopped using inline-SVGs because of this and moved everything to assets.

The workaround we're planning is replace the
org.apache.tapestry5.internal.webresources.CSSMinimizer by overriding the
contribution found
in org.apache.tapestry5.webresources.modules.WebResourcesModule.class:84
with another minimizer.


Ben

On Fri, Jan 4, 2019 at 2:16 PM Balázs Palcsó <[hidden email]>
wrote:

> Hi!
>
> I have this in my *.less* file
>
> *background-image: url("data:image/svg+xml,%3Csvg width='32' height='32'
> viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath
> <http://www.w3.org/2000/svg'%3E%3Cpath> d='M5.414 11L4 12.414l5.414
> 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff'
> fill-rule='nonzero'/%3E%3C/svg%3E ");*
>
> Which works fine unless I run it with *-Dtapestry.production-mode=true*,
> becuase then the whitespaces get removed breaking the SVG definition:
> *url("data:image/svg+xml,%3Csvgwidth='32'height='32'viewBox='003232'xmlns='
> http://www.w3.org/2000/svg'%3E%3Cpathd='M5.41411L412.414l5.4145.414L20.8286.41419.4145l-1010z'fill='%23fff'fill-rule='nonzero'/%3E%3C/svg%3E
> <
> http://www.w3.org/2000/svg'%3E%3Cpathd='M5.41411L412.414l5.4145.414L20.8286.41419.4145l-1010z'fill='%23fff'fill-rule='nonzero'/%3E%3C/svg%3E
> >")*
>
> (it is surely to do with *-Dtapestry.production-mode=true* , becuase the
> issue does not manifest when I run it with
> *-Dtapestry.compress-whitespace=true* *-Dtapestry.production-mode=false*)
>
> Any suggestions how to workaround this issue?
>
> Many thanks,
> Balazs
>
Reply | Threaded
Open this post in threaded view
|

Re: Inline SVG image is broken in proudction mode, because whitespaces are removed

balapal
In reply to this post by balapal
It looks it is an open bug in YUI compressor:
https://github.com/yui/yuicompressor/issues/141




On Fri, 4 Jan 2019 at 14:16, Balázs Palcsó <[hidden email]> wrote:

> Hi!
>
> I have this in my *.less* file
>
> *background-image: url("data:image/svg+xml,%3Csvg width='32' height='32'
> viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath
> <http://www.w3.org/2000/svg'%3E%3Cpath> d='M5.414 11L4 12.414l5.414
> 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff'
> fill-rule='nonzero'/%3E%3C/svg%3E ");*
>
> Which works fine unless I run it with *-Dtapestry.production-mode=true*,
> becuase then the whitespaces get removed breaking the SVG definition:
> *url("data:image/svg+xml,%3Csvgwidth='32'height='32'viewBox='003232'xmlns='http://www.w3.org/2000/svg'%3E%3Cpathd='M5.41411L412.414l5.4145.414L20.8286.41419.4145l-1010z'fill='%23fff'fill-rule='nonzero'/%3E%3C/svg%3E
> <http://www.w3.org/2000/svg'%3E%3Cpathd='M5.41411L412.414l5.4145.414L20.8286.41419.4145l-1010z'fill='%23fff'fill-rule='nonzero'/%3E%3C/svg%3E>")*
>
> (it is surely to do with *-Dtapestry.production-mode=true* , becuase the
> issue does not manifest when I run it with
> *-Dtapestry.compress-whitespace=true* *-Dtapestry.production-mode=false*)
>
> Any suggestions how to workaround this issue?
>
> Many thanks,
> Balazs
>
Reply | Threaded
Open this post in threaded view
|

Re: Inline SVG image is broken in proudction mode, because whitespaces are removed

balapal
In reply to this post by Ben Weidig
Thanks Ben,

I have also moved it to an external SVG file for now.



On Fri, 4 Jan 2019 at 14:30, Ben Weidig <[hidden email]> wrote:

> Hi,
>
> we ran into the same issue...
>
> production-mode=true enables resource minimizing and you are hitting an
> open bug in YUICompressor since 2014
>
> https://github.com/yui/yuicompressor/issues/304
> https://github.com/yui/yuicompressor/issues/141
> and some more...
>
> We stopped using inline-SVGs because of this and moved everything to
> assets.
>
> The workaround we're planning is replace the
> org.apache.tapestry5.internal.webresources.CSSMinimizer by overriding the
> contribution found
> in org.apache.tapestry5.webresources.modules.WebResourcesModule.class:84
> with another minimizer.
>
>
> Ben
>
> On Fri, Jan 4, 2019 at 2:16 PM Balázs Palcsó <[hidden email]>
> wrote:
>
> > Hi!
> >
> > I have this in my *.less* file
> >
> > *background-image: url("data:image/svg+xml,%3Csvg width='32' height='32'
> > viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath
> > <http://www.w3.org/2000/svg'%3E%3Cpath> d='M5.414 11L4 12.414l5.414
> > 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff'
> > fill-rule='nonzero'/%3E%3C/svg%3E ");*
> >
> > Which works fine unless I run it with *-Dtapestry.production-mode=true*,
> > becuase then the whitespaces get removed breaking the SVG definition:
> >
> *url("data:image/svg+xml,%3Csvgwidth='32'height='32'viewBox='003232'xmlns='
> >
> http://www.w3.org/2000/svg'%3E%3Cpathd='M5.41411L412.414l5.4145.414L20.8286.41419.4145l-1010z'fill='%23fff'fill-rule='nonzero'/%3E%3C/svg%3E
> > <
> >
> http://www.w3.org/2000/svg'%3E%3Cpathd='M5.41411L412.414l5.4145.414L20.8286.41419.4145l-1010z'fill='%23fff'fill-rule='nonzero'/%3E%3C/svg%3E
> > >")*
> >
> > (it is surely to do with *-Dtapestry.production-mode=true* , becuase the
> > issue does not manifest when I run it with
> > *-Dtapestry.compress-whitespace=true* *-Dtapestry.production-mode=false*)
> >
> > Any suggestions how to workaround this issue?
> >
> > Many thanks,
> > Balazs
> >
>
Reply | Threaded
Open this post in threaded view
|

Re: Inline SVG image is broken in proudction mode, because whitespaces are removed

balapal
I have created a JIRA for this:
https://issues.apache.org/jira/browse/TAP5-2606
I will commit a fix once I get my commit access to Tapestry git repo.

On Fri, 4 Jan 2019 at 15:31, Balázs Palcsó <[hidden email]> wrote:

> Thanks Ben,
>
> I have also moved it to an external SVG file for now.
>
>
>
> On Fri, 4 Jan 2019 at 14:30, Ben Weidig <[hidden email]> wrote:
>
>> Hi,
>>
>> we ran into the same issue...
>>
>> production-mode=true enables resource minimizing and you are hitting an
>> open bug in YUICompressor since 2014
>>
>> https://github.com/yui/yuicompressor/issues/304
>> https://github.com/yui/yuicompressor/issues/141
>> and some more...
>>
>> We stopped using inline-SVGs because of this and moved everything to
>> assets.
>>
>> The workaround we're planning is replace the
>> org.apache.tapestry5.internal.webresources.CSSMinimizer by overriding the
>> contribution found
>> in org.apache.tapestry5.webresources.modules.WebResourcesModule.class:84
>> with another minimizer.
>>
>>
>> Ben
>>
>> On Fri, Jan 4, 2019 at 2:16 PM Balázs Palcsó <[hidden email]>
>> wrote:
>>
>> > Hi!
>> >
>> > I have this in my *.less* file
>> >
>> > *background-image: url("data:image/svg+xml,%3Csvg width='32' height='32'
>> > viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath
>> > <http://www.w3.org/2000/svg'%3E%3Cpath> d='M5.414 11L4 12.414l5.414
>> > 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff'
>> > fill-rule='nonzero'/%3E%3C/svg%3E ");*
>> >
>> > Which works fine unless I run it with *-Dtapestry.production-mode=true*,
>> > becuase then the whitespaces get removed breaking the SVG definition:
>> >
>> *url("data:image/svg+xml,%3Csvgwidth='32'height='32'viewBox='003232'xmlns='
>> >
>> http://www.w3.org/2000/svg'%3E%3Cpathd='M5.41411L412.414l5.4145.414L20.8286.41419.4145l-1010z'fill='%23fff'fill-rule='nonzero'/%3E%3C/svg%3E
>> > <
>> >
>> http://www.w3.org/2000/svg'%3E%3Cpathd='M5.41411L412.414l5.4145.414L20.8286.41419.4145l-1010z'fill='%23fff'fill-rule='nonzero'/%3E%3C/svg%3E
>> > >")*
>> >
>> > (it is surely to do with *-Dtapestry.production-mode=true* , becuase the
>> > issue does not manifest when I run it with
>> > *-Dtapestry.compress-whitespace=true*
>> *-Dtapestry.production-mode=false*)
>> >
>> > Any suggestions how to workaround this issue?
>> >
>> > Many thanks,
>> > Balazs
>> >
>>
>