WordPress filter to convert image tags for locally-hosted SVG files into inline SVG (and thus enabling the SVG to be styled with CSS)

svg-inliner.php

<?php
/*
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/

/* https://github.com/darylldoyle/svg-sanitizer */
use enshrined\svgSanitize\Sanitizer;

add_filter( 'the_content', 'svg_inliner' );
function svg_inliner( $content ) {
	if ( '' === $content ) return ''; /* phpcs:ignore Generic.ControlStructures.InlineControlStructure.NotAllowed */
	$post      = new DOMDocument();
	$sanitizer = new Sanitizer();
	$sanitizer->removeRemoteReferences( true );

	$post->loadHTML( mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' ) );
	$img_list = $post->getElementsByTagName( 'img' );

	/* regressive loop because http://php.net/manual/en/domnode.replacechild.php#50500 */
	$i = $img_list->length - 1;
	while ( $i > -1 ) {
		$img     = $img_list->item( $i );
		$src_url = parse_url( $img->getAttribute( 'src' ), PHP_URL_PATH );
		$src_ext = pathinfo( $src_url, PATHINFO_EXTENSION );
		if ( 'svg' !== $src_ext ) { $i--; continue; } /* phpcs:ignore Squiz.ControlStructures.ControlSignature.NewlineAfterOpenBrace, Generic.Formatting.DisallowMultipleStatements.SameLine */

		// no x-site monkey business
		$svg_host  = parse_url( $img->getAttribute( 'src' ), PHP_URL_HOST );
		$this_host = parse_url( get_site_url(), PHP_URL_HOST );
		if ( $this_host !== $svg_host ) { $i--; continue; } /* phpcs:ignore Squiz.ControlStructures.ControlSignature.NewlineAfterOpenBrace, Generic.Formatting.DisallowMultipleStatements.SameLine */

		$svg_local_path = WP_CONTENT_DIR . substr(
			parse_url( $src_url, PHP_URL_PATH ),
			strpos( parse_url( $src_url, PHP_URL_PATH ), 'wp-content/', 1 ) + 10
		);

		// load the SVG and parse it (and sanitize... obv)
		if ( ! file_exists( $svg_local_path ) ) { $i--; continue; } /* phpcs:ignore Squiz.ControlStructures.ControlSignature.NewlineAfterOpenBrace, Generic.Formatting.DisallowMultipleStatements.SameLine */
		$clean_svg = $sanitizer->sanitize( file_get_contents( $svg_local_path ) );
		if ( ! $clean_svg ) { $i--; continue; } /* phpcs:ignore Squiz.ControlStructures.ControlSignature.NewlineAfterOpenBrace, Generic.Formatting.DisallowMultipleStatements.SameLine */
		$svg = new DOMDocument();
		$svg->loadXML( mb_convert_encoding( $clean_svg, 'HTML-ENTITIES', 'UTF-8' ) );

		// replace img with svg
		$img->parentNode->replaceChild( /* phpcs:ignore WordPress.NamingConventions.ValidVariableName.NotSnakeCaseMemberVar */
			$post->importNode(
				$svg->getElementsByTagName( 'svg' )->item( 0 ),
				true
			),
			$img
		);

		// inc loop counter
		$i--;
	};

	return $post->saveHTML();
}

Hi there, Thanks for this really good code. It works like a charm on SVGs within the_content but it won't for images uploaded using Advanced custom fields. Is it possible to get this working?

Hey @danatomy. Not sure, but I can look into it. Haven't used ACF myself. Without looking I'm guessing ACF stores the SVGs in different location and I rather intentionally wrote this to limit the SVGs it works on to those stored in a specific place in the WordPress file tree... to make sure SVGs added via user-facing things like comment plugins couldn't be used to in-line malicious SVG files. It looks like ACF is limited to those with edit privileges... so it shouldn't be a problem to whitelist whatever folder it uses store SVG files. I should perhaps make it possible to do this one's self when setting up the SVG in-liner filter.

I'll look into it.

Thanks for getting back to me. I found a solution using another SVG plugin but would rather get your solution working if possible as feels more secure.

Your function is working just fine, however, it replaces only the stuff within post/page content, but it doesn't affect header, nor footer.
Is there a way to modify this as I'm not familiar with the hooks?

Regards.

Hey @danatomy. Not sure, but I can look into it. Haven't used ACF myself. Without looking I'm guessing ACF stores the SVGs in different location and I rather intentionally wrote this to limit the SVGs it works on to those stored in a specific place in the WordPress file tree... to make sure SVGs added via user-facing things like comment plugins couldn't be used to in-line malicious SVG files. It looks like ACF is limited to those with edit privileges... so it shouldn't be a problem to whitelist whatever folder it uses store SVG files. I should perhaps make it possible to do this one's self when setting up the SVG in-liner filter.

I'll look into it.

Hi @Jadeddragon! Thank you so much for this filter. Have you by any chance looked into this? I've run into the same problem. If not, @danatomy would you mind sharing the solution you found?