Make WordPress Core

Opened 4 years ago

Last modified 4 years ago

#52463 new defect (bug)

Inline SVG - foreignObject support

Reported by: edent's profile edent Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.6.1
Component: Formatting Keywords: 2nd-opinion
Focuses: Cc:

Description

WordPress 5.6.1 mangles SVGs which use the [Foreign Object element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject).

Consider this minimum viable example:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<foreignObject>
	<blockquote xmlns="http://www.w3.org/1999/xhtml">
		Hello
	</blockquote>
</foreignObject>
</svg>

WordPress adds in some </p> which malforms the image:

<p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<foreignObject></p>
<blockquote xmlns="http://www.w3.org/1999/xhtml"><p>
        Hello
    </p></blockquote>
<p></foreignObject>
</svg></p>

This occurs when pasting the raw SVG into the classic editor.

Change History (1)

#1 @sabernhardt
4 years ago

  • Component changed from General to Formatting
  • Keywords 2nd-opinion added

There is a workaround:

  1. Install and activate the Raw HTML plugin.
  2. Paste the SVG inside plugin-specific <!--raw--><!--/raw--> comment tags (or the shortcode) in the Text editor.
<!--raw-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<foreignObject>
	<blockquote xmlns="http://www.w3.org/1999/xhtml">
		Hello
	</blockquote>
</foreignObject>
</svg>
<!--/raw-->
Note: See TracTickets for help on using tickets.