svgSanitizer

A MODX extra to sanitize SVG files and parse them inline, or as part of an SVG sprite. The file is cleaned first to make sure there are no malicious scripts, links or other XSS tricksters inside. After that, you can tweak the output to match any compatibility or design requirements you may have.

Many thanks to Daryll Doyle for providing and maintaining the sanitizer: https://github.com/darylldoyle/svg-sanitizer/

Why

SVGs are a perfect way for delivering sharp and scalable graphics on your site. And serving them inline makes them even more versatile! You can change the colors of individual paths, let the SVG adapt to its parent's fill color or animate the contents with JS.

An added bonus for including SVGs with the svgSanitize snippet, is that you can actually use MODX syntax inside your SVGs. Create multilanguage SVGs by using lexicon strings as text, or use them in getResources templates with unique pagetitles or TV data... Endless possibilities.

Have fun!

All you need to do to get started, is place your SVGs in a folder somewhere inside your project and reference the file path in the svgSanitize snippet call:[[svgSanitize?    &file=`assets/img/icons/sanitize-me.svg`    &title=`Add a title here for improved accessibility`]]

For more detailed instructions, please visit Github.