How to Optimize SVG Usage in a WordPress Website

Scalable Vector Graphics (SVG) are a great way to include high-quality graphics in your website without compromising on performance. Here’s a simple guide on how to optimize SVG usage in your WordPress site.

1. Echo the SVG

First, create a function to echo the SVG using the <use> element.

/**
 * Echo SVG
 * 
 * @param string $width     SVG width
 * @param string $height    SVG height
 * @param string $name      SVG file name
 */
function youbou_svg( $width, $height, $name ) {
    global $youbou_svg_used;

    $youbou_svg_used[ $name ] = true;

    $result = sprintf(
        '<svg width="%d" height="%d" aria-hidden="true" role="img" focusable="false"><use href="#youbou-%s"></use></svg>',
        $width,
        $height,
        $name
    );

    return $result;
}

2. Add Definitions in the Footer

Next, add the SVG definitions to the footer. This ensures that all SVG symbols are included at the end of the document.

/**
 * Add SVG definitions to the footer
 */
function youbou_svg_definitions() {
	global $youbou_svg_used;

	if ( empty( $youbou_svg_used ) ) {
		return;
	}

	echo '<svg style="display:none;"><defs>';
	foreach ( $youbou_svg_used as $svg => $value ) {

        $svg_path = get_theme_file_path( '/assets/svg/' . $svg . '.svg' );

        if ( ! file_exists( $svg_path ) ) {
            return;
        }

		$content = file_get_contents( $svg_path );
        $content = preg_replace( '/^<svg /', '<svg id="youbou-' . $svg . '"', trim( $content ) );
		$content = str_replace( '<svg', '<symbol', $content );
		$content = str_replace( '</svg>', '</symbol>', $content );
		$content = preg_replace( '/(width|height)=\"\d*\"/i', '', $content );
		$content = preg_replace( "/([\n\t]+)/", ' ', $content );
		$content = preg_replace( '/>\s*</', '><', $content );

        echo $content;
	}
	echo '</defs></svg>';
}
add_action( 'wp_footer', 'youbou_svg_definitions', 99 );

3. How to Use It

To use an SVG, call the youbou_svg function with the desired width, height, and name of the SVG.

echo youbou_svg( 20, 20, 'loop' );

Ensure you have a folder named svg inside the assets folder of your theme, containing your SVG files.

File Structure:

your-theme
	--assets
		--svg
			--menu.svg
			--loop.svg

If your SVG files are located in a different directory, update the path in the youbou_svg_definitions function (line 14) to reflect the correct location.

4. HTML Output

Here’s the HTML output generated by the above functions:

A. Output of the SVG

<svg width="20" height="20" aria-hidden="true" role="img" focusable="false">
	<use href="#youbou-loop"></use>
</svg>

B. Output of the Definitions

<svg style="display:none;">
	<defs>
		<symbol id="youbou-loop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
			<path d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"></path>
		</symbol>
	</defs>
</svg>

By using these methods, your HTML will be cleaner and more efficient. If you need to use loop.svg multiple times, there will always be a single definition for it in the footer, ensuring consistency and reducing redundancy.