[Axure Tutorial] Use SVGs in Axure with Custom Shapes

svg to custom shapes in Axure

In their last major update, Axure quietly introduced a phenomenal new feature giving Axure users the ability to use SVGs in a robust way directly in Axure.  Use this quick tutorial to find out how to incorporate SVGs into your next Axure project.

First you’ll need an SVG file.  There are many great sites to find svg icons, such as Flaticon.com.  Or you can create your own SVG in a program like Adobe Illustrator.  The icon needs to be simple however.  Axure still can’t support complex SVG that have multiple colors.  I tested some logo SVG’s, and was unable to get an editable shape.

Once you have an SVG, drag it onto your canvas.

Then select the SVG and right click.  You should get a menu that looks like the image below.
convert svg to shapes in axure

If you have an SVG that is editable in Axure, you will see the option to “Convert SVG to Shapes”.  If your SVG is too complex however, that option will be greyed out.

Once you select this option the SVG will be converted into an Axure shape, and you will be able to customize the shape in all of the ways Axure shapes can normally be customized: colors, gradients, backgrounds, shadowing, stroke, and even changing the points and paths to create new shapes.

Voila!  Edit SVG’s directly in Axure.  What could be better?