* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#iy7g{background-color:rgb(243, 245, 246);}
In previous tutorials, I’ve shown you how to create and work with inline SVG Sprites. Today, I’ll cover two ways to work with SVG Sprites in a WordPress theme: including an SVG in the document and using an external SVG file.
What We’ll be Building
Check out this quick video of a local WordPress demo page built with SVG Sprites:
About Image Sprites
One of the most important aspects when creating a new site/app is its performance. Different techniques can help improve it, like page caching, browser caching, lazy loading, etc.
One such popular technique is using image sprites (CSS or SVG Sprites) that help us keep HTTP requests to a minimum. This method combines selected images/SVGs into a single file (e.g. image file, SVG file). Then, we use it to load any of these images/SVGs in our projects.
About Our Project
For this demonstration, as discussed, I’ll work with a local WordPress installation where I’ve activated my custom Playground theme—this is the theme I’ve used in all my recent WordPress tutorials.
All the theme assets will be available on this GitHub repo.
Here we’ll have two branches: the main branch for the first method and the external-svg for the second.
Our page layout will contain a header, some content, and a footer with four columns. The arrows point to all the page icons.
- Inside the header, we’ll have the SVG logo in dark blue. On page scroll, the header will receive a red background while the logo’s color will change to white. In the footer, he logo will always be white.
- Inside the content, we’ll have a call-to-action (CTA) where a handmade SVG illustration will act as the CTA’s background while another SVG icon will appear next to its text. On hover, the illustration’s color will change to red.
- Inside the footer, we’ll have four socials with their SVG icons. On hover, their color will change to light blue.
We’ll load all our SVGs from different sources:
- The handmade drawing from another tutorial
- The CTA’s icon from the Feather library
- The social icons from the Font Awesome library
- The logo file from Adobe Illustrator—you’ve probably seen this logo in other demos.
For your reference, all these SVGs will live under the img folder.
Please note that we’ll include SVGs from different sources intentionally. That’s because, in a real project, you’ll probably need to use SVGs coming from various libraries.
Anyhow, the goal will remain the same; we have to place the SVGs inside an SVG Sprite and serve them through it.
Be aware that we won’t go through the CSS and JS theme code, whose primary use is to change the header’s appearance on scroll, as this is beyond the scope of this tutorial. Feel free to download the project and examine the code yourself. Besides, the page layout will come from a previous WordPress tutorial.
Create the SVG Sprite
Let’s start with the first method that puts the SVG Sprite inside the document.
All files of this method will appear in the
main branch.Although there are many tools out there for optimizing SVGs and baking them into SVG Sprites efficiently, we’ll skip them and do this process manually. We’ll need more time, yet learn from the ground up.
Inside the partials folder of our theme, we’ll create a new PHP file and call it sprites.php. Obviously, in your case, you can place it in another location or name it differently.
Then, in the header.php file, we’ll include it using the get_template_part() function.
Populate the SVG Sprite
Inside the sprites.php file, we’ll create an SVG container that will hold all our icons. By default, we’ll hide it by giving it display: none. If we don’t put this style, an empty area will appear at the top of the page.
1 |
<svg style="display: none"> |
2 |
<?php /*Put all SVG icons inside this element*/ ?> |
3 |
</svg>
|
From there, we’ll wrap each icon inside a <symbol> element and give it a unique ID. We’ll reference and render it anywhere on the page using the <use> element. Moreover, a good approach is to optimize and tidy up the symbols by removing unnecessary attributes. What we should keep at least are their id and viewBox.
Let’s see this transformation in more detail.
Logo
Our logo will appear in the header and footer. In the header, it’ll initially be black and turn to white as we scroll. In the footer, it’ll always be white.
Consider the initial markup of the logo:
1 |
<?xml version="1.0" encoding="utf-8"?>
|
2 |
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
3 |
<svg version="1.1" id="horizontal-logo" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" |
4 |
y="0px" viewBox="0 0 178 38" enable-background="new 0 0 178 38" xml:space="preserve"> |
5 |
<g>
|
6 |
<path fill="#FFFFFF" d="M50.1,30.2c0,0.4-0.1,0.7-0.2,0.9c-0.1,0.2-0.3,0.4-0.4,0.5c-0.2,0.1-0.3,0.2-0.5,0.3 |
7 |
c-0.2,0-0.3,0.1-0.5,0.1s-0.3,0-0.5-0.1c-0.2,0-0.4-0.1-0.5-0.3c-0.2-0.1-0.3-0.3-0.4-0.5C47,30.9,47,30.5,47,30.2V18.3h-2
|
8 |
c-0.3,0-0.6-0.1-0.8-0.2s-0.3-0.2-0.4-0.4c-0.1-0.1-0.2-0.3-0.2-0.4s-0.1-0.3-0.1-0.4s0-0.2,0.1-0.4c0-0.1,0.1-0.3,0.2-0.4
|
9 |
c0.1-0.1,0.2-0.3,0.4-0.4c0.2-0.1,0.4-0.2,0.8-0.2h2v-3.3c0-0.9,0.1-1.8,0.3-2.6s0.6-1.5,1-2.1c0.5-0.6,1.1-1,1.8-1.4
|
10 |
c0.7-0.3,1.6-0.5,2.6-0.5c0.9,0,1.5,0.1,1.8,0.4S55,6.6,55,7c0,0.3-0.1,0.6-0.3,0.9c-0.2,0.3-0.6,0.4-1.2,0.4H53
|
11 |
c-0.6,0-1,0.1-1.4,0.3S51,9.1,50.7,9.4c-0.2,0.3-0.4,0.7-0.5,1.2s-0.1,1-0.1,1.5v3.3h2.5c0.3,0,0.6,0.1,0.8,0.2
|
12 |
c0.2,0.1,0.3,0.2,0.4,0.4c0.1,0.1,0.2,0.3,0.2,0.4s0.1,0.3,0.1,0.4s0,0.2-0.1,0.4c0,0.1-0.1,0.3-0.2,0.4c-0.1,0.1-0.2,0.3-0.4,0.4
|
13 |
s-0.4,0.2-0.8,0.2h-2.5C50.1,18.2,50.1,30.2,50.1,30.2z"/> |
14 |
<path fill="#FFFFFF" d="M72.8,23.7c0,1.2-0.2,2.4-0.7,3.4c-0.4,1-1,1.9-1.8,2.7c-0.8,0.7-1.7,1.3-2.7,1.7c-1,0.4-2.2,0.6-3.4,0.6 |
15 |
c-1.2,0-2.3-0.2-3.4-0.6c-1.1-0.4-2-1-2.7-1.7c-0.8-0.7-1.4-1.6-1.8-2.7c-0.4-1-0.7-2.2-0.7-3.4c0-1.2,0.2-2.3,0.7-3.4
|
16 |
c0.4-1,1-1.9,1.8-2.6s1.7-1.3,2.7-1.7c1-0.4,2.2-0.6,3.4-0.6c1.2,0,2.3,0.2,3.4,0.6c1,0.4,2,1,2.7,1.7c0.8,0.7,1.4,1.6,1.8,2.6
|
17 |
C72.6,21.3,72.8,22.4,72.8,23.7z M69.5,23.7c0-0.8-0.1-1.5-0.4-2.2c-0.2-0.7-0.6-1.3-1-1.8s-1-0.9-1.7-1.3
|
18 |
c-0.7-0.3-1.4-0.5-2.3-0.5c-0.8,0-1.6,0.2-2.3,0.5s-1.2,0.7-1.7,1.3c-0.4,0.5-0.8,1.1-1,1.8c-0.2,0.7-0.4,1.4-0.4,2.2
|
19 |
c0,0.8,0.1,1.5,0.4,2.2c0.2,0.7,0.6,1.3,1,1.8s1,1,1.7,1.3s1.4,0.5,2.3,0.5c0.8,0,1.6-0.2,2.3-0.5c0.7-0.3,1.2-0.7,1.7-1.3
|
20 |
c0.4-0.5,0.8-1.1,1-1.8C69.4,25.2,69.5,24.4,69.5,23.7z"/> |
21 |
<path fill="#FFFFFF" d="M80.1,18.4L80.1,18.4c0.5-0.9,1.1-1.6,1.9-2.2s1.8-0.9,2.8-0.9c0.5,0,0.9,0.1,1.3,0.3s0.6,0.6,0.6,1.1 |
22 |
c0,0.6-0.2,0.9-0.6,1.2c-0.4,0.2-0.8,0.3-1.3,0.3h-0.2c-1.3,0-2.3,0.4-3.1,1.3c-0.8,0.9-1.2,2.2-1.2,3.9v6.7c0,0.4-0.1,0.7-0.2,0.9
|
23 |
c-0.1,0.2-0.3,0.4-0.4,0.5c-0.2,0.1-0.3,0.2-0.5,0.3c-0.2,0-0.3,0.1-0.5,0.1s-0.3,0-0.5-0.1c-0.2,0-0.4-0.1-0.5-0.3
|
24 |
c-0.2-0.1-0.3-0.3-0.4-0.5s-0.2-0.5-0.2-0.9v-13c0-0.4,0.1-0.6,0.2-0.9c0.1-0.2,0.2-0.4,0.4-0.5c0.2-0.1,0.3-0.2,0.5-0.2
|
25 |
s0.3-0.1,0.5-0.1c0.1,0,0.3,0,0.4,0.1c0.2,0,0.3,0.1,0.5,0.2c0.2,0.1,0.3,0.3,0.4,0.5c0.1,0.2,0.2,0.5,0.2,0.9v1.3
|
26 |
C80.2,18.4,80.1,18.4,80.1,18.4z"/> |
27 |
<path fill="#FFFFFF" d="M90.9,24.6c0,0.7,0.2,1.3,0.5,1.9s0.7,1.1,1.1,1.5c0.5,0.4,1,0.8,1.6,1s1.3,0.4,2,0.4c1,0,1.8-0.2,2.4-0.5 |
28 |
s1.2-0.7,1.7-1.2c0.2-0.2,0.4-0.3,0.6-0.4s0.3-0.1,0.5-0.1c0.4,0,0.7,0.1,1,0.4c0.3,0.2,0.4,0.6,0.4,1c0,0.1,0,0.3-0.1,0.5
|
29 |
s-0.2,0.4-0.4,0.6c-1.5,1.6-3.6,2.4-6,2.4c-1.2,0-2.3-0.2-3.3-0.6s-1.9-1-2.6-1.7s-1.3-1.6-1.7-2.6c-0.4-1-0.6-2.2-0.6-3.4
|
30 |
c0-1.2,0.2-2.4,0.6-3.4s1-1.9,1.7-2.7c0.7-0.7,1.6-1.3,2.6-1.7c1-0.4,2.1-0.6,3.2-0.6c2,0,3.7,0.6,5,1.7c1.4,1.1,2.2,2.8,2.5,5
|
31 |
c0,0.2,0.1,0.4,0.1,0.6c0,0.1,0,0.3,0,0.5c0,1.1-0.6,1.6-1.7,1.6H90.9V24.6z M100.3,22.3c0-0.6-0.1-1.2-0.3-1.8
|
32 |
c-0.2-0.5-0.5-1-0.8-1.4c-0.4-0.4-0.8-0.7-1.4-1c-0.5-0.2-1.2-0.4-1.9-0.4c-0.7,0-1.3,0.1-1.9,0.4c-0.6,0.2-1.1,0.6-1.5,1
|
33 |
s-0.8,0.9-1.1,1.4c-0.3,0.5-0.4,1.1-0.5,1.8H100.3z"/> |
34 |
<path fill="#FFFFFF" d="M118.4,28.4c0.4-0.3,0.8-0.5,1.1-0.5c0.4,0,0.7,0.1,1,0.4c0.2,0.3,0.4,0.6,0.4,0.9c0,0.2,0,0.4-0.1,0.7 |
35 |
c-0.1,0.2-0.3,0.5-0.6,0.7c-0.6,0.5-1.4,0.9-2.2,1.2c-0.8,0.3-1.7,0.4-2.6,0.4c-1.2,0-2.4-0.2-3.4-0.6s-1.9-1-2.7-1.7
|
36 |
c-0.7-0.7-1.3-1.6-1.8-2.6c-0.4-1-0.6-2.2-0.6-3.4c0-1.3,0.2-2.4,0.6-3.4s1-1.9,1.8-2.6s1.7-1.3,2.7-1.7c1-0.4,2.2-0.6,3.4-0.6
|
37 |
c0.8,0,1.7,0.1,2.5,0.4c0.8,0.2,1.5,0.6,2.2,1.1c0.3,0.2,0.5,0.5,0.6,0.7s0.2,0.5,0.2,0.7c0,0.4-0.1,0.8-0.4,1s-0.6,0.4-1,0.4
|
38 |
c-0.2,0-0.4,0-0.5-0.1c-0.2-0.1-0.4-0.2-0.7-0.5c-0.3-0.2-0.7-0.5-1.2-0.7s-1-0.3-1.6-0.3c-0.8,0-1.6,0.2-2.2,0.5s-1.2,0.7-1.6,1.3
|
39 |
c-0.4,0.5-0.8,1.1-1,1.8c-0.2,0.7-0.4,1.4-0.4,2.2s0.1,1.5,0.3,2.2c0.2,0.7,0.6,1.3,1,1.8s1,0.9,1.6,1.3c0.6,0.3,1.4,0.5,2.2,0.5
|
40 |
c0.6,0,1.2-0.1,1.7-0.3C117.5,29,118,28.7,118.4,28.4z"/> |
41 |
<path fill="#FFFFFF" d="M134.4,29.4h-0.1c-0.6,0.8-1.3,1.5-2.2,2s-1.9,0.7-3.1,0.7c-0.6,0-1.3-0.1-2-0.3c-0.7-0.2-1.3-0.4-1.9-0.8 |
42 |
s-1-0.9-1.4-1.5s-0.6-1.4-0.6-2.3c0-1.2,0.3-2.2,1-2.9c0.6-0.7,1.5-1.2,2.5-1.6s2.2-0.6,3.6-0.7c1.3-0.1,2.6-0.2,4-0.2v-0.4
|
43 |
c0-1.2-0.4-2.1-1.1-2.6c-0.7-0.6-1.7-0.9-2.8-0.9c-0.7,0-1.3,0.1-1.9,0.3c-0.6,0.2-1.2,0.5-1.8,0.9c-0.3,0.2-0.6,0.3-0.9,0.3
|
44 |
s-0.6-0.1-0.9-0.4c-0.2-0.2-0.4-0.5-0.4-0.9c0-0.2,0-0.4,0.2-0.7c0.1-0.2,0.3-0.4,0.6-0.6c0.7-0.5,1.5-0.9,2.4-1.2s2-0.4,3-0.4
|
45 |
c1.1,0,2.1,0.2,3,0.5c0.8,0.3,1.5,0.8,2.1,1.3c0.5,0.6,0.9,1.2,1.2,2s0.4,1.6,0.4,2.4v8.7c0,0.3,0,0.6-0.2,0.8
|
46 |
c-0.1,0.2-0.2,0.4-0.4,0.5s-0.3,0.2-0.5,0.2s-0.3,0-0.4,0c-0.1,0-0.3,0-0.4,0c-0.2,0-0.3-0.1-0.5-0.2s-0.3-0.3-0.4-0.5
|
47 |
c-0.1-0.2-0.2-0.5-0.2-0.8L134.4,29.4L134.4,29.4z M133.5,24.1c-0.8,0-1.6,0-2.4,0.1c-0.8,0.1-1.6,0.2-2.3,0.4
|
48 |
c-0.7,0.2-1.2,0.5-1.7,0.9c-0.4,0.4-0.7,0.9-0.7,1.6c0,0.5,0.1,0.9,0.3,1.2c0.2,0.3,0.4,0.6,0.8,0.8c0.3,0.2,0.7,0.3,1,0.4
|
49 |
c0.4,0.1,0.8,0.1,1.2,0.1c1.5,0,2.6-0.4,3.4-1.3c0.8-0.9,1.2-2,1.2-3.3v-0.8h-0.8V24.1z"/> |
50 |
<path fill="#FFFFFF" d="M150.5,19c-0.5-0.4-1-0.8-1.5-0.9c-0.5-0.2-1-0.3-1.6-0.3c-0.4,0-0.7,0-1.1,0.1c-0.4,0.1-0.7,0.2-1,0.4 |
51 |
c-0.3,0.2-0.5,0.4-0.7,0.6c-0.2,0.3-0.3,0.6-0.3,1c0,0.7,0.3,1.2,0.9,1.5c0.6,0.3,1.5,0.6,2.7,0.9c0.8,0.2,1.5,0.4,2.1,0.6
|
52 |
s1.2,0.6,1.7,0.9c0.5,0.4,0.9,0.8,1.1,1.3c0.3,0.5,0.4,1.1,0.4,1.8c0,0.9-0.2,1.7-0.5,2.4c-0.4,0.6-0.8,1.2-1.4,1.6
|
53 |
c-0.6,0.4-1.3,0.7-2,0.9c-0.8,0.2-1.5,0.3-2.3,0.3c-1,0-1.9-0.2-2.8-0.5c-0.9-0.3-1.7-0.7-2.4-1.3c-0.3-0.2-0.4-0.5-0.5-0.7
|
54 |
s-0.1-0.4-0.1-0.6c0-0.4,0.1-0.7,0.4-1c0.3-0.3,0.6-0.4,1-0.4s0.8,0.2,1.2,0.5c0.5,0.4,1,0.8,1.6,1s1.2,0.4,1.8,0.4
|
55 |
c0.4,0,0.8,0,1.2-0.1s0.7-0.2,1-0.4c0.3-0.2,0.5-0.4,0.7-0.7c0.2-0.3,0.3-0.7,0.3-1.1c0-0.7-0.4-1.3-1.1-1.6
|
56 |
c-0.7-0.4-1.7-0.7-3.1-1c-0.5-0.1-1.1-0.3-1.6-0.5s-1-0.4-1.5-0.8c-0.4-0.3-0.8-0.7-1.1-1.2s-0.4-1.1-0.4-1.9s0.2-1.6,0.5-2.2
|
57 |
s0.8-1.1,1.4-1.5c0.6-0.4,1.2-0.7,1.9-0.9s1.5-0.3,2.2-0.3c0.8,0,1.7,0.1,2.5,0.4c0.8,0.2,1.5,0.6,2.1,1.1c0.3,0.2,0.5,0.5,0.6,0.7
|
58 |
s0.1,0.4,0.1,0.6c0,0.4-0.1,0.7-0.4,1c-0.2,0.3-0.6,0.4-1,0.4C151.2,19.5,150.8,19.3,150.5,19z"/> |
59 |
<path fill="#FFFFFF" d="M164.5,31.5c-0.5,0.2-1.2,0.4-2,0.4c-1.5,0-2.7-0.4-3.4-1.3c-0.8-0.8-1.2-2.1-1.2-3.7v-8.6H156 |
60 |
c-0.3,0-0.6,0-0.8-0.1s-0.3-0.2-0.5-0.3c-0.1-0.1-0.2-0.3-0.2-0.4s-0.1-0.3-0.1-0.4s0-0.2,0.1-0.4c0-0.1,0.1-0.3,0.2-0.4
|
61 |
c0.1-0.1,0.3-0.3,0.5-0.4s0.4-0.2,0.8-0.2h1.8v-3.1c0-0.4,0.1-0.7,0.2-0.9c0.1-0.2,0.3-0.4,0.4-0.5c0.2-0.1,0.3-0.2,0.5-0.3
|
62 |
c0.2,0,0.3-0.1,0.5-0.1s0.3,0,0.5,0.1c0.2,0,0.3,0.1,0.5,0.3c0.2,0.1,0.3,0.3,0.4,0.5c0.1,0.2,0.2,0.5,0.2,0.9v3.1h3
|
63 |
c0.3,0,0.6,0.1,0.8,0.2s0.3,0.2,0.4,0.4c0.1,0.1,0.2,0.3,0.2,0.4s0.1,0.3,0.1,0.4s0,0.2-0.1,0.4c0,0.1-0.1,0.3-0.2,0.4
|
64 |
c-0.1,0.1-0.2,0.2-0.4,0.3c-0.2,0.1-0.4,0.1-0.8,0.1h-3v8.3c0,1,0.2,1.7,0.5,2.1s0.8,0.6,1.4,0.6c0.2,0,0.4,0,0.7-0.1
|
65 |
c0.2-0.1,0.4-0.1,0.6-0.1c0.4,0,0.7,0.1,0.9,0.4c0.2,0.2,0.3,0.5,0.3,0.9c0,0.2-0.1,0.5-0.2,0.7C165.1,31.2,164.8,31.4,164.5,31.5z
|
66 |
"/> |
67 |
<path fill="#FFFFFF" d="M171.4,18.4h0.1c0.4-0.9,1-1.6,1.8-2.2s1.8-0.9,2.8-0.9c0.5,0,0.9,0.1,1.3,0.3c0.4,0.2,0.6,0.6,0.6,1.1 |
68 |
c0,0.6-0.2,0.9-0.6,1.2c-0.4,0.2-0.8,0.3-1.3,0.3h-0.2c-1.3,0-2.3,0.4-3.1,1.3s-1.2,2.2-1.2,3.9v6.7c0,0.4-0.1,0.7-0.2,0.9
|
69 |
c-0.1,0.2-0.3,0.4-0.4,0.5c-0.2,0.1-0.3,0.2-0.5,0.3c-0.2,0-0.3,0.1-0.5,0.1c-0.1,0-0.3,0-0.5-0.1c-0.2,0-0.4-0.1-0.5-0.3
|
70 |
c-0.2-0.1-0.3-0.3-0.4-0.5c-0.1-0.2-0.2-0.5-0.2-0.9v-13c0-0.4,0.1-0.6,0.2-0.9c0.1-0.2,0.2-0.4,0.4-0.5s0.3-0.2,0.5-0.2
|
71 |
s0.3-0.1,0.5-0.1c0.1,0,0.3,0,0.4,0.1c0.2,0,0.3,0.1,0.5,0.2c0.2,0.1,0.3,0.3,0.4,0.5c0.1,0.2,0.2,0.5,0.2,0.9v1.3
|
72 |
C171.5,18.4,171.4,18.4,171.4,18.4z"/> |
73 |
</g>
|
74 |
<g>
|
75 |
<g>
|
76 |
<path fill="#FFFFFF" d="M19,38C8.5,38,0,29.5,0,19C0,13.5,2.4,8.3,6.5,4.7c0.6-0.5,1.4-0.4,1.9,0.1c0.5,0.6,0.4,1.4-0.1,1.9 |
77 |
C4.7,9.8,2.7,14.3,2.7,19c0,9,7.3,16.3,16.3,16.3S35.3,28,35.3,19S28,2.7,19,2.7c-2.2,0-4.3,0.4-6.3,1.2c-0.7,0.3-1.5,0-1.7-0.7
|
78 |
c-0.3-0.7,0-1.5,0.7-1.7C14,0.5,16.5,0,19,0c10.5,0,19,8.5,19,19S29.5,38,19,38z"/> |
79 |
</g>
|
80 |
<g>
|
81 |
<path fill="#FFFFFF" d="M19,32.8c-7.6,0-13.8-6.2-13.8-13.8S11.4,5.2,19,5.2c5.8,0,11,3.7,13,9.1c0.5,1.5,0.8,3.1,0.8,4.7 |
82 |
c0,0.7-0.6,1.3-1.3,1.3s-1.3-0.6-1.3-1.3c0-1.3-0.2-2.6-0.7-3.8c-1.6-4.4-5.8-7.4-10.5-7.4c-6.1,0-11.1,5-11.1,11.1S12.9,30,19,30
|
83 |
c0.7,0,1.3,0.6,1.3,1.3C20.3,32.2,19.7,32.8,19,32.8z"/> |
84 |
</g>
|
85 |
<g>
|
86 |
<path fill="#FFFFFF" d="M19,27.5c-4.7,0-8.5-3.8-8.5-8.5s3.8-8.5,8.5-8.5c0.7,0,1.3,0.6,1.3,1.3s-0.6,1.3-1.3,1.3 |
87 |
c-3.2,0-5.9,2.6-5.9,5.9s2.6,5.9,5.9,5.9s5.9-2.6,5.9-5.9c0-0.7,0.6-1.3,1.3-1.3c0.7,0,1.3,0.6,1.3,1.3
|
88 |
C27.5,23.7,23.7,27.5,19,27.5z"/> |
89 |
</g>
|
90 |
</g>
|
91 |
</svg>
|
It’s a mess! We can optimize it using a tool like SVGO—a handy tool for cleaning up large SVGs. We can use either the online GUI or install the Node.js-based package. By following the first approach, we’ll end with the following markup:
1 |
<?xml version="1.0" encoding="utf-8"?>
|
2 |
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" x="0px" y="0px" viewBox="0 0 178 38"> |
3 |
<g fill="#FFF"> |
4 |
<path d="M50.1 30.2c0 .4-.1.7-.2.9-.1.2-.3.4-.4.5-.2.1-.3.2-.5.3-.2 0-.3.1-.5.1s-.3 0-.5-.1c-.2 0-.4-.1-.5-.3-.2-.1-.3-.3-.4-.5-.1-.2-.1-.6-.1-.9V18.3h-2c-.3 0-.6-.1-.8-.2s-.3-.2-.4-.4c-.1-.1-.2-.3-.2-.4s-.1-.3-.1-.4 0-.2.1-.4c0-.1.1-.3.2-.4.1-.1.2-.3.4-.4.2-.1.4-.2.8-.2h2v-3.3c0-.9.1-1.8.3-2.6s.6-1.5 1-2.1c.5-.6 1.1-1 1.8-1.4.7-.3 1.6-.5 2.6-.5.9 0 1.5.1 1.8.4s.5.6.5 1c0 .3-.1.6-.3.9-.2.3-.6.4-1.2.4H53c-.6 0-1 .1-1.4.3s-.6.5-.9.8c-.2.3-.4.7-.5 1.2s-.1 1-.1 1.5v3.3h2.5c.3 0 .6.1.8.2.2.1.3.2.4.4.1.1.2.3.2.4s.1.3.1.4 0 .2-.1.4c0 .1-.1.3-.2.4-.1.1-.2.3-.4.4s-.4.2-.8.2h-2.5v12zM72.8 23.7c0 1.2-.2 2.4-.7 3.4-.4 1-1 1.9-1.8 2.7-.8.7-1.7 1.3-2.7 1.7-1 .4-2.2.6-3.4.6-1.2 0-2.3-.2-3.4-.6-1.1-.4-2-1-2.7-1.7-.8-.7-1.4-1.6-1.8-2.7-.4-1-.7-2.2-.7-3.4 0-1.2.2-2.3.7-3.4.4-1 1-1.9 1.8-2.6s1.7-1.3 2.7-1.7c1-.4 2.2-.6 3.4-.6 1.2 0 2.3.2 3.4.6 1 .4 2 1 2.7 1.7.8.7 1.4 1.6 1.8 2.6.5 1 .7 2.1.7 3.4zm-3.3 0c0-.8-.1-1.5-.4-2.2-.2-.7-.6-1.3-1-1.8s-1-.9-1.7-1.3c-.7-.3-1.4-.5-2.3-.5-.8 0-1.6.2-2.3.5s-1.2.7-1.7 1.3c-.4.5-.8 1.1-1 1.8-.2.7-.4 1.4-.4 2.2 0 .8.1 1.5.4 2.2.2.7.6 1.3 1 1.8s1 1 1.7 1.3 1.4.5 2.3.5c.8 0 1.6-.2 2.3-.5.7-.3 1.2-.7 1.7-1.3.4-.5.8-1.1 1-1.8.3-.7.4-1.5.4-2.2zM80.1 18.4c.5-.9 1.1-1.6 1.9-2.2s1.8-.9 2.8-.9c.5 0 .9.1 1.3.3s.6.6.6 1.1c0 .6-.2.9-.6 1.2-.4.2-.8.3-1.3.3h-.2c-1.3 0-2.3.4-3.1 1.3-.8.9-1.2 2.2-1.2 3.9v6.7c0 .4-.1.7-.2.9-.1.2-.3.4-.4.5-.2.1-.3.2-.5.3-.2 0-.3.1-.5.1s-.3 0-.5-.1c-.2 0-.4-.1-.5-.3-.2-.1-.3-.3-.4-.5s-.2-.5-.2-.9v-13c0-.4.1-.6.2-.9.1-.2.2-.4.4-.5.2-.1.3-.2.5-.2s.3-.1.5-.1c.1 0 .3 0 .4.1.2 0 .3.1.5.2s.3.3.4.5c.1.2.2.5.2.9v1.3h-.1zM90.9 24.6c0 .7.2 1.3.5 1.9s.7 1.1 1.1 1.5c.5.4 1 .8 1.6 1s1.3.4 2 .4c1 0 1.8-.2 2.4-.5s1.2-.7 1.7-1.2c.2-.2.4-.3.6-.4s.3-.1.5-.1c.4 0 .7.1 1 .4.3.2.4.6.4 1 0 .1 0 .3-.1.5s-.2.4-.4.6c-1.5 1.6-3.6 2.4-6 2.4-1.2 0-2.3-.2-3.3-.6s-1.9-1-2.6-1.7-1.3-1.6-1.7-2.6c-.4-1-.6-2.2-.6-3.4 0-1.2.2-2.4.6-3.4s1-1.9 1.7-2.7c.7-.7 1.6-1.3 2.6-1.7 1-.4 2.1-.6 3.2-.6 2 0 3.7.6 5 1.7 1.4 1.1 2.2 2.8 2.5 5 0 .2.1.4.1.6v.5c0 1.1-.6 1.6-1.7 1.6H90.9v-.2zm9.4-2.3c0-.6-.1-1.2-.3-1.8-.2-.5-.5-1-.8-1.4-.4-.4-.8-.7-1.4-1-.5-.2-1.2-.4-1.9-.4s-1.3.1-1.9.4c-.6.2-1.1.6-1.5 1s-.8.9-1.1 1.4c-.3.5-.4 1.1-.5 1.8h9.4zM118.4 28.4c.4-.3.8-.5 1.1-.5.4 0 .7.1 1 .4.2.3.4.6.4.9 0 .2 0 .4-.1.7-.1.2-.3.5-.6.7-.6.5-1.4.9-2.2 1.2-.8.3-1.7.4-2.6.4-1.2 0-2.4-.2-3.4-.6s-1.9-1-2.7-1.7c-.7-.7-1.3-1.6-1.8-2.6-.4-1-.6-2.2-.6-3.4 0-1.3.2-2.4.6-3.4s1-1.9 1.8-2.6 1.7-1.3 2.7-1.7c1-.4 2.2-.6 3.4-.6.8 0 1.7.1 2.5.4.8.2 1.5.6 2.2 1.1.3.2.5.5.6.7s.2.5.2.7c0 .4-.1.8-.4 1s-.6.4-1 .4c-.2 0-.4 0-.5-.1-.2-.1-.4-.2-.7-.5-.3-.2-.7-.5-1.2-.7s-1-.3-1.6-.3c-.8 0-1.6.2-2.2.5s-1.2.7-1.6 1.3c-.4.5-.8 1.1-1 1.8-.2.7-.4 1.4-.4 2.2s.1 1.5.3 2.2c.2.7.6 1.3 1 1.8s1 .9 1.6 1.3c.6.3 1.4.5 2.2.5.6 0 1.2-.1 1.7-.3.4-.6.9-.9 1.3-1.2zM134.4 29.4h-.1c-.6.8-1.3 1.5-2.2 2s-1.9.7-3.1.7c-.6 0-1.3-.1-2-.3-.7-.2-1.3-.4-1.9-.8s-1-.9-1.4-1.5-.6-1.4-.6-2.3c0-1.2.3-2.2 1-2.9.6-.7 1.5-1.2 2.5-1.6s2.2-.6 3.6-.7c1.3-.1 2.6-.2 4-.2v-.4c0-1.2-.4-2.1-1.1-2.6-.7-.6-1.7-.9-2.8-.9-.7 0-1.3.1-1.9.3-.6.2-1.2.5-1.8.9-.3.2-.6.3-.9.3s-.6-.1-.9-.4c-.2-.2-.4-.5-.4-.9 0-.2 0-.4.2-.7.1-.2.3-.4.6-.6.7-.5 1.5-.9 2.4-1.2s2-.4 3-.4c1.1 0 2.1.2 3 .5.8.3 1.5.8 2.1 1.3.5.6.9 1.2 1.2 2s.4 1.6.4 2.4v8.7c0 .3 0 .6-.2.8-.1.2-.2.4-.4.5s-.3.2-.5.2h-.8c-.2 0-.3-.1-.5-.2s-.3-.3-.4-.5c-.1-.2-.2-.5-.2-.8l.1-.7zm-.9-5.3c-.8 0-1.6 0-2.4.1-.8.1-1.6.2-2.3.4-.7.2-1.2.5-1.7.9-.4.4-.7.9-.7 1.6 0 .5.1.9.3 1.2.2.3.4.6.8.8.3.2.7.3 1 .4.4.1.8.1 1.2.1 1.5 0 2.6-.4 3.4-1.3.8-.9 1.2-2 1.2-3.3v-.8h-.8v-.1zM150.5 19c-.5-.4-1-.8-1.5-.9-.5-.2-1-.3-1.6-.3-.4 0-.7 0-1.1.1-.4.1-.7.2-1 .4-.3.2-.5.4-.7.6-.2.3-.3.6-.3 1 0 .7.3 1.2.9 1.5.6.3 1.5.6 2.7.9.8.2 1.5.4 2.1.6s1.2.6 1.7.9c.5.4.9.8 1.1 1.3.3.5.4 1.1.4 1.8 0 .9-.2 1.7-.5 2.4-.4.6-.8 1.2-1.4 1.6-.6.4-1.3.7-2 .9-.8.2-1.5.3-2.3.3-1 0-1.9-.2-2.8-.5-.9-.3-1.7-.7-2.4-1.3-.3-.2-.4-.5-.5-.7s-.1-.4-.1-.6c0-.4.1-.7.4-1 .3-.3.6-.4 1-.4s.8.2 1.2.5c.5.4 1 .8 1.6 1s1.2.4 1.8.4c.4 0 .8 0 1.2-.1s.7-.2 1-.4c.3-.2.5-.4.7-.7.2-.3.3-.7.3-1.1 0-.7-.4-1.3-1.1-1.6-.7-.4-1.7-.7-3.1-1-.5-.1-1.1-.3-1.6-.5s-1-.4-1.5-.8c-.4-.3-.8-.7-1.1-1.2s-.4-1.1-.4-1.9.2-1.6.5-2.2.8-1.1 1.4-1.5c.6-.4 1.2-.7 1.9-.9s1.5-.3 2.2-.3c.8 0 1.7.1 2.5.4.8.2 1.5.6 2.1 1.1.3.2.5.5.6.7s.1.4.1.6c0 .4-.1.7-.4 1-.2.3-.6.4-1 .4-.3 0-.7-.2-1-.5zM164.5 31.5c-.5.2-1.2.4-2 .4-1.5 0-2.7-.4-3.4-1.3-.8-.8-1.2-2.1-1.2-3.7v-8.6H156c-.3 0-.6 0-.8-.1s-.3-.2-.5-.3c-.1-.1-.2-.3-.2-.4s-.1-.3-.1-.4 0-.2.1-.4c0-.1.1-.3.2-.4.1-.1.3-.3.5-.4s.4-.2.8-.2h1.8v-3.1c0-.4.1-.7.2-.9.1-.2.3-.4.4-.5.2-.1.3-.2.5-.3.2 0 .3-.1.5-.1s.3 0 .5.1c.2 0 .3.1.5.3.2.1.3.3.4.5.1.2.2.5.2.9v3.1h3c.3 0 .6.1.8.2s.3.2.4.4c.1.1.2.3.2.4s.1.3.1.4 0 .2-.1.4c0 .1-.1.3-.2.4-.1.1-.2.2-.4.3-.2.1-.4.1-.8.1h-3v8.3c0 1 .2 1.7.5 2.1s.8.6 1.4.6c.2 0 .4 0 .7-.1.2-.1.4-.1.6-.1.4 0 .7.1.9.4.2.2.3.5.3.9 0 .2-.1.5-.2.7-.1.1-.4.3-.7.4zM171.4 18.4h.1c.4-.9 1-1.6 1.8-2.2s1.8-.9 2.8-.9c.5 0 .9.1 1.3.3.4.2.6.6.6 1.1 0 .6-.2.9-.6 1.2-.4.2-.8.3-1.3.3h-.2c-1.3 0-2.3.4-3.1 1.3s-1.2 2.2-1.2 3.9v6.7c0 .4-.1.7-.2.9-.1.2-.3.4-.4.5-.2.1-.3.2-.5.3-.2 0-.3.1-.5.1-.1 0-.3 0-.5-.1-.2 0-.4-.1-.5-.3-.2-.1-.3-.3-.4-.5-.1-.2-.2-.5-.2-.9v-13c0-.4.1-.6.2-.9.1-.2.2-.4.4-.5s.3-.2.5-.2.3-.1.5-.1c.1 0 .3 0 .4.1.2 0 .3.1.5.2s.3.3.4.5c.1.2.2.5.2.9v1.3h-.1z"/> |
5 |
</g>
|
6 |
<path fill="#FFF" d="M19 38C8.5 38 0 29.5 0 19 0 13.5 2.4 8.3 6.5 4.7c.6-.5 1.4-.4 1.9.1.5.6.4 1.4-.1 1.9C4.7 9.8 2.7 14.3 2.7 19c0 9 7.3 16.3 16.3 16.3S35.3 28 35.3 19 28 2.7 19 2.7c-2.2 0-4.3.4-6.3 1.2-.7.3-1.5 0-1.7-.7-.3-.7 0-1.5.7-1.7C14 .5 16.5 0 19 0c10.5 0 19 8.5 19 19s-8.5 19-19 19z"/> |
7 |
<path fill="#FFF" d="M19 32.8c-7.6 0-13.8-6.2-13.8-13.8S11.4 5.2 19 5.2c5.8 0 11 3.7 13 9.1.5 1.5.8 3.1.8 4.7 0 .7-.6 1.3-1.3 1.3s-1.3-.6-1.3-1.3c0-1.3-.2-2.6-.7-3.8-1.6-4.4-5.8-7.4-10.5-7.4-6.1 0-11.1 5-11.1 11.1S12.9 30 19 30c.7 0 1.3.6 1.3 1.3 0 .9-.6 1.5-1.3 1.5z"/> |
8 |
<path fill="#FFF" d="M19 27.5c-4.7 0-8.5-3.8-8.5-8.5s3.8-8.5 8.5-8.5c.7 0 1.3.6 1.3 1.3s-.6 1.3-1.3 1.3c-3.2 0-5.9 2.6-5.9 5.9s2.6 5.9 5.9 5.9 5.9-2.6 5.9-5.9c0-.7.6-1.3 1.3-1.3.7 0 1.3.6 1.3 1.3 0 4.7-3.8 8.5-8.5 8.5z"/> |
9 |
</svg>
|
On your side, depending on the configuration options you’ve set (global settings) when using this tool, the result might be different.
On our sprite wrapper, we’ll put this:
1 |
<symbol id="logo" viewBox="0 0 178 38"> |
2 |
<g>
|
3 |
<path d="M50.1 30.2c0 .4-.1.7-.2.9-.1.2-.3.4-.4.5-.2.1-.3.2-.5.3-.2 0-.3.1-.5.1s-.3 0-.5-.1c-.2 0-.4-.1-.5-.3-.2-.1-.3-.3-.4-.5-.1-.2-.1-.6-.1-.9V18.3h-2c-.3 0-.6-.1-.8-.2s-.3-.2-.4-.4c-.1-.1-.2-.3-.2-.4s-.1-.3-.1-.4 0-.2.1-.4c0-.1.1-.3.2-.4.1-.1.2-.3.4-.4.2-.1.4-.2.8-.2h2v-3.3c0-.9.1-1.8.3-2.6s.6-1.5 1-2.1c.5-.6 1.1-1 1.8-1.4.7-.3 1.6-.5 2.6-.5.9 0 1.5.1 1.8.4s.5.6.5 1c0 .3-.1.6-.3.9-.2.3-.6.4-1.2.4H53c-.6 0-1 .1-1.4.3s-.6.5-.9.8c-.2.3-.4.7-.5 1.2s-.1 1-.1 1.5v3.3h2.5c.3 0 .6.1.8.2.2.1.3.2.4.4.1.1.2.3.2.4s.1.3.1.4 0 .2-.1.4c0 .1-.1.3-.2.4-.1.1-.2.3-.4.4s-.4.2-.8.2h-2.5v12zM72.8 23.7c0 1.2-.2 2.4-.7 3.4-.4 1-1 1.9-1.8 2.7-.8.7-1.7 1.3-2.7 1.7-1 .4-2.2.6-3.4.6-1.2 0-2.3-.2-3.4-.6-1.1-.4-2-1-2.7-1.7-.8-.7-1.4-1.6-1.8-2.7-.4-1-.7-2.2-.7-3.4 0-1.2.2-2.3.7-3.4.4-1 1-1.9 1.8-2.6s1.7-1.3 2.7-1.7c1-.4 2.2-.6 3.4-.6 1.2 0 2.3.2 3.4.6 1 .4 2 1 2.7 1.7.8.7 1.4 1.6 1.8 2.6.5 1 .7 2.1.7 3.4zm-3.3 0c0-.8-.1-1.5-.4-2.2-.2-.7-.6-1.3-1-1.8s-1-.9-1.7-1.3c-.7-.3-1.4-.5-2.3-.5-.8 0-1.6.2-2.3.5s-1.2.7-1.7 1.3c-.4.5-.8 1.1-1 1.8-.2.7-.4 1.4-.4 2.2 0 .8.1 1.5.4 2.2.2.7.6 1.3 1 1.8s1 1 1.7 1.3 1.4.5 2.3.5c.8 0 1.6-.2 2.3-.5.7-.3 1.2-.7 1.7-1.3.4-.5.8-1.1 1-1.8.3-.7.4-1.5.4-2.2zM80.1 18.4c.5-.9 1.1-1.6 1.9-2.2s1.8-.9 2.8-.9c.5 0 .9.1 1.3.3s.6.6.6 1.1c0 .6-.2.9-.6 1.2-.4.2-.8.3-1.3.3h-.2c-1.3 0-2.3.4-3.1 1.3-.8.9-1.2 2.2-1.2 3.9v6.7c0 .4-.1.7-.2.9-.1.2-.3.4-.4.5-.2.1-.3.2-.5.3-.2 0-.3.1-.5.1s-.3 0-.5-.1c-.2 0-.4-.1-.5-.3-.2-.1-.3-.3-.4-.5s-.2-.5-.2-.9v-13c0-.4.1-.6.2-.9.1-.2.2-.4.4-.5.2-.1.3-.2.5-.2s.3-.1.5-.1c.1 0 .3 0 .4.1.2 0 .3.1.5.2s.3.3.4.5c.1.2.2.5.2.9v1.3h-.1zM90.9 24.6c0 .7.2 1.3.5 1.9s.7 1.1 1.1 1.5c.5.4 1 .8 1.6 1s1.3.4 2 .4c1 0 1.8-.2 2.4-.5s1.2-.7 1.7-1.2c.2-.2.4-.3.6-.4s.3-.1.5-.1c.4 0 .7.1 1 .4.3.2.4.6.4 1 0 .1 0 .3-.1.5s-.2.4-.4.6c-1.5 1.6-3.6 2.4-6 2.4-1.2 0-2.3-.2-3.3-.6s-1.9-1-2.6-1.7-1.3-1.6-1.7-2.6c-.4-1-.6-2.2-.6-3.4 0-1.2.2-2.4.6-3.4s1-1.9 1.7-2.7c.7-.7 1.6-1.3 2.6-1.7 1-.4 2.1-.6 3.2-.6 2 0 3.7.6 5 1.7 1.4 1.1 2.2 2.8 2.5 5 0 .2.1.4.1.6v.5c0 1.1-.6 1.6-1.7 1.6H90.9v-.2zm9.4-2.3c0-.6-.1-1.2-.3-1.8-.2-.5-.5-1-.8-1.4-.4-.4-.8-.7-1.4-1-.5-.2-1.2-.4-1.9-.4s-1.3.1-1.9.4c-.6.2-1.1.6-1.5 1s-.8.9-1.1 1.4c-.3.5-.4 1.1-.5 1.8h9.4zM118.4 28.4c.4-.3.8-.5 1.1-.5.4 0 .7.1 1 .4.2.3.4.6.4.9 0 .2 0 .4-.1.7-.1.2-.3.5-.6.7-.6.5-1.4.9-2.2 1.2-.8.3-1.7.4-2.6.4-1.2 0-2.4-.2-3.4-.6s-1.9-1-2.7-1.7c-.7-.7-1.3-1.6-1.8-2.6-.4-1-.6-2.2-.6-3.4 0-1.3.2-2.4.6-3.4s1-1.9 1.8-2.6 1.7-1.3 2.7-1.7c1-.4 2.2-.6 3.4-.6.8 0 1.7.1 2.5.4.8.2 1.5.6 2.2 1.1.3.2.5.5.6.7s.2.5.2.7c0 .4-.1.8-.4 1s-.6.4-1 .4c-.2 0-.4 0-.5-.1-.2-.1-.4-.2-.7-.5-.3-.2-.7-.5-1.2-.7s-1-.3-1.6-.3c-.8 0-1.6.2-2.2.5s-1.2.7-1.6 1.3c-.4.5-.8 1.1-1 1.8-.2.7-.4 1.4-.4 2.2s.1 1.5.3 2.2c.2.7.6 1.3 1 1.8s1 .9 1.6 1.3c.6.3 1.4.5 2.2.5.6 0 1.2-.1 1.7-.3.4-.6.9-.9 1.3-1.2zM134.4 29.4h-.1c-.6.8-1.3 1.5-2.2 2s-1.9.7-3.1.7c-.6 0-1.3-.1-2-.3-.7-.2-1.3-.4-1.9-.8s-1-.9-1.4-1.5-.6-1.4-.6-2.3c0-1.2.3-2.2 1-2.9.6-.7 1.5-1.2 2.5-1.6s2.2-.6 3.6-.7c1.3-.1 2.6-.2 4-.2v-.4c0-1.2-.4-2.1-1.1-2.6-.7-.6-1.7-.9-2.8-.9-.7 0-1.3.1-1.9.3-.6.2-1.2.5-1.8.9-.3.2-.6.3-.9.3s-.6-.1-.9-.4c-.2-.2-.4-.5-.4-.9 0-.2 0-.4.2-.7.1-.2.3-.4.6-.6.7-.5 1.5-.9 2.4-1.2s2-.4 3-.4c1.1 0 2.1.2 3 .5.8.3 1.5.8 2.1 1.3.5.6.9 1.2 1.2 2s.4 1.6.4 2.4v8.7c0 .3 0 .6-.2.8-.1.2-.2.4-.4.5s-.3.2-.5.2h-.8c-.2 0-.3-.1-.5-.2s-.3-.3-.4-.5c-.1-.2-.2-.5-.2-.8l.1-.7zm-.9-5.3c-.8 0-1.6 0-2.4.1-.8.1-1.6.2-2.3.4-.7.2-1.2.5-1.7.9-.4.4-.7.9-.7 1.6 0 .5.1.9.3 1.2.2.3.4.6.8.8.3.2.7.3 1 .4.4.1.8.1 1.2.1 1.5 0 2.6-.4 3.4-1.3.8-.9 1.2-2 1.2-3.3v-.8h-.8v-.1zM150.5 19c-.5-.4-1-.8-1.5-.9-.5-.2-1-.3-1.6-.3-.4 0-.7 0-1.1.1-.4.1-.7.2-1 .4-.3.2-.5.4-.7.6-.2.3-.3.6-.3 1 0 .7.3 1.2.9 1.5.6.3 1.5.6 2.7.9.8.2 1.5.4 2.1.6s1.2.6 1.7.9c.5.4.9.8 1.1 1.3.3.5.4 1.1.4 1.8 0 .9-.2 1.7-.5 2.4-.4.6-.8 1.2-1.4 1.6-.6.4-1.3.7-2 .9-.8.2-1.5.3-2.3.3-1 0-1.9-.2-2.8-.5-.9-.3-1.7-.7-2.4-1.3-.3-.2-.4-.5-.5-.7s-.1-.4-.1-.6c0-.4.1-.7.4-1 .3-.3.6-.4 1-.4s.8.2 1.2.5c.5.4 1 .8 1.6 1s1.2.4 1.8.4c.4 0 .8 0 1.2-.1s.7-.2 1-.4c.3-.2.5-.4.7-.7.2-.3.3-.7.3-1.1 0-.7-.4-1.3-1.1-1.6-.7-.4-1.7-.7-3.1-1-.5-.1-1.1-.3-1.6-.5s-1-.4-1.5-.8c-.4-.3-.8-.7-1.1-1.2s-.4-1.1-.4-1.9.2-1.6.5-2.2.8-1.1 1.4-1.5c.6-.4 1.2-.7 1.9-.9s1.5-.3 2.2-.3c.8 0 1.7.1 2.5.4.8.2 1.5.6 2.1 1.1.3.2.5.5.6.7s.1.4.1.6c0 .4-.1.7-.4 1-.2.3-.6.4-1 .4-.3 0-.7-.2-1-.5zM164.5 31.5c-.5.2-1.2.4-2 .4-1.5 0-2.7-.4-3.4-1.3-.8-.8-1.2-2.1-1.2-3.7v-8.6H156c-.3 0-.6 0-.8-.1s-.3-.2-.5-.3c-.1-.1-.2-.3-.2-.4s-.1-.3-.1-.4 0-.2.1-.4c0-.1.1-.3.2-.4.1-.1.3-.3.5-.4s.4-.2.8-.2h1.8v-3.1c0-.4.1-.7.2-.9.1-.2.3-.4.4-.5.2-.1.3-.2.5-.3.2 0 .3-.1.5-.1s.3 0 .5.1c.2 0 .3.1.5.3.2.1.3.3.4.5.1.2.2.5.2.9v3.1h3c.3 0 .6.1.8.2s.3.2.4.4c.1.1.2.3.2.4s.1.3.1.4 0 .2-.1.4c0 .1-.1.3-.2.4-.1.1-.2.2-.4.3-.2.1-.4.1-.8.1h-3v8.3c0 1 .2 1.7.5 2.1s.8.6 1.4.6c.2 0 .4 0 .7-.1.2-.1.4-.1.6-.1.4 0 .7.1.9.4.2.2.3.5.3.9 0 .2-.1.5-.2.7-.1.1-.4.3-.7.4zM171.4 18.4h.1c.4-.9 1-1.6 1.8-2.2s1.8-.9 2.8-.9c.5 0 .9.1 1.3.3.4.2.6.6.6 1.1 0 .6-.2.9-.6 1.2-.4.2-.8.3-1.3.3h-.2c-1.3 0-2.3.4-3.1 1.3s-1.2 2.2-1.2 3.9v6.7c0 .4-.1.7-.2.9-.1.2-.3.4-.4.5-.2.1-.3.2-.5.3-.2 0-.3.1-.5.1-.1 0-.3 0-.5-.1-.2 0-.4-.1-.5-.3-.2-.1-.3-.3-.4-.5-.1-.2-.2-.5-.2-.9v-13c0-.4.1-.6.2-.9.1-.2.2-.4.4-.5s.3-.2.5-.2.3-.1.5-.1c.1 0 .3 0 .4.1.2 0 .3.1.5.2s.3.3.4.5c.1.2.2.5.2.9v1.3h-.1z"/> |
4 |
</g>
|
5 |
<path d="M19 38C8.5 38 0 29.5 0 19 0 13.5 2.4 8.3 6.5 4.7c.6-.5 1.4-.4 1.9.1.5.6.4 1.4-.1 1.9C4.7 9.8 2.7 14.3 2.7 19c0 9 7.3 16.3 16.3 16.3S35.3 28 35.3 19 28 2.7 19 2.7c-2.2 0-4.3.4-6.3 1.2-.7.3-1.5 0-1.7-.7-.3-.7 0-1.5.7-1.7C14 .5 16.5 0 19 0c10.5 0 19 8.5 19 19s-8.5 19-19 19z"/> |
6 |
<path d="M19 32.8c-7.6 0-13.8-6.2-13.8-13.8S11.4 5.2 19 5.2c5.8 0 11 3.7 13 9.1.5 1.5.8 3.1.8 4.7 0 .7-.6 1.3-1.3 1.3s-1.3-.6-1.3-1.3c0-1.3-.2-2.6-.7-3.8-1.6-4.4-5.8-7.4-10.5-7.4-6.1 0-11.1 5-11.1 11.1S12.9 30 19 30c.7 0 1.3.6 1.3 1.3 0 .9-.6 1.5-1.3 1.5z"/> |
7 |
<path d="M19 27.5c-4.7 0-8.5-3.8-8.5-8.5s3.8-8.5 8.5-8.5c.7 0 1.3.6 1.3 1.3s-.6 1.3-1.3 1.3c-3.2 0-5.9 2.6-5.9 5.9s2.6 5.9 5.9 5.9 5.9-2.6 5.9-5.9c0-.7.6-1.3 1.3-1.3.7 0 1.3.6 1.3 1.3 0 4.7-3.8 8.5-8.5 8.5z"/> |
8 |
</symbol>
|
Notice that we remove the internal fill="#FFF" styling from the g and path elements. We do this as we want to keep just one logo instance in our sprite and override its default color; we’ll manipulate it through CSS differently depending on the page part (header and footer) that will appear.
CTA
As we already know, the CTA will have two SVGs: the handmade illustration and another decorative icon (send) taken from the Feather collection.
Consider the initial markup of the illustration:
1 |
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="256.6px" height="60.02px" x="0px" y="0px" style="enable-background:new 0 0 256.6 60.02" viewBox="0 0 256.6 60.02"> |
2 |
<path d="M3.98 0c9.31-.01 18.44.99 27.76 1 10.44.01 20.89 0 31.33 0 7.99 0 16.09-.41 24.06.22 10.76.85 21.39.78 32.2.78 4.39 0 8.82.21 13.2.05 4.46-.16 8.62-1.07 13.12-1.05 19.4.1 38.81 0 58.21 0 4.58 0 9.16.02 13.74-.01 5.99-.04 11.84.86 17.8 1.06 6.92.24 14.3.49 21.2-.12-.87.98-1.21 2.86-1.65 4.09-.31.89-.81 2-1.02 2.93-.78 3.31.16 7.86.07 11.25-.1 3.99-1.02 7.75-1.02 11.8v11.02c0 3.58.19 7.22.02 10.8-.13 2.66-.6 2.22-3.15 2.18-4.54-.08-9.09 0-13.63 0-5.38 0-10.75-.02-16.13.02-5.74.05-11.37-.86-17.09-1.07-6.42-.24-12.91.09-19.34.06-4.9-.03-9.57.9-14.44 1.05-2.54.08-5.26-.44-7.78.03-1.32.24-2.48.79-3.82.94-3.63.41-7.47.87-11.13 1.02-4.97.2-9.47-.21-14.38.73-6.11 1.17-13 .22-19.24.22-8.9 0-17.92-.4-26.81-.05-5.32.21-10.52 1.12-15.85 1.07-9.41-.07-18.81-.02-28.2-.02H12.98c-1.5 0-3-.02-4.5 0-1.59.02-2.54-.51-3.72-.78-.89-.2-4.02.24-4.65-.38-.48-.47.81-5.66.87-6.65.17-2.71 1.06-5.14 1.02-7.92-.04-3.34 0-6.68-.02-10.02-.02-4.3.96-7.94 1-12.27.03-4.3-1.41-8.11-2.05-12.2C.61 7.77.02.47 2.71.18c.77 1.2 2.03.84 3.27.82"/> |
3 |
</svg>
|
On our sprite wrapper, we’ll put this:
1 |
<symbol id="button" viewBox="0 0 256.6 60.02" preserveAspectRatio="none"> |
2 |
<path d="M3.98 0c9.31-.01 18.44.99 27.76 1 10.44.01 20.89 0 31.33 0 7.99 0 16.09-.41 24.06.22 10.76.85 21.39.78 32.2.78 4.39 0 8.82.21 13.2.05 4.46-.16 8.62-1.07 13.12-1.05 19.4.1 38.81 0 58.21 0 4.58 0 9.16.02 13.74-.01 5.99-.04 11.84.86 17.8 1.06 6.92.24 14.3.49 21.2-.12-.87.98-1.21 2.86-1.65 4.09-.31.89-.81 2-1.02 2.93-.78 3.31.16 7.86.07 11.25-.1 3.99-1.02 7.75-1.02 11.8v11.02c0 3.58.19 7.22.02 10.8-.13 2.66-.6 2.22-3.15 2.18-4.54-.08-9.09 0-13.63 0-5.38 0-10.75-.02-16.13.02-5.74.05-11.37-.86-17.09-1.07-6.42-.24-12.91.09-19.34.06-4.9-.03-9.57.9-14.44 1.05-2.54.08-5.26-.44-7.78.03-1.32.24-2.48.79-3.82.94-3.63.41-7.47.87-11.13 1.02-4.97.2-9.47-.21-14.38.73-6.11 1.17-13 .22-19.24.22-8.9 0-17.92-.4-26.81-.05-5.32.21-10.52 1.12-15.85 1.07-9.41-.07-18.81-.02-28.2-.02H12.98c-1.5 0-3-.02-4.5 0-1.59.02-2.54-.51-3.72-.78-.89-.2-4.02.24-4.65-.38-.48-.47.81-5.66.87-6.65.17-2.71 1.06-5.14 1.02-7.92-.04-3.34 0-6.68-.02-10.02-.02-4.3.96-7.94 1-12.27.03-4.3-1.41-8.11-2.05-12.2C.61 7.77.02.47 2.71.18c.77 1.2 2.03.84 3.27.82"/> |
3 |
</symbol>
|
Notice the extra preserveAspectRatio="none" attribute that didn’t initially exist. This attribute will force the drawing to stretch and cover the whole CTA’s dimensions.
Next, consider the initial markup of the icon:
1 |
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-send"> |
2 |
<line x1="22" y1="2" x2="11" y2="13"></line> |
3 |
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon> |
4 |
</svg>
|
On our sprite wrapper, we’ll put this:
1 |
<symbol id="send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
2 |
<line x1="22" y1="2" x2="11" y2="13"></line> |
3 |
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon> |
4 |
</symbol>
|
tip
We keep the default
stroke="currentColor" attribute. In our CSS, we’ll set the default color for the CTA to white. That way, the icon will inherit this color and use it as its stroke color. Socials
Next, consider the Facebook icon taken from the Font Awesome library. Its markup looks like this:
1 |
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg> |
On our sprite wrapper, we’ll put this:
1 |
<symbol id="facebook" viewBox="0 0 512 512"> |
2 |
<path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/> |
3 |
</symbol>
|
In the same way, we’ll repeat this process for the rest of the socials.
Show the SVGs
Now that we created the sprite, let’s show the icons as we wish.
Logo
Inside the partials folder, we’ll create a new file called logo.php and insert the following code:
1 |
<a class="logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" aria-label="forecastr logo"> |
2 |
<svg width="178" height="38" role="img"> |
3 |
<use href="#logo"></use> |
4 |
</svg>
|
5 |
</a>
|
Examine how we render the target icon using the use element and passing the appropriate symbol ID. Also, we add appropriate dimensions in the SVGs by keeping the aspect ratio defined in the viewBox attribute.
We use the recommended
href attribute instead of the older, deprecated xlink:href one to link to the desired symbol. You can use both in case you want to support older browser versions.Next, we’ll include that file in the header and footer using the get_template_part() function.
CTA
Inside the index.php file, we’ll place the code for the CTA as follows:
1 |
<a class="btn-contact" href=""> |
2 |
<?php esc_html_e( 'Contact us', 'playground' ); ?> |
3 |
<svg class="shape" aria-hidden="true"> |
4 |
<use href="#button"></use> |
5 |
</svg>
|
6 |
<svg width="24" height="24" aria-hidden="true"> |
7 |
<use href="#send"></use> |
8 |
</svg>
|
9 |
</a>
|
Notice the two SVGs that we’ll handle differently on CSS. The first (drawing) will be absolutely positioned and cover the whole link size. In another tutorial, I explain in depth how to position such icons. Also, both SVG will share the aria-hidden="true" as they are purely decorative.
Socials
Our footer consists of four columns/widget areas. As we did, in a recent tutorial, through the Admin, we’ll populate these areas with widgets. In our case, for the fourth column, we’ll add a Custom HTML block.
Here’s the code that we’ll pass:
1 |
<ul class="socials"> |
2 |
<li>
|
3 |
<a href="" aria-label="Find us on Facebook" title="Find us on Facebook" target="_blank"> |
4 |
<svg width="28" height="28" aria-hidden="true"> |
5 |
<use href="#facebook"></use> |
6 |
</svg>
|
7 |
</a>
|
8 |
</li>
|
9 |
<li>
|
10 |
<a href="" aria-label="Find us on Instagram" title="Find us on Instagram" target="_blank"> |
11 |
<svg width="28" height="32" aria-hidden="true"> |
12 |
<use href="#instagram"></use> |
13 |
</svg>
|
14 |
</a>
|
15 |
</li>
|
16 |
<li>
|
17 |
<a href="" aria-label="Find us on LinkedIn" title="Find us on LinkedIn" target="_blank"> |
18 |
<svg width="28" height="32" aria-hidden="true"> |
19 |
<use href="#linkedin"></use> |
20 |
</svg>
|
21 |
</a>
|
22 |
</li>
|
23 |
<li>
|
24 |
<a href="" aria-label="Find us on YouTube" title="Find us on YouTube" target="_blank"> |
25 |
<svg width="32" height="28" aria-hidden="true"> |
26 |
<use href="#youtube"></use> |
27 |
</svg>
|
28 |
</a>
|
29 |
</li>
|
30 |
</ul>
|
Reference an External SVG File
So far, we’ve seen how to work with an SVG that is embedded inline in our markup.
However, there’s also an alternative implementation where we have our sprites inside an external SVG and use its full path to select the target icons.
All files of this technique will appear in the
external-svg branch.Here are the steps we’ll follow for this transformation:
- First, optionally, we’ll move the
sprites.phpfrom thepartialsfolder to theimgfolder. In our case, I’ll do this as I like to put inside thepartialsfolder only PHP files. Most importantly, we’ll rename it fromsprites.phptosprites.svgas we won’t include it anymore inside the header via theget_template_part()function.
- We won’t hide the SVG as it won’t be part of the DOM. If you check the page source, you won’t find it! So, we’ll remove its inline style. Also, we’ll declare its namespace via the
xmlns="http://www.w3.org/2000/svg"attribute.
1 |
<svg xmlns="http://www.w3.org/2000/svg"> |
2 |
<!--Put all SVG icons inside this element-->
|
3 |
</svg>
|
- Inside the
functions.phpfile, we’ll create a simple function for printing the SVG’s path.
1 |
function print_sprites_path() { |
2 |
echo esc_url( get_template_directory_uri() ) . '/assets/img/sprites.svg'; |
3 |
}
|
- Then, to show individual icons, we’ll use the SVG path following the fragment identifier that references the icon.
1 |
<?php /*logo.php*/ ?> |
2 |
|
3 |
<a class="logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" aria-label="forecastr logo"> |
4 |
<svg width="178" height="38" role="img"> |
5 |
<use href="<?php print_sprites_path(); ?>#logo"></use> |
6 |
</svg>
|
7 |
</a>
|
- Just for the social icons, which we register through the widgets, we’ll hardcode the full path.
The nice thing about this implementation is that the browser caches the sprite after the initial request, so we save one extra HTTP request.
Conclusion
During this thorough tutorial, we examined how to embed and work with SVG Sprites in a WordPress theme. To get the most out of this process, we created the SVG Sprite manually. However, depending on the complexity of your project, you can always make your life easier by automating the process using an online tool or another compatible with your workflow automation tool.
What is your favorite method SVG Sprite creation technique? Share your thoughts on X!
As always, thanks a lot for reading!
