How to Include SVG sprites icons into the body tag? [closed]

Question

I want to include an SVG icon file after the body tag and I'm using this code:

<?php include_once("assets/img/sprites.svg"); ?>

But I get this error:

Parse error: syntax error, unexpected T_STRING in /home/ostadba1/public_html/wp-content/themes/ostad/assets/img/sprites.svg on line 1

the purpose for this is that I want use those icons with one line of code:

<svg class="icon"><use xlink:href="#shopping-cart"></use></svg>

How can I load an SVG file correctly in WordPress?

Answer 1

It's because that's not how you should include an SVG in PHP,
include_once is used for including PHP files.

Reason behind this error:

PHP Parse error: syntax error, unexpected version (T_STRING)

is that PHP was unable to parse the beginning of the SVG file at the point where the XML version was defined:

<?xml version="1.0" encoding="utf-8"?>

Solution 1: To fix this, just remove the XML header tag from your SVG file completely.

Solution 2: Follow these tutorials. (Recommended)

1. The Perfect WordPress Inline SVG Workflow
2. Using Inline SVG Sprites in WordPress Themes

This is a much better way of including SVGs in your themes. Both of them explain the same concept.
These tutorials will help you understand how to include an SVG in PHP in WordPress.

Now how to include them after the body tag?
This requires for you to use these tutorials in your theme files where appropriate.
For instance, if your theme opens the body tag in index.php you'll need to modify index.php and include the SVGs there.

Solution 3:

<?php echo file_get_contents("filename.svg"); ?>

You can just echo the contents of your SVG file wherever you want in your HTML section of your PHP file.

However, playing with theme files requires PHP and WordPress knowledge to some extent.

Answer 2

The command include_once() is used to include php files. SVG is just an image file, it should be treated the way you treat an image file (most of the times).

In your case, if you want to use it as a font, you should include it in your CSS file, using :

@font-face{
    font-family:my-font;
    url('YOUR SVG URL HERE') format('svg');}

Then you can use your defined font codes to call different part of the sprite. There are plenty of guides about how to use SVG as a font.

Another option would be to use <img> tags, as Brian suggested in the comments.

You can also use SVG as background images, the same way you use a jpg file as background-image property in CSS.