---
title: Using inline SVG sprites in WordPress themes
description: Integrating inline SVGs into WordPress themes can enhance your design. This tutorial covers key techniques for seamless implementation.
doc_version: current
last_updated: '2026-08-09T20:25:22.000Z'
date: '2016-08-15T16:45:28.000Z'
author: Rich Tabor
summary: Integrating inline SVGs into WordPress themes can enhance your design. This tutorial covers key techniques for seamless implementation.
tags:
  - Design
  - Themes
  - WordPress
published: true
type: blog
url: /svg-inline-sprites-in-themes
canonical: https://richtabor.com/svg-inline-sprites-in-themes
id: 32
---

I have been integrating inline SVGs into some of my latest [WordPress themes](https://themebeans.com). This is just a quick tutorial on the techniques that I have experimented with. Feel free to leave feedback and suggestions in the comments below.

So let’s get it started!

Inline SVG simply refers to SVG markup that is included in the markup for a webpage. Using an inline SVG sprite will save an HTTP request but it does mean the sprite is not cached by the browser. Also, note that browser support is [good to go](http://caniuse.com/#feat=svg-html5) these days.

_Note: Throughout this tutorial I will am using `/images/sprite.svg.php` as my sprite and directory location._

## Include your SVG Sprite

First off, you will need to include your sprite directly following the opening body tag, to ensure maximum compatibility throughout your templates. I found the easiest method to retrieve the sprite is to use the native [get\_template\_part()](https://developer.wordpress.org/reference/functions/get_template_part/) function, directly in the header.php file.

```
// sprite-get-template-part.php

  <?php get_template_part( 'images/sprite.svg' ); ?>
```

And here’s a screenshot:  

![](https://i0.wp.com/rich.blog/wp-content/uploads/2023/01/c49e6-get-template-part-inline-svg.jpg?ssl=1&resize=1330%2C1080)

## Modify the SVG extension

Add the `.php` extension to your sprite image file, so that it becomes `.svg.php`. Essentially, `sprite.svg` is now `sprite.svg.php`. You could add a [Gulp copy](https://www.npmjs.com/package/gulp-copy) task to build a duplicate sprite.svg.php file for you, but for the purpose of this tutorial, we are just renaming the .svg file. That’s on my todo list for sure!

## Use Inline SVGs

At this point, you should see your sprite loaded in your source code. Now you’re all set to include the SVG’s throughout your theme. Below is the method I’ve grown to use. I typically interchange the second div element with an element if required.

```
// inline-svg.php

  
    <svg shape-rendering="geometricPrecision">
      <use xlink:href="<?php echo is_customize_preview() ? esc_url( get_template_directory_uri() . '/images/sprite.svg' ) : '' ; ?>#search-icon"></use>
    </svg>
  

```

_Edit: I have updated the gist to check if the sprite is loaded via the Customizer. If so, we need to add get\_template\_directory\_uri() in order to load the sprite appropriately in the Customizer view._

## Add Styling

For styling, I include the `.svg__wrapper` styles once, and then assign height and width attributes to particular SVGs throughout the theme. I’ve found this to be the most efficient method so far to prevent doubling up on CSS — although if you have better alternative, I’d love to see it.

```
// inline-svg.scss
.svg__wrapper {
    overflow: hidden;
    position: relative;
    display: inline-block;

    a, 
    div, 
    svg {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }   
}

.svg__search {
    width: 20px;
    height: 20px;
}
```

## Enjoy!

All in all, this is the method that I’ve been experimenting with lately. Again, I’d appreciate any feedback or suggestions — just leave a comment below.

## Sitemap

[Full site index](/sitemap.md)