Inline SVGs in your WordPress code with this helper function

I’ve been using SVGs more and more in my work and adding them as inline SVGs rather than <img>‘s offers a lot of advantages, including but not limited to:

  • Better performance (you’re not linking out to an external file)
  • being able to affect the SVG with CSS

So for a project I’m working on (and quite excited about), I ended up writing a little SVG helper that lets you pull in an SVG inline from a regular file and update its attributes if needed.

The function takes advantage of the fantastic new WP_HTML_Tag_Processor that arrived in WordPress 6.2.

Here’s the complete code:

Usage

Here’s how you would use it to inline an SVG called logo.svg that lives in your-theme/imgs:

echo get_svg( // phpcs:ignore WordPress.Security.EscapeOutput
	'logo',
	array(
		'class'  => 'logo',
		'height' => '',
		'width'  => '200',
	)
);

The code above will print out an inline SVG from the your-theme/imgs/logo.svg file with a(n additional) class of logo on the main svg element, an empty height attribute and the width attribute set to 200.

Function Features

The function takes three parameters:

  1. a filename without the extension,
  2. an array of attributes optionally, and
  3. the root relative directory to look into, optionally.

It doesn’t echo the inline SVG, rather it returns a string of the inline SVG that you can then echo wherever you want.

I want to note that this function does not sanitize your SVG for you, so it’s really on you to make sure your SVG is safe and/or sanitize it in some other way.

Filename

Since the function is specific to SVG files, we assume the extension of the file is .svg so you don’t need to provide it. If your file was called logo.svg, then you would simply provide logo as the parameter.

Attributes Array

This is an optional parameter in case you want to modify the attributes of the svg element in any way. For example, perhaps you want to null out the default width and height attribute since you’ll control that with CSS:

$attributes = array(
    'width' => '',
    'height' => '',
);

Or perhaps you want to add a class to the SVG to make it easier to target with CSS:

$attributes = array(
    'class' => 'custom-logo',
);

You simply provide an array where the key is the name of the attribute and the value is what you want to set the attribute to, and the function will take care of the rest.

For most attributes, keep in mind the function will overwrite an existing value, unless the attribute is class.

Special Handling for Classes

Sometimes SVG files come with classes on the main svg element. In that case, we may want to retain those classes while still adding our own. The function is sensitive to that and will not overwrite any existing classes if you provide the class attribute in your attributes array.

So if you had an svg called logo with the class featured on it already:

<svg class="featured"></svg>

Running that through the function that adds a class attribute called logo like so:

$logo_svg = get_svg(
    'logo',
    array(
        'class' => 'logo',
    )
);

would transform and return the following string:

<svg class="featured logo"></svg>

Directory

Feel free to update the default directory in the function to wherever you keep your images/svg’s. The directory is root relative, so in my code, it assumes the SVGs live in theme/imgs folder.

In addition to updating the default location you can always pass in a custom location when you call the function. This sort of flexibility is just super easy to add so I always like to bake it in just in case I ever need to reach for it.

Some Basic Error Handing Included

If the file you are looking for doesn’t exist, the function will throw an error with some information. This is just a basic implementation, and if you’re running WP_DEBUG while in development (as you should) or Query Monitor (as you should), you’ll get an error for the file_get_contents function any way, so you’ll see it right away.

I would be remiss if I didn’t take this opportunity to share that my cohost and I did a fun introductory episode on Debugging in WordPress on our video podcast that you should totally check out!

Fin

That’s all I have for you now! If I update/improve the function I’ll update this post with the details as well as the gist. If you have questions, let me know on social media (Twitter or Mastodon).

Did you like this article? Get articles like this straight in your inbox for easy reading. 🙂