Using SVG Graphics In Pages and Keynote

SVG images have been around for a while and are widely used on websites and in clipart collections. But you cannot import an SVG file into Pages or Keynote directly, without first converting it using professional software. But since Safari handles SVG images without a problem, and you can export as a PDF from Safari, you can use Safari to convert the image to a format that can then be used inside Pages and Keynote documents.


Video Transcript CLICK TO EXPAND
So a popular format for graphics today is SVG. That stands for scalable vector graphics. SVG has been around for awhile and it's widely adopted on the web. All web browsers can display SVG. They are really compact, great little files. They are basically vector graphics so there can be a lot of nice curves and lines and things like that without taking up a lot of space in terms of file size. Easy to download. I've noticed recently that a lot of clipart sites are actually providing SVG graphics for you to download.

The thing is that you can't use SVG's inside of Pages. I've got a file here that's the logo for my WP Tips & Hacks website. It's an SVG graphic. Mac OS actually supports it quite nicely. If I hit the spacebar to bring up QuickLook you can see it shows me the graphic and it actually expands to fill the space. You can see I have nice curves and lines in there. That's something because if I get info on this you can see it's 6K in size. It's a tiny file. So it's definitely just describing the curves. It's not a bit map in there.

But if I try to open this up in Pages it's not going to work. So, here I am in Pages and if I drag and drop it in, it's going to tell me that it's not supported. So that's a shame especially if you have a collection of SCG's and you want to use them inside of Pages as graphics. So how do you convert?

Well, you can go and Control click and see what Apps open this. Now, of course, I have Adobe Illustrator, a professional illustration app and it will open SVG's very nicely. But not everybody has that. Right. That costs a lot of money to have that. There are other apps that say they open it but a lot of times it doesn't work. Like for instance Acorn says it opens it but in fact what I get is something that looks like this. It's a ruined graphic. So it's clearly not compatible with SVG completely.

You'd think maybe in Preview. But Preview isn't even an option here. If I were to run Preview, there it is in the Dock now, I can go and drag and drop onto it. I can't even drag and drop onto it. I can't open it at all in Preview. So Preview doesn't even handle it which is amazing because Preview seems to handle just about everything. So how do you convert a SVG files so you can use it in Pages or Keynote without having to buy software like Adobe Illustrator.

Well, there's a little trick to it. Remember I said that this works really well on the web. All web browsers really handle SVG's great and have for years. So if I were to open this in Safari, it will open as a full screen graphic because it's not embedded inside any page. I'm just opening it by itself. This is the SVG thing. So it's opening it up in a very large size. So there's my graphic. Now, since I'm in Safari, I can export as a PDF. Or I can Print and then save as a PDF. So I'm going to export it as a PDF to the desktop. I'm going to give it a name with dot PDF. I'll save it and now I close the Safari window here.

Here's the PDF. This I can open up in QuickLook as well. Since it's a PDF I can double click on it and it will open up in Preview. I don't like how it's not centered anymore because it's kind of printed it as a page. So it has a lot of extra white space there. But that's okay. I'm going to go into Pages now and I'm going to drag the PDF in. You can see now it definitely is creating a lot of extra space here. You can see the edge of the graphic. But there is the SVG, converted to a PDF, using Safari. You can see it's nice in vector. You can see how nice it scales to any size I want.

One problem is it's not transparent. So if I create a shape here it's in front of it. If I were to move it behind you can see that the rectangle here has white in it. But I can go to Format, Image, and then Instant Alpha. Then select white as the background color. Now I've got a good substitute there. So it's not perfect and it depends on what you've got going on in terms of colors in the graphic. You can kind of create a little bit of transparency so you can have text wrap around it and things like that.

So that's how you can get SVG graphics into Pages and Keynote without having to use any special software or purchase anything.

Related Posts:
Customizing Shapes in Pages, Numbers and Keynote, Populating a Keynote Presentation From a Numbers Spreadsheet Using JavaScript, Automating Complicated Text Inserts, New Shapes in Pages, Numbers and Keynote