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:
Here’s how you would use it to inline an SVG called
logo.svg that lives in
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
The function takes three parameters:
- a filename without the extension,
- an array of attributes optionally, and
- 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.
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.
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
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
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
So if you had an
logo with the class
featured on it already:
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>
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
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!
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. 🙂