What is this “Logo Shop”?

For the longest time, I have been planning to open a goodies shop here on The NINPOJineous as a small side business. Just like a few web designers and developers out there, there’s always a small shop featuring all their (digital) handmade goodness for all of your (digital/web) design and development needs. In fact, when I was planning to open a goodies shop, I thought about opening a free and paid WordPress theme shop. However, because of my lack of time to do so many things like I wanted, I decided to go a little small.

I have been getting used to creating my digital art and graphics using Adobe Illustrator CC as of late. Photoshop will always be my #1 go-to graphics program for all my designs and graphics, but when it comes to original, crisp, and high-quality graphics, Illustrator is always the way to go. I’ve been wanting to “translate” (?) all of my handmade art and designs from my sketchbooks to Illustrator for the longest time, and even though I’m familiar with the basics of the Illustrator tools for so many years now, ¹ I still have yet to get used to making my digital art using the WACOM Intuos tablet and my Slate 2. I remember some 10+ years ago when two of my friends gave me a WACOM Intuos tablet (older version than the one I have now) and an X-Pen Japanese writing tablet at the same time, and yet I never really took the time to learn how to use them. I have a small desk, and even though the sizes are for small desks, I still had a hard time getting used to them.

As an artist who finally has gotten the grasp of Illustrator’s power with just my trackpad, I think the time is near for me to open a goodies shop. While many other hobbyist web designers have graphics from pre-created sources, ² mine will be a little different. Any web/graphic designer can create their own logos, but I’m offering something a little original and unique that can help their site’s brand stand out from the rest. Maybe. 😇

Speaking of crisp and high-quality logos, I’m going to bring up my next topic.

The annoying part of WordPress

My ultimate go-to blogging/CMS software, WordPress, has a few flaws that annoy me. One of them deals with the way WordPress treats vector and transparent graphics. Here’s an example that I want to show you:

… as well as this one below it.

Between the two logos, both created using two different graphics programs. They have one thing in common: they were both exported as transparent PNGs. Also, the sizes of these logos I posted are also in their original sizes: version 1 logo at 580 x 108, version 2 at 445 x 396. If you take a closer look at both, did you notice anything wrong with them?

If you point out that both images are blurry, especially that they are posted in their original sizes, then yes, that is what’s wrong with these images. I had to export them as transparent PNGs so that the logos can sit on top of a patterned background without any “invisible outlines” all around the image unlike how it was when we used the GIF format for our transparent images. The PNG format has been a lifesaver for us transparent image fans, as they look very sharp and crisp when displayed on our websites.

However, this is not the same if you upload these transparent PNG images on a WordPress- powered sites. For several months, probably years (I lost count), I have been completely stumped as to why WordPress blurs these images on purpose. I looked through several articles from various WordPress-specific blogs and sites regarding the blurring issue, and so far, this article from The Theme Foundry has given me the answers I’ve been looking for.

Based on that article, the reasons in my case would have to be one of these two or both:

1. Responsive Web Design – I have been going crazy about RWD/responsive web design for all of my sites for years now, as I want all my sites to be easily accessible on mobile devices without giving headaches to the users who come by and visit them. The consequence of applying RWD media queries into your base markup is that when everything shrinks, your images shrink too. And when your images shrink, they also lose their quality. A smaller version of your image may not be as sharp as your original, and vice versa. Most likely, this would be the #1 reason for me.
2. Media Library Settings built in WordPress – I admit that it can be a total pain if I have to edit and re-edit some original (royalty-free) images that I needed to use for my blog entries in Photoshop, meaning I have to switch back and forth between the browser and Photoshop at the same time. That’s why I rely on WordPress’s built-in media library settings for each image I upload and use it to shrink or enlarge the original images as I see fit. Same result as #1.

Because of these two reasons above, this has become very problematic for me when I use image logos on my sites. I had to look for a better solution for me to use my logos to rule over my websites and brands. There was one solution that I can think of, which was something I’ve already heard and read about, but quite unfamiliar with.

Scalable Vector Graphics (SVGs)

If you are a (hobbyist) web designer or graphic designer, then you should be at least familiar with scalable vector graphics (SVGs). If not, here’s a Wikipedia article about it.

