LearnThe Perfect WordPress Inline SVG Workflow

Galen Gidman
writes on January 23, 2014

Share with your friends










Submit

Today we’re going to be looking at the perfect inline SVG workflow for WordPress. Before we go any further though, if you’re unfamiliar with the different varieties of SVGs, I highly recommend you take a quick read through Chris Coyier’s fantastic CSS-Tricks article on the subject.

Setting the Scene

Recently, I was working on a client project when I discovered the need to change the color of the logo based the state of the site header. Of course, I could just create two separate SVGs, each with a different fill color and simply change out the background image of my a.logo tag depending upon the state of the header, but that’s not necessary. With SVGs, all I have to do is embed the logo as an inline SVG and simply make the color change with the CSS fill property.

The only real problem with inline SVGs in my book is their sheer size. The particular logo I was working with was fairly complex as far as logos go and copying the SVG code right into my template would be pretty messy and take up a lot screen space. In his article, Chris makes mention of using the PHP include() function to embed SVGs, but if you’re working in WordPress there’s a better way to do it.

Enter get_template_part()

Instead, what we can use is WordPress’s native get_template_part() function. According to the WordPress codex, the purpose of get_template_part() is to:

Load a template part into a template (other than header, sidebar, footer) making it easy for a theme to reuse sections of code and an easy way for child themes to replace sections of their parent theme.

That’s nice and all, but we’re going to use it for something a bit different today. And they thought they could control us…

First, let’s drop the desired SVG into an images folder just inside the root of our theme. Now, rename the SVG to inline-[filename].svg.php. So, if its original name was logo.svg, name it inline-logo.svg.php.

Now it’s time for some get_template_part() action. get_template_part() accepts two parameters, the slug, and the name. Simply put, the slug is everything before the first hyphen (-) in the filename and the name is everything after.

So, to include our SVG, we’ll simply call get_template_part() and fill out the parameters like so:

get_template_part(‘images/inline’, ‘logo.svg’);

See how easy that was? Now, we’ve got clean code in our template file, an inline SVG embedded right into our page that can be styled with CSS, all with zero HTTP requests!

This is a method I’ve been relying recently and I’ve found to work really well, but I’d love to hear any and all suggestions. Fire off in the comments!

18 Responses to “The Perfect WordPress Inline SVG Workflow”

  1. that worked perfect for me. thanks. fast and easy!

  2. Murray Chapman on May 9, 2016 at 10:29 pm said:

    I recently had to clean up a site that had a heap of php files injected and scattered throughout the file system. Some of them were in the images and js folder. A method of working with this was to stop the execution of PHP in these folders through a .htaccess inclusion. If that was included, would this stop your use of get_template_part()? I know you could just put the files somewhere else but I really like your creative approach.
    Thanks for the tut.

  3. This looks like it may be getting close to what I’m looking for, except that I need the image to be dynamic – in other words, client can choose an image in the ACF Options page, and then that SVG image needs to be added inline somehow so style changes can be applied as well. How might that be accomplished?

    • This method isn’t quite what you’re looking for. Off the top of my head:

      1. Install https://wordpress.org/plugins/svg-support/ to enable SVG uploads.
      2. Create ACF Image field that returned the image URL.
      3. Use this to output SVG file contents on the page: <?php echo file_get_contents( get_field( 'image_field', 'options' ) ); ?>

    • Another method that would be easy enough if it isn’t required for the user to be able to upload an SVG themselves (say if they’re just selecting from a predefined list):

      1) Create an ACF field with a “Select” list and define your selections.
      2) In your template, just use an if/elseif chain or, probably better, a switch statement to say “If the variable is this, show this SVG”. <– using this article to do it!

      Advantages are more control for you with the predefined list and you don't have to install a plugin. The disadvantage is that you have to add code with every new SVG design which isn't a big issue if it's not likely to change.

      Depends on your scenario though! Just thought I'd share this with others that run across this article!

      • Even better:

        1. Create a folder of available SVGs in the theme folder.
        2. Dynamically populate your select field (with the “Stylized UI” for searching capabilities) with the folder contents.
        3. Link to the SVG like: < ?php get_template_part( 'assets/img/svgs/' . get_field( 'svg_select' ) ); ?>
  4. can you please explain exactly what you do with:

    echo file_get_contents( get_template_directory_uri() . ‘/images/inline-header.svg’ );

  5. Beautiful and clean! Thanks!

  6. I was getting a Parse error: syntax error, unexpected T_STRING in inline-logo.svg.php on line 1. The issue was with the <?xml tag at the beginning of the svg and php allow shortcodes left on, so apache was reading it as <?phpxml. The way I got around it is to add: "php_value short_open_tag 0" (without the quotes) into the root htaccess file.

    • I was getting a 500 error when I tried to turn off short tags on the live site, so I just used:

      echo file_get_contents( get_template_directory_uri() . ‘/images/inline-header.svg’ );

      Too easy! No crazy saving as php needed, and just works.

    • Mine also wasn’t working cuz of the <?xml tag
      I just deleted it. works perfectly

  7. Felicia B. on October 22, 2015 at 6:15 pm said:

    Brilliant & simple solution – Thanks, Galen!

    I modified the shortcode to be able to take the filename as an argument. For example, define shortcode in functions.php as follows:
    “`
    function add_inline_svg($atts, $content=null) {
    get_template_part(‘inline’, $content);
    }
    add_shortcode(‘addsvg’, ‘add_inline_svg’);
    “`
    …then use like so: `[addsvg]picture.svg[/addsvg]` to insert contents of inline-picture.svg.php.

  8. If you copy the code out, make sure to switch out the quote marks.

  9. How do you see fallbacks working with this method?

    Using preg_match and an if statement would be one way to detect older IE versions for example but if anyone else has any ideas?

    i would love to rely on just SVG but I still have clients who use IE7/8.

Leave a Reply

Want to learn more about WordPress?

WordPress is a content management system that powers many of the most popular sites on the web. Learn how build a site of your own!

Learn more