Decimals: This is the level of precision.Image location: Embed – If you are including bitmap images (probably not), they will be included in the file, rather than linked to separate files.Type: Convert to outline – This makes sure that any text used is converted to shapes.Illustrator SVG Export Settingsįor the best compatibility, use the following settings You can always change this by opening up the SVG file in a text editor and changing the width and height at the top. Double click your vector, and it should adjust the artboard to fitĪlthough it’s a vector, you may want to keep the size of the SVG at the initial default size it is displayed on the site.

Select Objects -> Artboards -> Fit Artboard to Boundsįor those of you still on CS3, you’re in luck.Select everything that should be included in the SVG.This is not typically something that matters when dealing with vector source files, but when SVGs are used on the web, they are linked to just like an image, and the extra white space will be displayed.īesides changing the size of your artboard and manually scaling your vector elements, there is a quick way to crop the artboard in Illustrator CS6: This is a common mistake that I’ve noticed in the last few SVGs provided to me from different designers. When exporting your SVG from Illustrator, it’s important to note that the “artboard” canvas around your vector should be cropped, so that there isn’t any extra white space. You want to support iOS devices with a retina display.You’re creating a responsive website, or.You’ll probably want to use some SVGs if: For IE8 and below, you can provide a fallback PNG. Simple icons and logos are good candidates for the format, as they are often the first noticeable elements of a design that will look blurry on a retina display. Not only are they crisp at any size they are scaled to, but they are supported by IE9+, Firefox, Chrome, and Safari. Well done on successfully cropping an image to a shape in Illustrator! We hope that this tutorial has been helpful and if you enjoyed it, be sure to have a look at our other tutorials.The SVG (Scalable Vector Graphic) file-format is an XML-based vector in that can be used on the web right now. If you need to modify or adjust the shape, just select it using the Selection tool (V) or Direct Selection tool (A). Now, you can adjust the image without affecting the shape. Then, go to Object > Clipping Mask > Edit Contents. To edit the clipped image first select the Clipping mask. Step 3 - Edit the Clipping Mask if Needed Only the area of the image that was inside of the triangle will now be visible. Then, go to Object > Clipping Mask (Command/Control + 7). You can also select by clicking and dragging over them to make the selection. Select both the image and shape by clicking on them while holding the Shift key. Step 2 - Crop to the Shape Using a Clipping Mask Resize the shape and position it so that it covers the area of the image you want to show. In our case, we will be cropping an image into a triangle in Adobe Illustrator, but you can use any shape you like. Make sure to place it on top of the image. Next, create the shape you want to use to crop your image.

Start by importing your image into Illustrator. We need to create our shape before we can use it to crop out the image. We will use a stack of pebbles photos, but there are tons of great stock photos available on Design Bundles. This is a useful feature that can be used across various crafts such as t-shirts or creating custom shaped logos.

We will do this using Clipping Masks, a non-destructive method that can be easily undone if needed. Today we will learn how to crop an image to a shape in Illustrator.

Illustrator crop canvas