Vector Graphics in Google Drive
I am a big fan of Google Drive, but I have been frustrated lately when trying to do something that seems so simple - insert a vector graphic into Google Slides, Docs, etc. It would be so nice to just download an SVG file from something like flaticon.com and paste it into Google Slides. Alas, that’s not possible, and as I found out, it’s actually quite complicated to do. Never fear. In the following post, I have outlined the steps, which will get you using vector graphics like a pro!
Vector Graphics
First off - What’s so special about vector graphics? Why go through the trouble? After all, it’s a lot easier to just copy and paste a typical image (e.g. .jpg, .png, etc.) into a Google document.
Vector graphics (e.g. .svg, .emf, etc.) are a lot more flexible than standard, raster graphics (e.g. .jpg, .png, etc.). Unlike raster graphics, you can resize vector graphics without worrying about pixelation/blurriness, which is of particular concern when dealing with low-resolution raster graphics (low PPI). In addition, unlike raster graphics, you can recolor vector graphics to match the style of your presentation or doc.
Step-by-step Instructions
Quick Guide
If you know what you are doing, here are the quick steps. If this sounds like a foreign language, please skip to the next section.
In Adobe Illustrator, either create your own drawing or open a .svg downloaded from flaticon.com, fontawesome.com, etc.
In Illustrator, select File > Export > Export As… > Enhanced Metafile (emf).
Download Gdrive Uploader, and edit the config.js file accordingly.
Run
node upload.js.In Google Drive, right-click the .emf file, and select Open with > Google Drawings.
Within Drawings, "Ungroup" as necessary, select the graphic, and copy & paste it into the destination document (e.g. Google Slides, Docs, etc.)
Change the fill color as desired.
Create or Download Your Graphic
For a simple approach, flaticon.com and fontawesome.com have fantastic icons and many of them are free (with attribution of course). Just be sure to download the graphic as an SVG.
For a more advanced approach, create your graphic in a tool like Adobe Illustrator.
Decide How You Want to Upload Your Graphic
In order to work with a vector graphic in Google Drive, you’ll need to save the file in an EMF format. In addition, you’ll need to specify that the .emf file is of a type that Google Drawings can use. Saving a file as or converting a file to a .emf isn’t too complicated. However, specifying that your graphic is of a type that Google Drawings can use is tricky. Basically, you have two options: 1) Use CloudConvert for a simple but less secure approach, or 2) Use Gdrive Uploader for an advanced but more secure approach. If you choose to use CloudConvert to upload your graphic, log into with CloudConvert with your Google account before proceeding.
Convert the File to a Google-friendly Format (.emf)
For a simple approach, go to cloudconvert.com, click Select File > From my Computer, and select your .svg file. Note that by doing so, you are granting CloudConvert the ability to read your file. If you are OK with that, click the “Convert to“ dropdown, and select Vector > EMF. If you have decided to grant CloudConvert access to your Google Drive, check the “Save output files to Google Drive“ box. Otherwise, just download the file to your local device.
If you are using Adobe Illustrator, from the main menu, select File > Export > Export As…, and from the “Format:” dropdown, select Enhanced Metafile (emf).
Upload Your EMF
In the previous step, if you selected the “Save output files to Google Drive“ box via CloudConvert, you can skip this step. Otherwise, you will not only need to upload your EMF file, but you will also need to set its MIME type to “application/x-msmetafile“. To do so, use Gdrive Uploader.
Copy the Graphic with Google Drawings
Once your EMF file is in Google Drive with the correct MIME type, right-click it, and select Open with > Google Drawings. Within Drawings, “Ungroup” the graphic as necessary. Then, select the graphic, copy it, and paste it into the destination document (e.g. Google Slides, Docs, etc.).
How to Recolor
Now that you have your graphic within your document, you can resize it without pixelation/blurriness. More importantly, you can recolor the graphic using “Fill color”.
