SVGs (Scalable Vector Graphics) are a great file format for making sure that images look good at any size! Because they’re defined with code, they can scale to any size but since they’re also an image format, they can be used in any standard image tag, like so:
<img src="logo.svg" alt="Alpha Particle's Logo">Code language: HTML, XML (xml)However, one of the best things about SVGs is because they are just code, you can use Javascript and CSS to make them interactive. For example, if you wanted to change the color of some of the pieces of the SVG image when the user hovers over them, you could define that behavior with CSS.
.svg-hover:hover path {
color: blue;
}Code language: CSS (css)This would turn any of the parts of the SVG matching the selector blue when you were hovering over any SVG that had that class. You could then apply CSS transitions or anything else that you can accomplish with CSS to augment the effect.
There’s just one problem.
If you embed your SVG in an image tag like the example above, you can’t target elements inside the SVG with CSS or Javascript. So how do you get SVG images that are part of your WordPress theme included in your templates while still being able to use CSS and JS on them?
The Not-So-Elegant Solution – Copy/Paste
The most straightforward but not so elegant solution is to simply copy and paste the markup from the SVG file into your template directly. This includes everything from the opening <svg> tag all the way to the closing </svg> tag.
While this is the most direct approach, if the contents of the SVG ever gets updated, you’ll have to do this copy/paste again, which makes it a bit less practical, especially for projects that are still changing and evolving.
The (More) Elegant Solution – Treat SVGs as template parts
WordPress templates can import other PHP files as “template parts” and, through this process, include all the markup of the template part in the broader template. We can take advantage of this fact to keep our SVGs as separate files while still being able to use our CSS and Javascript tricks on them.
First, wherever your SVGs live (in our example, we’ll pretend they live in an svgs folder in our theme), you’ll need to rename them to add a .php suffix. For example, if we had a file called logo.svg, we would rename it to logo.svg.php. Your file manager (Finder, Windows Explorer, etc) may let you know that you should only change the file extension if you really know what you’re doing and in this case, you definitely do.
Once your SVGs are renamed, you can go back into the template where you want to include them and use the get_template_part function, making sure to pass it the file path to your renamed SVG. In our example, that would look something like this:
<?php get_template_part( 'svgs/logo.svg' ); ?>Code language: HTML, XML (xml)And with that, the SVG markup will be brought into your template just as easily as including it via an image tag, except that you’ll be able to apply CSS and Javascript to make it even more powerful!