LiveCode Lessons (copy)LiveCode ReleasesLiveCode 8ArticlesGetting 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 flipped checkbox so that the icon displays correctly.

 

Flip it

10 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.

Sphere

Nice, but how to do this with Inkscape, The data seems different, do i first to base64decode it? this is what is in the xml from Inkscape and when i import it base64decode or not i get an error: executing at 6:29:16 PM
LCB Error Unable to parse path data: "Path must begin with moveto command" at position 1
Object SVG Icon
LCB File svgpath.lcb
LCB Line 378
the image data in inkscape from an svg is: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAYAAACqNX6+AAAAAXNSR0IArs4c6QAAAARnQU1BAACx jwv8YQUAAAAJcEhZcwAAG64AABuuAYxdc/gAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAu OWwzfk4AAALFSURBVHhe7Zs9aBRBGIbPqGDjHwiCCP4Vkk6LYKWkUOyEKOIPiJVgIYKlgl4hYmUn 2IimEjwkt7N7RLDwmpDbmdsYTc6d2RMNVhYp1IgaNeb89vyMd5dRUtxNinsfeG/vdt/dYl5m5ht2 LgMAAAB0G35kNoly9ZCvzJlU6XdRer2ZLwNXBNGrw0Kap0LqnxRErVl6no4hHY+xHXSKwsTbjaJs Hi0OwS4K7V6tVuvh20E7GX5R3epLY2wN/z+JUF/hR4B2Qo17wpd6rrXBl6CZ4bC6jh8D2kkgkwGa G742NrhQ+gv1nE+N51olVHyUHwHaTVDW/RTCR5rQp2mOOJ7L5VZms9kerxSfpB5kmeRNLVDJZb4d dIK8rOx5PK63888FKKjntkCEMtfZAlwRRbXVFMg7WyA01J1jG3CFL+MbtjBoWPssShNYLLpEhPEp mlPSBaEtkKtsAy7wVHKQqqxvtjDo/JNisbiKraDTiNDsoMrqvT0MXfJG9Fq2AhdQoxesYShTyY9P bWAbcMFQabLXEkS6UJwtjCW9bAOu8MP4ki2QQJk7bAEuoZ5w0xaIJ+MBtgCXUOP3BeXkQqsKY2+2 sQWALseTLw9QpXXXD3UQqOTW0MjkLr4EXONJfX7R6lyaGa+c7GMLcAUt+LZQGLNNYfxVhW3AFULG Zy1BLKigkp1sBS6geeOiLYg/8lR1L1uBC0Q5TvdiWcOgoew73qE7Jn1tS73k2T8Cuc024JJ0W5BQ ZrQhiHkv1IP3i1Nr2AKWA0/p3UGU7E8rLz4FAABgGaDK5bSv9MNAGh9yJ6GSvB/G15peOaebkhvL R8i9hNKj9d369LGCysYPNhPkVvmS7s+kW2Wopv9hM0BuRWX8kd9DloyX/EcYqDOiUWo6F0Xr64Gk 22bo5IN062WrEeq09ByFoeh7Xz0MAAAAAAAAAADdTCbzC0a/fRTOechTAAAAAElFTkSuQmCC

is it not working becasue the original was an PNG and saved and re-opened as SVG ?
Thanks.

Elanor Buchanan

Hi Sphere

When you base64Decode that data it looks like it is still PNG data rather than an SVG path. This post suggests using the tracing option in Inkscape.

https://stackoverflow.com/questions/22216376/inkscape-not-fully-converting-png-into-svg

I hope that helps.

Kind regards,

Elanor

Jimmy

No, this does not work. Copied compound path in illustrator, nothing on clipboard.

Elanor Buchanan

Hi Jimmy

I just did a quick test here and it seems to depend on the app you paste into. A plain text TextEdit document or Sublime Text worked for me. You could also Save As an SVG file from Illustrator, open the SVG file in a text editor and get the path data from there.

I hope that helps.

Elanor

Trevix

More often then not, when I paste the SVG data the icon becomes filled up.
For example a square that in illustrator has a black border and is transparent inside, in LC becomes all filled up with black.
Is there a way to avoid this?

Elanor Buchanan

Hi Trevix

Could you post an example path or send it to [email protected] so we can take a look.

Thanks

Elanor

trevix

I also sent an email with the Ai file.
The path is an open path of a small hand:

M25.5,42.7h-4.4c-1.3,0-3.3-0.5-5.3-1.5c-2-1-4.1-2.4-5.7-4.2l-4.4-4.8l-4.4-4.8c-0.4-0.4-0.8-1-0.9-1.7
s0.1-1.6,0.9-2.4c0.9-0.8,1.8-1.1,2.6-1.2s1.5,0.1,1.8,0.2l2.9,2.2l2.9,2.2L11.7,15l0.2-11.7c0-0.4,0.1-1.2,0.5-1.8
c0.5-0.6,1.3-1.1,2.9-1.1s2.5,0.5,3,1.1C18.9,2.1,19,2.8,19,3.3v8v8c0-1.1,0.1-2.5,0.5-3.6c0.4-1.2,1.3-2,2.8-2
c1.5,0,2.5,0.7,3.1,1.5c0.6,0.8,0.8,1.8,0.8,2.5c0.1-0.3,0.4-0.9,1-1.4c0.6-0.5,1.5-0.8,2.7-0.8c1.6,0,2.5,0.6,3,1.2
c0.5,0.6,0.6,1.4,0.6,1.7v0.5v0.5c0.2-0.3,0.4-0.8,0.9-1.2s1.3-0.7,2.7-0.7c1.5,0,2.3,0.4,2.8,0.9s0.6,1.2,0.6,1.6v6.2v6.2
c0,1.8-1.1,4.4-2.9,6.6S33,42.7,30,42.7l-3.9-0.1

Elanor Buchanan

Hi Trevix

The SVG widget only supports filled paths. You can export an outline path from Adobe Illustrator by choosing

Object > Path > Outline Stroke

Then using Edit > Copy and pasting to the clipboard as in the lesson.

The path that is exported can be used in the SVG widget and appears as an outline.

Kind regards

Elanor

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.