svgSanitizer

Package Description

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/

Usage/Installation Instructions

## Inline usage To get started, place your SVGs in a folder 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` ]] ``` ## Create an SVG sprite In addition to cleaning your SVG, you can choose to output the result as a symbol, for use in an SVG sprite: ```html [[svgSanitize? &file=`assets/img/icons/sanitize-me.svg` &title=`Add a title here for improved accessibility` &toSymbol=`1` ]] ... ``` Will result in something like: ```html Yay, you cared about accessibility ... ... ``` Include this SVG somewhere in your HTML and then reference the symbols in your content like this: ```html ``` Note that you have to prepend the anchor with the full URI. This is because MODX pages use the base element ``, which confuses the anchor link inside the `` element in some browsers. Read more about that here: https://stackoverflow.com/questions/18259032/ ## Caching The sanitized SVGs are cached inside a sub folder of core/cache, based on the cacheKey setting. By default, this will be `svgsanitizer`. But please note: > [!NOTE] > **The default 'svgsanitizer' cache folder is not cleared automatically!** If you want to clear the SVG cache every time the MODX cache is cleared, you could simply change the cacheKey to 'default'. But I don't recommend this. There's really no need to sanitize each SVG again after a cache clear. A better option is to install [getCache](https://extras.modx.com/package/getcache) and create a menu button for manually clearing the 'svgsanitizer' partition. Here's an example handler: ```js var partition = 'svgsanitizer'; var topic = '/getcache/cache/partition/refresh/' + partition; this.console = MODx.load({ xtype: 'modx-console', register: 'mgr', topic: topic, show_filename: 0 }); this.console.show(Ext.getBody()); MODx.Ajax.request({ url: MODx.config.assets_url + 'components/getcache/connector.php', params: { action: 'cache/partition/refresh', partitions: partition, register: 'mgr', topic: topic }, listeners: { 'success': { fn: function () { this.console.fireEvent('complete'); }, scope: this } } }); return false; ``` You could place this under the regular Clear Cache button for example. Attach the `empty_cache` permission to grant the same access as for regular cache clearing. ## References Some interesting resources about working with SVG: - https://css-tricks.com/pretty-good-svg-icon-system/ - https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/ - https://medium.com/@webprolific/why-and-how-i-m-using-svg-over-fonts-for-icons-7241dab890f0 - https://nucleoapp.com/how-to-create-an-icon-system-using-svg-symbols/ - https://css-tricks.com/svg-use-with-external-reference-take-2/ - https://codepen.io/NathanPJF/full/GJObGm - https://www.sarasoueidan.com/blog/svgo-tools/ - https://jakearchibald.github.io/svgomg/