Skip to content

Instantly share code, notes, and snippets.

@mapsam
Created April 25, 2014 00:37
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mapsam/11274295 to your computer and use it in GitHub Desktop.
Save mapsam/11274295 to your computer and use it in GitHub Desktop.
Inline SVG partial for WordPress

Good for acting on specific pieces of your SVG object instead of just link as an <img> you can bring the entire object into your HTML. You need two things:

  1. SVG file with a double extension ending with .php - e.g. logo.svg.php
  2. WP include statement with the built-in function get_template_part
<?php
get_template_part( 'includes/partials/logo', 'logo.svg' );
?>

That'll strip off the .php extension and bring in the entire SVG object. Your SVG can be straight up exported from Illustrator or what have you, nothing special in there. But remember you'll need to give it an ID so you can access it via CSS.

<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="---" height="---" viewBox="- - - - - -" enable-background="- - - - - - " xml:space="preserve">
<!-- svg stuff -->
</svg>
@cfxd
Copy link

cfxd commented May 14, 2014

I caught your blog post and it really interested me but I could not get it to work. I'm glad you posted this because now that I see your SVG's source I got it working by removing some tags which Illustrator inserted before the opening <svg> tag. Thanks for posting this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment