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?

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.

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.

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

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

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

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?

Hi Trevix

Could you post an example path or send it to support@livecode.com so we can take a look.

Thanks

Elanor

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

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