Wordpress Sanitize SVGs

clean-svg-func.php

function clean_svg( string $_svg_xml ) : string {

	// common attributes, these mainly apply to shape based elements
	$_common = array(
		'id' => true, 
		'class' => true, 
		'style' => true, 
		'tabindex' => true,
		'clip-path' => true, 
		'color' => true, 
		'color-interpolation' => true, 
		'cursor' => true, 
		'display' => true, 
		'filter' => true, 
		'fill' => true, 
		'fill-opacity' => true, 
		'fill-rule' => true, 
		'opacity' => true, 
		'shape-rendering' => true, 
		'stroke' => true, 
		'stroke-dasharray' => true, 
		'stroke-dashoffset' => true, 
		'stroke-linecap' => true, 
		'stroke-linejoin' => true, 
		'stroke-miterlimit' => true, 
		'stroke-opacity' => true, 
		'stroke-width' => true, 
		'transform' => true, 
		'vector-effect' => true, 
		'visibility' => true,
	);

	// primary 
	$_primary = array(
		'svg' => array( 
			'class' => true, 
			'id' => true,
			'style' => true,
			'aria-labelledby' => true, 
			'role' => true, 
			'xmlns' => true,
			'xmlns:xlink' => true,
			'width' => true, 
			'height' => true, 
			'viewBox' => true, 
			'viewbox' => true, 
			'version' => true, 
			'preserveAspectRatio' => true,
			'zoomAndPan' => true,
		),
		'def' => array( 
			'id' => true, 
			'class' => true 
		),
		'style' => array( 
			'type' => true, 
		),
		'title' => array( 
			'id' => true, 
			'lang' => true,
		),
		'desc' => array( 
			'id' => true,
		),
	);

	// g
	$_g = array(
		'g' => $_common
	);

	// rectangle
	$_rect = array(
		'rect' => array_merge(
			array( 
				'x' => true, 
				'y' => true, 
				'width' => true, 
				'height' => true, 
				'rx' => true, 
				'ry' => true, 
			),
			$_common
		)
	);

	// circle
	$_circle = array(
		'circle' => array_merge(
			array(
				'cx' => true,
				'cy' => true,
				'r' => true,
			),
			$_common
		)
	);

	// ellipse
	$_ellipse = array(
		'ellipse' => array_merge(
			array(
				'cx' => true,
				'cy' => true,
				'rx' => true,
				'ry' => true,
			),
			$_common
		)
	);

	// line
	$_line = array(
		'line' => array_merge(
			array(
				'x1' => true,
				'x2' => true,
				'y1' => true,
				'y2' => true,
			),
			$_common
		)
	);

	// polygon
	$_polygon = array(
		'polygon' => array_merge(
			array(
				'points' => true,
			),
			$_common
		)
	);

	// polyline
	$_polyline = array(
		'polyline' => array_merge(
			array(
				'points' => true,
			),
			$_common
		)
	);

	// path
	$_path = array(
		'path' => array_merge(
			array(
				'd' => true,
			),
			$_common
		)
	);

	// text
	$_text = array(
		'text' => array_merge(
			array(
				'x' => true,
				'y' => true,
				'dx' => true,
				'dy' => true,
				'rotate' => true,
				'lengthadjust' => true,
				'textlength' => true,
				'font-family' => true,
				'font-size' => true,
				'font-size-adjust' => true,
				'font-stretch' => true,
				'font-style' => true,
				'font-variant' => true,
				'font-weight' => true,
			),
			$_common
		)
	);

	// no need for the filters here, those can all be done in CSS

	// merge all of the arrays above, into our full set of allowable nodes and attributes
	$_allowed = array_merge( $_primary, $_g, $_rect, $_circle, $_ellipse, $_line, $_polygon, $_polyline, $_path, $_text );

	// dump the other arrays
	unset( $_primary, $_g, $_rect, $_circle, $_ellipse, $_line, $_polygon, $_polyline, $_path, $_text );
	
	// return an array of the allowed tags and attributes for SVG's
	return wp_kses( $_svg_xml, $_allowed );
}