In a nutshell, SVGs are an XML-based image file format specifically for vector images. As you know, vector images are always two-dimensional, colors completely solid (none of that fancy gradient stuff that you normally see on Photoshop), and its original high-quality retains when you resize them big or small. Remember the old (and annoyingly ugly) Flash days? ³

SVGs exist to support web interactivity and flawless animations on the web. They’re not just an image file format, but because they are XML-based, each SVG image also has their own base code/scripting for developers who prefer to use their code instead of uploading the image itself to their sites and apps.

Exporting all my logos into SVG format was the best solution for me to overcome the blurring. There are a few problems though that I faced when I attempted to do this, and this stretches back some 10-ish years ago too:

1. Some -10 years ago, Adobe Photoshop did not support SVG file formats. Well, that was -10 years ago. Now, they are supported and that you can export all your flat-colored images in SVG format. Multicolored, multi-filtered JPEG-style images will not work on SVG format.
2. Some +10 years ago, Adobe Illustrator did not support SVG file formats. In fact, I didn’t even know what an SVG file format was until I took that web interactivity course back in college. In the later years, I got lazy with Illustrator and strictly focused on Photoshop because I knew I was better at it. Thank goodness I got my vector illustrator groove back today.
3. Even until today, WordPress does not support SVG file formats. Another annoying part of WordPress when it comes to graphics. SVGs are perfect for responsive websites, most especially with logos, and yet, WordPress still does not support them.

The third item will be the next topic I’m going to talk about next.

SVGs and WordPress

The reason why WordPress, even up till today, doesn’t support SVG file formats in their Media Library feature is summed up by this very comprehensive article by Norwegian WordPress developer Bjorn Johansen.

According to the article, because SVGs have their own code base/scripting along with just the vector image, there are bound to have various security vulnerabilities with your website through the SVGs. If malicious hackers can’t get through your admin dashboard because you’ve got awesome security plugins like Wordfence, they can easily (maybe?) get through to your site’s core code base through your SVGs. Ouch. 😵

I was having a frown on my face as I read through the article until I reached the last paragraph. A specialized WordPress plugin called Safe SVG is a recommended plugin to provide SVG media upload support in my WordPress-powered sites. But there’s more to just providing SVG file support. The plugin also sanitizes each of our SVGs we upload so that it gets cleaned from all these security vulnerabilities it exposes. Not only that we get to use SVGs, but our SVGs and our sites also get another level of protection against malicious attacks. Whew. 😓

Thanks to this plugin, I can now display to you both of my logos in its SVG glory!

… but this is the better SVG! I even replaced the old PNG with the SVG on the top header of the site too!

I changed all my vector-based logos on all of my sites to SVG thanks to the Safe SVG plugin. And as for my other sites that have only text-based logos, I can finally create original SVG logos for them without frowning of their blurriness. Now, I can finally breathe.

And because of this, I am now inspired to create original logos for everyone who may need a high-quality logo on their blogs and sites, especially with WordPress. For WordPress users, your only requirement is to have the Safe SVG plugin installed. Then, you can upload your SVG logos like any other image and use and resize them like any other image.

Okay, “JINeous,” how do you use/add an SVG image on a website that’s NOT powered by WordPress?

There are several tutorials to do this. Here are a few you may want to check out:

• SVG on the Web (You may want to read this first to be more familiar with SVG)
• CSS-Tricks – Using SVG
• MDN – Adding vector graphics to the web
• SitePoint – How to add scalable vector graphics (SVG) to your web page

If you are a happy digital artist who loves to create vector-based art, feel free to create and display to your glory! But be sure to use any one of the following programs to create them:

• Adobe Illustrator
• Adobe Photoshop (solid colors ONLY! Can’t use gradient and all those other fancy filters and effects)
• Adobe Animate CC (formerly the old days of Flash… if you want animations, this is an awesome program!)
• Inkscape (free!)
• Gravit Designer (free!)
• Affinity Designer (originally for Mac, it’s now available for Windows. Only $49.99 one-time payment.)

Colorlib. also has a list of other programs that you can check out if you prefer not to use any one I mentioned on the above list.

Happy digital drawing! Happy logo making! 😄