How to use SVG in WordPress

October 5, 2023

Are you looking to add some dynamic and interactive elements to your WordPress website? Look no further than SVG! Scalable Vector Graphics (SVG) is a powerful tool for creating high-quality, resolution-independent graphics easily customized with CSS and JavaScript. In this guide, we’ll explore the benefits of using SVG in WordPress and show you how to get started. Whether you’re a seasoned developer or just starting out, SVG is a great way to elevate your website’s design and functionality. Let’s dive in!

There are different ways to use SVG in your WordPress website and theme. So you can go right to the section that you need:

Using SVG on your website
Using SVG in your theme

You might need clarification about the difference between using SVG in your website or your theme, so there are many differences between using SVG in your website or your theme.

Using SVG in your website means including an SVG as an image in your pages or posts. WordPress doesn’t support SVG as media by default, so you must change it yourself.

Using SVG in your WordPress website

Here are two ways that let you use SVG in your website as media:

Use a plugin
Use custom function

Use a plugin to add SVG in your WordPress website

WordPress’s most popular SVG plugins include SVG Support, Safe SVG, and SVG Images. These plugins make adding SVG files to your site easy without worrying about compatibility or security concerns.

Use custom function to add SVG support to WordPress

You can add this code snippet to your functions.php to add SVG support to your website:

/**
 * Allow SVG uploads for administrator users.
 *
 * @param array $upload_mimes Allowed mime types.
 *
 * @return mixed
 */
add_filter(
  'upload_mimes',
  function ( $upload_mimes ) {
    // By default, only administrator users are allowed to add SVGs.
    // To enable more user types edit or comment the lines below but beware of
    // the security risks if you allow any user to upload SVG files.
    if ( ! current_user_can( 'administrator' ) ) {
      return $upload_mimes;
    }

    $upload_mimes['svg']  = 'image/svg+xml';
    $upload_mimes['svgz'] = 'image/svg+xml';

    return $upload_mimes;
  }
);

/**
 * Add SVG files mime check.
 *
 * @param array        $wp_check_filetype_and_ext Values for the extension, mime type, and corrected filename.
 * @param string       $file Full path to the file.
 * @param string       $filename The name of the file (may differ from $file due to $file being in a tmp directory).
 * @param string[]     $mimes Array of mime types keyed by their file extension regex.
 * @param string|false $real_mime The actual mime type or false if the type cannot be determined.
 */
add_filter(
  'wp_check_filetype_and_ext',
  function ( $wp_check_filetype_and_ext, $file, $filename, $mimes, $real_mime ) {

    if ( ! $wp_check_filetype_and_ext['type'] ) {

      $check_filetype  = wp_check_filetype( $filename, $mimes );
      $ext             = $check_filetype['ext'];
      $type            = $check_filetype['type'];
      $proper_filename = $filename;

      if ( $type && 0 === strpos( $type, 'image/' ) && 'svg' !== $ext ) {
        $ext  = false;
        $type = false;
      }

      $wp_check_filetype_and_ext = compact( 'ext', 'type', 'proper_filename' );
    }

    return $wp_check_filetype_and_ext;

  }, 10, 5
);

Remove the lines 14 to 16 if you want to give access to all users to upload SVG files.

Using SVG in your WordPress theme

Now we know how to add SVG support to WordPress, it’s time to learn how to use SVG in WordPress themes.

Using as image
Using inline
- Direct use
- Include from file

You can easily use SVGs as images in your theme like this:

<img src="<?php echo get_template_directory_uri(); ?>/assets/images/some.svg" />

This is the simplest way to add an SVG to your theme. Remember that adding an SVG in your theme will behave as an image. (Sometimes, it would be better to use SVGs as images.)

Using SVG inline in WordPress theme

Using SVGs inline has a lot of benefits, like avoiding additional requests. It’s done like this:

Direct use of SVG in WordPress theme

<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 13.6493C3 16.6044 5.41766 19 8.4 19L16.5 19C18.9853 19 21 16.9839 21 14.4969C21 12.6503 19.8893 10.9449 18.3 10.25C18.1317 7.32251 15.684 5 12.6893 5C10.3514 5 8.34694 6.48637 7.5 8.5C4.8 8.9375 3 11.2001 3 13.6493Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Include SVG from file in WordPress theme

But there’s another way to add SVGs inline more cleanly.

<?php include get_theme_file_path( 'path/to/some.svg' ); ?>

As you can see, we’ve used a built-in WordPress function to get the content of that SVG file and include it in our theme, and It’s a cleaner way to add inline SVGs.

Categories:

WordPress