SVGs on WordPress and for icons

Uploading SVGs to the media library

Add the below script to the functions file, or consider using a plugin like ‘SVG support’.

<?php
function allow_new_mime_type($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter( 'mime_types', 'allow_new_mime_type' );

Using SVGs in the Theme

As an image

<img src="your.svg" alt="Some alt tag">

In CSS as a background image

.your-svg {
    background-image: url(your.svg);
}
/* Inline */
.your-svg {
    background-image: url("data:image/svg+xml;utf8,<svg >...</svg>");
}

Note: To make a date: image url use a url encoder for SVGs.

Inserting a SVG file inline using php

<?php echo file_get_contents( get_stylesheet_directory_uri() . '/your.svg' ); 
<?php
/* As a function: */
function load_icon( $file ) {
    $svg_folder = '/svg-icons/';  
    if ( file_exists( get_stylesheet_directory() . $svg_folder . $file . '.svg' ) ) {
        return file_get_contents( get_stylesheet_directory_uri() . $svg_folder . $file . '.svg' );
    }
    return '';
}
?>
<?php echo load_icon('your-icon'); ?>

Note: Each SVG is a separate http request so doing this for many SVG files might not be a great idea.

Accessibility

<a href="twitter.com..." 
    target="_blank" 
    rel="nofollow noopener noreferrer" 
    aria-label="Twitter">
    <span class="icon" aria-hidden="true"><?php echo load_icon('twitter'); ?></span>
</a>
/* or */
<a href="twitter.com..." 
    target="_blank" 
    rel="nofollow noopener noreferrer">
    <span class="icon" aria-hidden="true"><?php echo load_icon('twitter'); ?></span>
    <span class="screen-reader-text">Twitter</span>
</a>