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
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.
Object > Compound Path > Make
Use the Object > Compound Path > Make menu option to convert the shape to a compound path.
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.
Get the d="..." data
Paste the clipboard into a text editing application. Then copy the d="" value.
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.
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.
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