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();
}

Thanks for this, I am currently using gatsby-wordpress-source with SVGs. Gatsby is not handling them correctly and Safari is only displaying the png fallback but when they are inlined, it solves all the problems and I don't have to worry about non-techies using the visual editor in wordpress

No problem. Glad it could help. I had the same thought about non-techies for the original wordpress site this was made for. All the options I could find at the time required understanding how html and svg worked... and that just wasn't going to work.

I added this to functions.php, but it didn't work, no changes to the way SVG files load, and it broke my icons. they stopped loading.

I added this to functions.php, but it didn't work, no changes to the way SVG files load, and it broke my icons. they stopped loading.

Did you also install Daryl Doyle's SVG-Sanitizer for PHP? The link is in the code comments above.

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?