How can I change letters in a SVG from transparent to white?

Question

I'm trying to create a composition to use as a featured image for my upcoming blog post comparing the three major Infrastructore as a Service (IaaS) cloud providers: Amazon Web Services (AWS), Google Compute Platform (GCP), and Microsoft Azure. You can see a rough draft below:

The Azure logo and pre-existing white version of the AWS logo show up fine. However, the lettering on the GCP logo SVG is transparent, and were not visible on that background. I need to turn the text white while maintaining the transparent background. I tried using the magic wand and paint bucket in Photoshop to accomplish this, but as you can see, that resulted in very rough edges.

I suspect I'll need to use Illustrator to modify the SVG, but I've never used it before, and I have no idea where to begin.

Any pointers?

Answer 1

When I tried to open the file in Illustrator I got the following error message:

I have no idea what that means but I know it means Illustrator cannot open this file properly. It seems as if the text vanishes completely...

But guess what can open this file? The free and open source Inkscape! (This sort of scenario is also known as 'Adobe Fail')

So after opening the file (without issue) in Inkscape, go to Object > Objects and tear off the panel if it's docked... This makes it easier to see what's going on.

Click on 'Google' and note which group has been highlighted in the Objects Panel (it's g4033):

Inside of that group: two more groups, inside of those groups is what we're after... These are labeled 'use4029' and 'path4025'. Activate both of these objects by clicking and Ctrl+clicking on them in the Objects Panel:

At the bottom of the UI choose white (if that's what you want)...

Now we just need to make the text fully opaque. To do this activate object 'g4033' in the Objects Panel and then (at bottom-left of the UI) increase the opacity to 100%.

Finally just save out and you're done. Final result:

Answer 2

Photoshop Answer: If you're loading an SVG into Photoshop it's important to know that the graphic will be converted into a bitmap file (SVG's are vector files). If it's imperative that the file remain vector you will need to go to the illustrator answer.

In Photoshop I would just take the marquee tool and copy the text onto a new layer and color overlay the text with white. Then group the layers and export.

Illustrator Answer: Since you are new to Illustrator I'll try to keep this as simple as possible, fortunately this is an easy fix. Open the SVG in Illustrator and use the selection tool (keyboard shortcut = v) to draw a box around and select the text you'd like to change. The paths around the text should be visible to show it's selected. If you're unable to select the text the layer may be locked. To unlock a layer simply click the lock next to the layer in the layers panel (window>layers).

Next, with the text selected, go to the bottom left with the two color selection boxes (in Photoshop they are foreground/background but in Illustrator they are fill/stroke) and double click the fill box and change the color to white.

Hope this helps! (Illustrator is definitely worth learning if you're interested.)

Answer 3

A quick raster image solution would be printscreen, invert, increase contrast and then either use that as a mask or as an additive layer. Not the best way to handle vector logos, but good for mockups.