The CSS-Tricks site has definitely proven invaluable to me during this process, as I’m not all that well-versed in SVGs — neither their creation, nor their use. For my theme’s purposes, I’ve settled on the inline method of embedding the SVG sprite, using fragment identifiers for the individual icons. Modern browsers support it, even as far back as Internet Explorer 9, according to Can I Use. There are, however, some additional tricks to get things working in WordPress theme.
In his article on using SVG, Chris Coyier states that one should use file_get_contents() instead of include() or include_once().
<?php echo file_get_contents("kiwi.svg"); ?>And this works fine, except when you run your theme through the WordPress theme checker plugin. When you do, it freaks out because it doesn’t like it that you’re getting a file’s contents directly. So how do you embed an SVG? I discovered that get_template_part() will do nicely in its place.
<?php get_template_part( 'images/sprite.svg' ); ?>There is, however, a caveat. This function expects a template part, you know, a PHP file. So it’s actually looking for the file images/sprite.svg.php. Renaming the SVG with a “.php” at the end will do the trick.
Leave a Reply