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:
- 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.
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. 🙂