A Quick Fix with SVGs, Adobe Illustrator, and WordPress

After all this time, and even though this is also partially my fault, I have been using SVGs on WordPress sites the wrong way. I say this because I realized that when I view all of my WP-powered sites that have SVG file format logos, none of the logos were showing up correctly from both the view of my smartphone and my Kindle. I scourged around from asking help at the Slack chats to (reluctantly) search around Stack Overflow for solutions. It turns out that there are a few extra steps that needed to be done before I export the graphic in SVG file format.

Making super-crisp SVG format images? Use a vector program!

Remember that SVG stands for Scalable Vector Graphics. This format is not going to work on photographs or pre-made images unless if they were created and exported by using a vector program. There are plenty of them out there, but these are the more renowned primary vector art programs that you can use:

• Adobe Illustrator (subscription-based)
• Affinity Designer (only $49.99 for both Mac and Windows)
• Inkscape (free/open source)

For this mini quick fix, I am using Adobe Illustrator. There are plenty of tutorials out there about the basics of SVG and how you can create and export all your graphics in the crisp SVG format for your sites. SVGs are very helpful also in creating (CSS) animations too and I recommend looking into this file format when you begin creating them.

• Web-based Vector Graphic Design with Affinity Designer
• From Adobe Illustrator to the Web
• SVGs using Inkscape

The problem with SVG-based images with WordPress?

The images created using simple objects and blends will remain. The problem is the (custom) typography ¹ that you use in your SVG image will not be read by WP properly. Instead, it will show up as plain Arial text. This also applies to the Dingbat-style fonts, just like what I did with my new SVG logo for my personal blog (the leaves underneath).

If you can see the custom fonts and a string of leaves underneath, then that’s how the logo should look like. If not, something is definitely wrong. If you used Adobe Illustrator to make this logo (just like I have), there are a few steps that you need to take in order to export this SVG file correctly. Since I can’t use this logo as an example now, I’m going to use my new blog post signature instead.

I. Create your vector graphic

In this case, my name with a custom font only installed on my computer. I added a few swashes here and there, a few minor details here, a graphic or two, you get the picture. So, my new signature would look like this.

2. Convert your text to an editable object

This is one mistake that I’ve always been doing when it came to adding text to an SVG image, especially with logos and WordPress. In order to convert your text to an editable object, you will be expanding the text. The steps go in order:

1. Select your text using the Selection Tool.
2. On the top menu, you will go to Object menu item.
3. Choose Expand… and make sure that you have Object and Fill (Stroke if the option is applicable) checked.
4. Click OK.

From this point, you will notice that each letter of your font now has paths. If you have to, you can even start manipulating the look of each letter using its newly-converted path points. In other words, Illustrator no longer recognizes your text as just text, but now an editable object, just like your non-text objects that you added to your graphic. (In this case, the bunny at the bottom) Your graphic should have all the paths captured by your Selection Tool unlike earlier.

3. Export your graphic in SVG file format

… but before we export our image as an SVG, be sure to save your file first. Or, if you need to, save the file first before you proceed with the previous step before this one. Finally, you are now ready to export your graphic to an SVG.

1. On your top menu, go to File.
2. Choose Export, then choose Export as…
3. Go ahead and save your file to your hard drive as is.
4. Afterwards, you will see a pop-up window. On the Font drop-down, choose Convert to Outlines.

The Convert to Outlines option on this window will allow the browser to read the text part of your image as yet another graphic translatable to CSS if you are using pure CSS code to construct this entire graphic, however, just creating the image on Illustrator (or any vector program you use) using these steps is much easier.

My image signature’s final product looks like this below. I am now ready to implement this on my personal blog.

4. Upload and use your new SVG graphic to your WordPress site

WordPress by default does not accept SVG file formats because of its security issues that can make your site vulnerable to hackers and other forms of malware. An SVG file to be used has to be sanitized, but it will take a lot of coding hassles for this one single graphic (or other SVG graphics if you made more than one). More information about this is from this previous entry that I wrote last year.

But, there already is a better way to fix this in WordPress. Here are the steps below:

1. Install Safe SVG WordPress plugin. Unless you are a plugin builder expert with PHP, you can alter the functions.php file with SVG sanitation support. Otherwise, save yourself the hassle and install the plugin.
2. Activate the plugin. Now you finally have SVG file support with sanitation altogether.
3. Upload your SVG file to your Media Library on your WordPress Dashboard. Be sure to take note of the image’s exact URL.

Now you are ready to use your SVG file on your WordPress site. You need to use the URL of that image in your CSS code if you want to manipulate the size of your image to its right size. Remember, because these are vector graphics, they will retain its high quality no matter how much you resize them.

In the case of this example image, this is also my image signature. I have to edit my functions.php file to enable a signature image and have to add a .signature class to my child theme’s style.css file so I can resize it.

And now, here is my image signature in its high-quality SVG glory! You can view it live on my blog and click on any of my entries. The image signature should be right at the bottom.

In conclusion…

SVG file formats can be tricky when you start to implement them in your sites, mainly because of its security vulnerabilities. However, they are becoming a standard in creating and posting vector-based graphics. PNG will always be the popular file format, but in the case of some software-powered sites such as WordPress, PNGs can lose its quality because of the software’s internal optimization of its images when they get uploaded. SVGs are so helpful because their file sizes are several times smaller than that of both JPG and PNG file formats. SVGs are also wonderful for custom flat-color graphics such as logos, icons, custom illustrated characters, images used for animated graphics, and even image signatures like the example above.

Although SVGs have been around for several years now and many web designers and developers use this format for some specific images, it is still relatively new for many web design/development hobbyists. You would have to dig around the net to find more articles and tutorials about SVGs in general and how you can use them to beautify your site projects.

Here we have my very first tutorial of 2018. I look forward to sharing more tutorials with everyone.

Till next time!