An Adventure in Vector Extraction


Early in my design career, before my formal education, I didn’t really understand the differences between many file formats. The concept of vector versus raster was not apparent to me. I still remind myself of the time that a logo I needed was in a pdf and the only way I could figure out how to get it was to zoom in and take a screen shot. While that worked at that particular moment, it was definitely not the best route to take.

Then one day I got more curious about this ubiquitous pdf file format and I wanted to see what would happen when I opened it in different applications. Lo and behold, I had a revelation when Illustrator opened my sample pdf and allowed me to manipulate every aspect of the original file. The layers tend to be fairly cumbersome as the pdf format doesn’t seem to maintain the original file’s layer structure, but it’s a sacrifice I’m willing to tolerate.

I have since found a couple different methods that I’ve come to rely on when searching for vector art, logos in particular.
I usually start by searching Brands Of The World for the logo in question as they tend to have a lot of logos that are often provided by the company it was designed for. Brands Of The World is adamant about warning you that the logo files are not clipart and should only be used for legitimate purposes. I echo this sentiment.

My next recourse is Google. I’ve been pleasantly surprised at how easy it is to find specific filetypes using Google’s ‘filetype:’ operator. You simply do a Google search for pdf files in the hopes that they’ve used the image in the layout. I find annual reports to be easily found and generally very useful for larger corporation’s imagery. There are also lots of smaller organizations that create online pdfs for viewing. Even when sitemaps don’t point to any available pdf files, Google can still locate them by enhancing your search again with a ’site:’ operator. I’ve found lots of fairly obscure vector art via this method, which I can then extract, intact, and use in my current project or save for a later time. You will find the occasional pdf that is password protected or requires a password to print or extract images.
I suppose it would be unethical of me to explain how you can open up certain secure pdfs with ColorSync and resave them as pdfs, removing any existing security, so forgive me if I refrain from mentioning that.

There’s another vector based application that is quite prevalent in todays online world. Flash. I used to use Flash more regularly but, my main focus now-a-days is print and I don’t really have much need for most of Flash’s abilities (although I have used it’s Trace feature for outlining raster images as it generally gave me much more detailed results than Illustrator, but maybe this will change now that Macromedia has been absorbed by Adobe). But, the main reason I mention Flash is the ability it grants the informed designer to gain access to vector art from the swf files. This doesn’t take some shady-reverse-engineering-hacker-warez to accomplish, either. All you need for the following example is Safari (with the Flash Player plug-in installed) and Illustrator.

In order to give a fairly worst-case-scenario, just to show some of the obstacles you may encounter, I’m going to demonstrate how I got the vector art for the new Beatles album “LOVE”. I With the recent news that Apple, Inc. and Apple Corps. kissing and making up, I found myself browsing numerous related sites in the hopes of stumbling across any more details that might clue me in to upcoming announcements. Well, while I didn’t find anything out that wasn’t already common knowledge, I did end up at Beatles.com. It’s a fairly sparse site, but the Flash animation playing piqued my interest and so I set about seeing what I might be able to get out of my journey, I had, after all, invested numerous minutes of my employers payroll investigating completely unrelated news, I couldn’t very well leave empty handed, could I?

The first thing I always check when dealing with Flash files online is what options the creator has allowed the casual user to have. What happens when you right-click it? Are there any options other than “Settings” or “About FlashPlayer”? If there is the “Print” option then you’re in luck (See last paragraph if you can Print from Flash). As I said earlier, this is more of a worst-case-scenario so I’m going to assume you can’t print directly from the Flash Player. My next step is to figure out how to extract the swf file from the web page in question. In this particular example, Beatles.com doesn’t even allow you to right-clickWarning the page to “View Source” or access “View Source” from the “View” menu! Luckily for me, I’ve also familiarized myself with Safari’s “Activity” (Window>Activity or alt+cmd+A). This little window can be a scavenger’s god-send. Whether you want to see just what your browser is downloading when you visit sites, or you want to manually grab a YouTube video without an additional client, or, as in this demonstration, you need files that you can’t gain access to otherwise. Once I had the Activity window open, it was easy for me to see which file it was I needed to download.Acitivity Window Another convenient feature of the Activity window is that once you’ve found the file you want all you have to do is Alt+double-click it to have Safari automatically download it to your desktop. Now, even though the web-designer behind Beatles.com didn’t give me any options within the FlashPlayer and wouldn’t even let me right click to “View Source”, I have the swf file sitting on my desktop, awaiting my next move.

Illustrator refused to open the file and even though I have plug-ins for QuickTime that allow it play swf files, this particular file would not play for some undetermined reason. My next attempt was to throw it back into Safari and see what options I had when the file was accessed from my local machine instead of embedded in an external site. This proved to be a fortuitous move as I was allowed to do everything you normally can to a non-protected swf file.

Finally, the easy part! When the movie has started and the art in question is plainly visible on the screen, I right-click to zoom in and verify that the artwork contained is in fact vector. After determining that it in fact is vector, I merely select “Print” from the Flash Player context menu and choose the über-handy “Adobe PDF” option when prompted for my Printer Selection. My desktop has both the original swf file, and now the new pdf document that I drag onto Illustrator and Voila! Presto! I can see all of the elements used for this particular logo. If you have followed all of my rambling steps and actually made it to this point, you may very well find something that even surprised me. After poking around this image, I realized that there were a number of layers hidden under other layers that contained unseen or unused design elements.

All examples contained here within are for demonstration purposes only. You must be certain you have the proper permissions before using any graphics that may be copyrighted.

  • Share/Save/Bookmark

Information and Links

Join the fray by commenting, tracking what others have to say, or linking to it from your blog.


Other Posts
Two Must-Have Plug-ins for Apple’s Mail App
Getting Large Files to Clients

Write a Comment

Take a moment to comment and tell us what you think. Some basic HTML is allowed for formatting.

Reader Comments

This is unbelievable! Such a great trick! Thanks. Just for you to know it works better for me saving the swf in the print dialog as PDF as Postscript. This is the only way I can get vector files, otherwise the PDF file opens up as a raster image.

Hi
Trying to download vector .swf files from a website. Bur they just rasterise. I’m on a intel mac. Abobe does not sseem to be able to handle it. Any suggestions - I tried the above with no luck.

Eoin

Eoin,
I would have to see the specific file in question. Some Flash files actually contain raster images. Karen, above, pointed out that her method works better for her, so without knowing the exact file, the best I can offer is trying to attack it from a different angle in the hopes of finding better results.
Please keep me posted on your findings!

Shawn