svg code in plone page

Question

I've been trying to get an SVG element to be displayed on my test website that runs on top of the Plone CMS.

As other posts on this topic already explained, I made sure that in the "HTML filter settings" SVG was not included in the "nasty" or "stripped" tags list and I added it to the "custom tags".

Still, trying to embed a simple SVG example from W3Cschools as shown below, does not display the element.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

Embedding an SVG image with the "object" tag displays an SVG image just fine.

<object data="http://upload.wikimedia.org/wikipedia/en/c/ce/SVG-logo.svg"
type="image/svg+xml"></object> 

Is there any setting in Plone that I forgot to switch on or off? It won't be my browser because the W3Cschools example displays just fine on its own website.

Thanks for any pointers!

Answer 1

Disable portal_transforms->safe_html, restart the server and click 'Edit without visual editor' when editing the item, will work. However, this requires responsible editors (choose secure password, logout, etc.) as scripting-attacks might be possible without the filtering.

EDIT: There are other possibilities, without touching the html-filter-settings, it depends on your requirements. Some ideas:

• Prepare svg-file locally, upload it as an image, insert via TinyMCE.
• Assign a collective.portlet.tal to an item, insert code, position it where you want with Products.ContentWellPortlets.

The first one allows inserting the svg in a contentype's textfield via TinyMCE, second allows editing the svg-element TTW. Can't have it both, though, or?