SVG in WYSIWYG

[shandyw]

I have an interactive SVG I need to put in a WYSIWYG field (or any field).
I have included the function to allow SVG tags explained here: , but the SVG is still being stripped out.

Wondering if something else in Flynt is blocking it? Anyone have any ideas?

This is the SVG I am working with:

This is the function I have added to the /inc folder:

`add_filter('wp_kses_allowed_html', 'acf_add_allowed_svg_tag', 10, 2);
function acf_add_allowed_svg_tag($tags, $context)
{
if ($context === 'acf') {
$tags['svg'] = [
'xmlns' => true,
'width' => true,
'height' => true,
'preserveAspectRatio' => true,
'fill' => true,
'viewbox' => true,
'role' => true,
'aria-hidden' => true,
'focusable' => true
];
$tags['path'] = [
'd' => true,
'fill' => true,
];
$tags['g'] = [
'id' => true,
'xmlns' => true,
'clip-path' => true
];
$tags['path'] = [
'id' => true,
'd' => true,
'fill' => true,
'class' => true
];
$tags['clippath'] = [
'id' => true
];
}

return $tags;

}`

[timohubois]

@shandyw In general, this behavior should not getting produced from Flynt. Flynt provides a helper function getContents inside its Asset class, which we often use for such kind of cases.

If the svg should be rendered inside the markup directly i would suggest to use a separate field for the svg file (for example an image field) and then use a filter inside functions.php file of your component to get the content of it:

use Flynt\Utils\Asset;

add_filter('Flynt/addComponentData?name=YourComponent', function (array $data): array {
    $svgFullpath = 'fullPathOfYourSvg'; // maybe get the path from the image field.
    $data['rawSvg'] = Asset::getContents("{$svgFullpath}");
    return $data;
});

After this {{ rawSvg }} should be usable inside the .twig file of the component.

We also use a similar approach for some premium components (List Social or Navigation Footer Columns), but there are the svg files part of the component itself.

Hope this helps?

[shandyw]

Thank you so much @timohubois! I really appreciate your responsiveness.

[aaronmeder]

@shandyw for the records you can output the svg directly in your twig templates like this alternatively to the PHP approach explained by Timo above:

{% include 'assets/icons/scroll-down.svg' %}

[kunsang]

I am always using this in inc/mimeTypes.php I think SVG support hasn't yet arrived in wordpress core.

<?php

/**
 * Adds SVG to the mime types supported
 */

namespace Flynt\MimeTypes;

add_filter('upload_mimes', function ($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
});

[shandyw]

Thanks @kunsang! I might try to turn that into an select option in acf. IE: show svg code if dynamic or styling needed, show img src if not. :D