You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#107608 Inline SVG

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Ryan on Thursday, 02 November 2023 10:02 GMT

DaveSkye
Hello

How do I stop JCE striping out inline svg's?

I also need to have xlink's within the SVG.

Cheers. - Dave.

Ryan
Download and install the SVG plugin - https://github.com/widgetfactory/jce-editor-svg - and add it to the editor profile in the Features & Layout tab.

Then, optionally, set Enable Code Blocks and Enable Custom XML in Editor Profiles -> Editor Parameters -> Advanced, to show the svg code in the editor, eg:

https://cdn.joomlacontenteditor.net/tmp/107608-inline-svg.jpg

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

DaveSkye
Hello Ryan

Ok done that and the inline SVG is working, however the xlink is still being striped out. (<a xlink:href="https://www.joomlacontenteditor.net/#"></a>) leaving a basic<a> tag which won't work from within the SVG.

Any tips to getting the xlink working?

Cheers. - Dave.

Ryan
Please try 1.0.3 of the SVG plugin - https://github.com/widgetfactory/jce-editor-svg/releases/tag/1.0.3

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

jooomlaa
Hi Ryan,

I'm desperate. No matter what I do, as soon as I switch the editor from code view to editor mode, my SVG inline code is thrown out. I have the SVG plugin installed, activated, block and XML enabled in the profile configuration. I am using the latest version of Joomla and JCE. What am I doing wrong?

jooomlaa
Hi Ryan, I think I figured out when it happens. When I paste the SVG code and switch editor mode and/or save the SVG code is not deleted. However, as soon as I enclose the SVG code in a DIV tag or a p-tag, for example, the SVG code is removed and only the enclosing DIV tag remains. That would be very sad if you could only insert SVG at the lowest levels.

<p></p>
<div class="my-selector">
	<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 48 48" width="48px" height="48px">
		<path fill="#3F51B5" d="M42,37c0,2.762-2.238,5-5,5H11c-2.761,0-5-2.238-5-5V11c0-2.762,2.239-5,5-5h26c2.762,0,5,2.238,5,5V37z"></path>
		<path fill="#FFF" d="M34.368,25H31v13h-5V25h-3v-4h3v-2.41c0.002-3.508,1.459-5.59,5.592-5.59H35v4h-2.287C31.104,17,31,17.6,31,18.723V21h4L34.368,25z"></path>
	</svg>
</div>
<p></p>
>>>

<p></p>
<div class="my-selector"> </div>
<p></p>

Ryan
However, as soon as I enclose the SVG code in a DIV tag or a p-tag, for example, the SVG code is removed and only the enclosing DIV tag remains.


This is working fine in my tests with the code you have posted here.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

jooomlaa
Oh, that's surprising. Then I'm still faced with a puzzle.
What I found: When I try this in a custom joomla-module with editor, it works without deleting the SVG code, the same code is deleted when saving a Joomla article.

Ryan
What I found: When I try this in a custom joomla-module with editor, it works without deleting the SVG code, the same code is deleted when saving a Joomla article.


So the code is only removed when you save? If this is the case then the code is being removed by the Joomla Text Filter.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

jooomlaa
As a SuperUser, I don't have any filters active for Joomla. Surprisingly, it works now without having to change anything. But I had logged out and logged back in.
But what's strange is the following: If I insert the SVG graphic at the lowest level, the XML code is displayed. If I put it in a DIV or P tag, then the SVG icon is displayed graphically.

Attachments

Ryan
If I insert the SVG graphic at the lowest level, the XML code is displayed. If I put it in a DIV or P tag, then the SVG icon is displayed graphically.


Code Blocks XML display is only available in this instance when the SVG code is at the root level.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

[email protected]
Please try 1.0.3 of the SVG plugin - https://github.com/widgetfactory/jce-editor-svg/releases/tag/1.0.3


Sorry the repositories not exist enymore?

Ryan
You can download the plugin here - https://www.joomlacontenteditor.net/downloads/plugins/editor-svg

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.