How to load external SVG files with
Using external SVG files in WordPress can provide several benefits over embedding the SVG code directly into your HTML. External SVG files are easier to manage, can be cached by the browser, and allow you to reuse the same SVG across multiple pages. In this article, we'll explore the steps to load external SVG files using the <use>
element in WordPress.
Internal vs. External SVG Loading
Before we dive into the <use>
method, let's quickly review the differences between internal and external SVG loading in WordPress.
Internal SVG Loading
If you want to manipulate the SVG image with JavaScript or CSS hover effects, you should load the SVG file internally. To do this, you'll need to rename your SVG file to test.svg
(without the .php
extension) and format it with all the paths and points. Then, in the WordPress template file where you want the SVG to appear, you can use the following code:
<?php include get_stylesheet_directory() . '/test.svg'; ?>
External SVG Loading
If you don't need to manipulate the SVG image and just want to display it, you can load the SVG file externally using an <img>
tag:
<img src="<?php echo get_stylesheet_directory() ?>/test.svg">
Loading External SVG Files with <use>
The <use>
element in SVG allows you to reference an external SVG file and display it on your page. This method is useful when you want to reuse the same SVG icon or graphic across multiple pages without having to embed the entire SVG code on each page.
Here's how you can use the <use>
element to load an external SVG file in WordPress:
-
Create the External SVG File: First, create your SVG file and save it in your WordPress theme directory. For example, you can save it as test.svg
in the wp-content/themes/your-theme/assets/images/
directory.
-
Add the SVG Definition: In the WordPress template file where you want to display the SVG, add the following code to define the SVG:
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="test-icon" viewBox="0 0 24 24">
<!-- SVG paths and elements go here -->
</symbol>
</svg>
Replace test-icon
with a unique ID for your SVG symbol. The viewBox
attribute should match the dimensions of your SVG file.
-
Use the <use>
Element: Now, you can use the <use>
element to display the SVG on your page:
<svg class="test-icon">
<use xlink:href="#test-icon"></use>
</svg>
The xlink:href
attribute should match the id
you used in the SVG definition.
Here's a complete example of how you can load an external SVG file using the <use>
element in a WordPress template file:
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="test-icon" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4-8c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2z"/>
</symbol>
</svg>
<svg class="test-icon">
<use xlink:href="#test-icon"></use>
</svg>
In this example, the SVG definition is placed inside a <defs>
element, which is a container for reusable SVG elements. The <symbol>
element is used to define the SVG symbol, and the id
attribute is used to reference it later.
The <use>
element is then used to display the SVG on the page. The xlink:href
attribute is used to reference the SVG symbol by its id
.
Benefits of Using <use>
for External SVG Loading
There are several benefits to using the <use>
element to load external SVG files in WordPress:
-
Reusability: By storing the SVG definition in a separate file, you can easily reuse the same SVG across multiple pages without having to copy and paste the entire SVG code.
-
Caching: External SVG files can be cached by the browser, improving page load times.
-
Reduced File Size: Embedding the SVG definition in the HTML can increase the file size, especially if you have multiple SVG icons. Using the <use>
element to reference an external SVG file can help reduce the overall file size of your pages.
-
Separation of Concerns: Separating the SVG definition from the HTML code makes it easier to manage and maintain your code. You can update the SVG file without having to touch the HTML code.
-
Accessibility: The <use>
element preserves the accessibility features of the SVG, such as the ability to add aria-label
or title
attributes to the SVG.
Potential Drawbacks and Considerations
While the <use>
element offers many benefits, there are a few potential drawbacks and considerations to keep in mind:
-
Browser Support: The <use>
element is not supported in all browsers, particularly older versions of Internet Explorer. If you need to support these browsers, you may need to use a polyfill or an alternative method for loading external SVG files.
-
CORS Restrictions: If your SVG file is hosted on a different domain, you may encounter cross-origin resource sharing (CORS) restrictions. To address this, you'll need to ensure that the server hosting the SVG file is configured to allow cross-origin requests.
-
Performance Considerations: While external SVG files can be cached, the initial load time may be slower than embedding the SVG code directly in the HTML. You'll need to measure and monitor the performance impact to ensure a good user experience.
-
Fallback for Non-supporting Browsers: For browsers that don't support the <use>
element, you should provide a fallback solution, such as using an <img>
tag or an inline SVG.
By considering these factors, you can make an informed decision about whether to use the <use>
element for loading external SVG files in your WordPress site.
Conclusion
Loading external SVG files with the <use>
element in WordPress provides several benefits, including improved reusability, caching, and separation of concerns. By following the steps outlined in this article, you can effectively implement this method and take advantage of the advantages it offers.
Remember to consider the potential drawbacks and browser support limitations, and be prepared to provide fallback solutions for non-supporting browsers. With careful planning and implementation, you can successfully integrate external SVG files into your WordPress site and enhance the user experience.
For more information on using SVGs in WordPress, be sure to check out the CSS Tricks article mentioned in the description. And if you're looking for a tool to help you identify and fix technical issues that may be impacting your website's conversion rates, be sure to check out Flowpoint.ai
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.