Phpcs svg escape function wordpress

Question

i'll try to be quick in my question ! My problem is that i use the svg icons system as the tweentyseventeen default theme ! but when i use echo get_svg() function. phpcs give me a warning that all output need to be escaped with escaping function ? any help how to acheive that with my svgs ?

Answer 1

You can either escape using functions like wp_kses_post() or simillar that won't destroy the markup of the SVG code. But if you don't actually want to escape anything (despite is not recommended), you can use the whitelisting flags.

Example of use on your case:

echo get_svg(); // WPCS: XSS Ok.

Answer 2

you can escape an svg via wp_kses like so:

    $string = 'your svg code ala <svg xmlns="http://www.w3.org/2000/svg" width="..."><path d="..."/></svg>'
    echo wp_kses($string, [
      'svg' => [
        'xmlns' => [], 
        'width' => [], 
        'height'=> [], 
        'viewbox' => [] //lowercase not camelcase!
      ], 
      'path' => [
        'd' => []
      ]
    ]);

basically you need to add your allowed HTML elements like svg, path, {...} as an array and inside each you need to pass the allowed attributes (also as arrays). in case of svg this could be xmlns, width, height, {...} and in case of path this could be d, style, {...}. maybe you also need to add circle or whatever other svg elements, that come to mind..