unsplash-logo bady qb

Inline SVG the Sane Way

Published 2014-11-10

Like everyone else these days, I’ve totally jumped onboard the SVG train. They’re scalable and easy to use. If you use inline SVG, they are style-able and reduce server requests, which can help your SEO and loading times.

Sadly, inlining SVG also borks up your code. There’s nothing more disappointing than combing through neatly organized code completely marred by a giant block of SVG gibberish in the middle of it.

Recently, I discovered a simple way to have my cake and eat it too (mmm, cake!). Check this out:

 * Returns the requested SVG icon.
 * Returns FALSE if $svg is not set.
 * @param 	string 		$svg 		The name of the SVG icon
 * @return 	mixed 				The SVG icon
function prefix_get_svg($svg) {
    if (empty($svg)) { return FALSE; }

    $icons['logo'] = '<svg... SVG stuff here..."/></svg>';

    return $icons[$svg];
} // prefix_get_svg()

The $svg parameter determines which icon in the array the function returns. The function returns FALSE if $svg is empty. The $icons array contains each icon’s SVG code as a separate array item. The function simply returns the requested icon, assuming its actually in the array.

This gives you all the advantages of inline SVG, without borking up your nicely indented, organized code. In my next post, I’ll show how combining this with some other simple functions can give you inline SVGs in menu items!

Share this post!

Check out these most recent posts:

How to Add a Class to a Metabox

Toggling the visibility of a metabox using a form requires the metabox to have a custom class. This is how to add custom classes to a metabox.

ArtistDataPress Expiration

In case you haven't heard, ArtistData is shutting down, so the ArtistDataPress plugin will also be shutting down as of October 14.

Avoiding get_theme_mod Errors

If you're getting an error related to the get_theme_mod function, the solution is simpler than you think. Check out this solution.