LiveCode LessonsLiveCode 8 ArticlesGetting SVG path data for SVG Icon extension

Getting SVG path data for SVG Icon extension

This article will show you how to get the appropriate SVG path data for a vector shape created in Adobe Illustrator.

Open or create your shape in Adobe Illustrator

Open or create your shape in Adobe Illustrator

Make sure it is a compound path

When you select the shape Illustrator will tell you if it is a compound path. In this example, the shape is a Group. We need to convert this to a compound path first.

Make sure it is a compound path

Object > Compound Path > Make

Use the Object > Compound Path > Make menu option to convert the shape to a compound path.

Object > Compound Path > Make

The shape is now a compound path.

Copy to clipboard

Now use Edit > Copy to copy the shape to the clipboard. Illustrator will copy the SVG data.

Copy to clipboard

Get the d="..." data

Paste the clipboard into a text editing application. Then copy the d="" value.

Get the d="..." data

Paste into iconPath field

In the SVG Icon inspector paste the path info into the iconPath property and press Enter. Your icon will then appear.

Paste into iconPath field

Flip it

The SVG path data from Font Awesome needs to be flipped in order to be displayed correctly. The path data from Adobe Illustrator does not. Uncheck the flipVertically* checkbox so that the icon displays correctly.

 

* While writing this I realized that the icon is being flipped on the horizontal plane and not the vertical so the property name is not correct.

Flip it

2 Comments

Devin

Great tutorial, Trevor.

You mention in the tutorial that SVG path data from Font Awesome needs to be flipped to be displayed correctly. I’m curious, how do you get the SVG path data from a Font Awesome character?

Trevor DeVore

If you download Font Awesome from http://fortawesome.github.io/Font-Awesome/ you will find a fontawesome-webfont.svg file in the "fonts" folder in the distribution. That has the SVG paths for all of the fonts.

Add your comment

E-Mail me when someone replies to this comment