[wp-trac] [WordPress Trac] #35824: Inline svg icons are not displaying when the page is viewed from Customizer's iframe

[WordPress Trac]

#35824: Inline svg icons are not displaying when the page is viewed from
Customizer's iframe
--------------------------+-----------------------------
 Reporter:  johndoedoe    |       Owner:
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Future Release
Component:  Customize     |     Version:  4.4.2
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:
--------------------------+-----------------------------
Changes (by westonruter):

 * milestone:  Awaiting Review => Future Release


Old description:

> For example if we have inline definition
> {{{
> <svg width="0" height="0" style="position:absolute">
> <symbol viewBox="0 0 14 14" id="icon-money"><path d="M12.3
> 5.5c.1-.3.2-.6.2-1 0-2-2.4-3.5-5.5-3.5S1.5 2.6 1.5 4.5c0 .4.1.7.2
> 1-.1.3-.2.7-.2 1 0 .4.1.7.2 1-.1.3-.2.7-.2 1 0 2 2.4 3.5 5.5 3.5s5.5-1.5
> 5.5-3.5c0-.3-.1-.7-.2-1 .1-.3.2-.6.2-1 0-.3-.1-.6-.2-1zM7 8c1.9 0 3.5-.6
> 4.5-1.5C11.5 7.9 9.4 9 7 9S2.5 7.9 2.5 6.6C3.5 7.5 5.1 8 7 8zm0-6c2.4 0
> 4.5 1.1 4.5 2.5S9.4 7 7 7 2.5 5.9 2.5 4.5 4.6 2 7 2zm0 9c-2.4
> 0-4.5-1.1-4.5-2.5 1 1 2.6 1.5 4.5 1.5s3.5-.6 4.5-1.5C11.5 9.9 9.4 11 7
> 11z"/></symbol>
> </svg>
> }}}
>

> and then use it like this
>
> {{{
> <svg>
> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-
> money"></use>
> </svg>
> }}}
>
> when viewed directly - works fine, but from customizer it is not
> displayed.
> However, the externally linked svg icons
>
> {{{
> <svg>
> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/some-
> sprite.svg#icon-money"></use>
> </svg>
> }}}
>  do work fine.
>

> Tested in chrome and firefox.

New description:

 For example if we have inline definition

 {{{#!xml
 <svg width="0" height="0" style="position:absolute">
 <symbol viewBox="0 0 14 14" id="icon-money"><path d="M12.3
 5.5c.1-.3.2-.6.2-1 0-2-2.4-3.5-5.5-3.5S1.5 2.6 1.5 4.5c0 .4.1.7.2
 1-.1.3-.2.7-.2 1 0 .4.1.7.2 1-.1.3-.2.7-.2 1 0 2 2.4 3.5 5.5 3.5s5.5-1.5
 5.5-3.5c0-.3-.1-.7-.2-1 .1-.3.2-.6.2-1 0-.3-.1-.6-.2-1zM7 8c1.9 0 3.5-.6
 4.5-1.5C11.5 7.9 9.4 9 7 9S2.5 7.9 2.5 6.6C3.5 7.5 5.1 8 7 8zm0-6c2.4 0
 4.5 1.1 4.5 2.5S9.4 7 7 7 2.5 5.9 2.5 4.5 4.6 2 7 2zm0 9c-2.4
 0-4.5-1.1-4.5-2.5 1 1 2.6 1.5 4.5 1.5s3.5-.6 4.5-1.5C11.5 9.9 9.4 11 7
 11z"/></symbol>
 </svg>
 }}}


 and then use it like this

 {{{#!xml
 <svg>
     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-
 money"></use>
 </svg>
 }}}

 when viewed directly - works fine, but from customizer it is not
 displayed.
 However, the externally linked svg icons

 {{{#!xml
 <svg>
     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/some-
 sprite.svg#icon-money"></use>
 </svg>
 }}}

 do work fine.


 Tested in chrome and firefox.

--

Comment:

 I cannot reproduce the issue in Chrome 48, however I can reproduce it in
 Firefox 43.

 I have a feeling that the issue here is similar to #23225 and will be
 resolved with the implementation of #30028.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/35824#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform