SVG code not saved in <> code editor

:technologist:In an external code application, I’m creating a styled table. It’s for a feature list. I would like to use an SVG-coded icon for visual confirmation. :white_check_mark:

The SVG code I have on my local machine is displayed perfectly. When I paste it into the source-code field in the content, the code is saved, and while saving, the SVG code is cleaned out! :soap:

Resulting in a perfect feature list without the icon… :slightly_frowning_face:

You might need to add the SVG tag to the tinymcerte.valid_elements system setting.

Some more info

Or, put your SVG code in a chunk and call that from your content field

Thank you for the quick reply it’s a bit difficult to do when you are a “client” and don’t have the priveledges to work directly in MODx.

It also removes the code for emojis. Is that the same function?

I will have a look at the MORE INFO link. :pray:

If you have really restricted access then I’m not sure how you’ll be able to achieve this.

Are you able to see the Elements tab here:

image

If so, you should find Chunks in there.

Create a new Chunk called your-chunk-name

Paste in your SVG code and save it.

Then in your page content - call your Chunk like this:

[[$your-chunk-name]]

An emoji is just a unicode character.
If you can’t save it, then most likely you have the wrong character set in your database. Make sure you use one of the utf8mb4 charsets.

What @halftrainedharry says is correct about emojis, you’ll need to make sure your database tables and columns are using utf8mb4 character sets.

As you have tagged this as content blocks, could you clarify (perhaps with a screenshot) what type of source code field you have access to when pasting in the SVG? There are different ways that could be setup.

I didn’t have the :watch:time to look at the database character set yet. Hope to do so soon. Need to figure out how to do that and first where to look. :eyes:

Hi @uxpascal, like Mark mentioned, please provide some screenshots from where and how you try to accomplish this :+1:t4:

Another way to accomplish this, is to add the visual confirmation icon to CSS-styles for your particular feature-list, which of course would need a custom class, or at least be technically unique somehow.