Is it possible to insert inline SVG into the content of a page?

[pftnhr]

For reasons I would like to be able to insert an SVG and a static text via shortcut¹. I've written a small extension for this. Unfortunately, the SVG is fully ignored in the then generated HTML. Here is the code:

<?php
class YellowExample {
    const VERSION = "0.8.15";
    public $yellow;            //access to API

    // Handle initialisation
    public function onLoad($yellow) {
        $this->yellow = $yellow;
    }

    // Handle page content in HTML format
    public function onParseContentShortcut($page, $name, $text, $type) {
        $output = null;
        if ($name=="example" && ($type=="block" || $type=="inline")) {
            $output = "<p class=\"" . htmlspecialchars($name) . "\">\n";
            $output .= "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n";
            $output .= "<path fill=\"currentColor\" d=\"M 4 4.44 v 2.83 c 7.03 0 12.73 5.7 12.73 12.73 h 2.83 c 0 -8.59 -6.97 -15.56 -15.56 -15.56 Z m 0 5.66 v 2.83 c 3.9 0 7.07 3.17 7.07 7.07 h 2.83 c 0 -5.47 -4.43 -9.9 -9.9 -9.9 Z M 6.18 15.64 A 2.18 2.18 0 0 1 6.18 20 A 2.18 2.18 0 0 1 6.18 15.64\"></path>\n";
            $output .= "</svg>\n";
            $output .= "This is some text.\n";
            $output .= "</p>\n";
        }
        return $output;
    }
}
?>

Another embedding is out of the question for me, because I have to style the SVG via CSS.

Footnotes

1. because I couldn't find any other way to solve it. Graphics and text must appear in page.md so that they can also be output via feed. ↩

[annaesvensson]

No, this is not possible at the moment.

[pftnhr]

Is there a reason for this?

[annaesvensson]

You don't seem too happy with this answer, maybe some more context can help.

Our general design guideline is to make products with fewer features. With as little as possible. Whenever a small solution handles 90% and a big solution handles 100%, then it's worth to reconsider the additional effort. What removes inline SVG from generated HTML is the normalisation of the Markdown parser. Now, there are many options to insert icons and symbols. Woff fonts, inline SVGs, data URIs and as time goes on web developers will undoubtedly find more options. Each with their own advantages and disadvantages, but one has to pick something and limit the number of options, especially if you want to keep the code base small and fast. The software design pattern which we use at the moment for icons and symbols is called SVG stacks. They can carry multiple SVG files, monochrome and multicolour, can be customised with a text editor and disk size is relatively small. An example SVG stack can be seen in the edit extension. As a last resort, you can write your own Markdown parser free from any normalisation, safeguards and restrictions. You do you.

[pftnhr]

Thank you for the reminder about the SVG stacks. I actually didn't have them on my radar. 😩

[GiovanniSalmeri]

Thank you from me too, following your suggestion I have simplified Chess with a SVG stack.

[GiovanniSalmeri]

Another embedding is out of the question for me, because I have to style the SVG via CSS.

Hello @pftnhr. Some time ago I stumbled upon more or less the same problem in my extension Chess. Finally I found this partial solution: 1. embed the svg with img src="data:..." 2. style the img in CSS with filter:... (see https://github.com/GiovanniSalmeri/yellow-chess/blob/main/chess.css). I dropped this solution in favour of the cleaner mask approach. This solution is partial because you will able to change only the overall color of the SVG, but perhaps this is enough for you.

Another solution, without tampering with the Markdown parser, is to write an extension that ovverides the HTML normalisation and whitelists svg and path. It is possible 😎.

[pftnhr]

Hello @GiovanniSalmeri,

that's also a good approach. If I touch what I have made again, I will first try the variant with the SVG stack and then insert the graphic via mask in the stylesheet.

[GiovanniSalmeri]

@pftnhr Actually my previous answer was only half of the story. In one case I used the filter hack (but I have just modified my code after reading about mask: this allows a much cleaner code). In another case I used a stylesheet embedded in a svg specified in an img with the data scheme. See https://github.com/GiovanniSalmeri/yellow-chess/blob/main/chess.php lines 241-245. In this way an SVG image can be styled with an external CSS. Perhaps this helps you!