BYU Home pageBRIGHAM YOUNG UNIVERSITY
  Office of Digital Humanities
Back     BYU LiveCode Lessons Gateway

LiveCode 8: Using Scalable Vector Graphics

LiveCode version 8 for the first time introduces support for Scalable Vector Graphics, or SVG. As of LiveCode v. 8, support for SVG graphics is limited to fairly simple, single-color vector paths.

LiveCode tools palette with SVG Icon widget highlighted

The SVG Icon Widget

SVG support is realized primarily through the SVG Icon widget. If you drag an SVG Icon widget to your card it will display a star shape by default.

Vector paths from the Font Awesome icon set are built in to this widget. You can select any icon from the set by opening the property inspector for the SVG Icon widget and clicking on the icon shape to open a scrolling selector that shows all of the available Font Awesome shapes.


svgwidget_inspector

Property Inspecor for SVG Icon Widget

This is a simple if somewhat unwieldy way (because of the large number of shapes to choose from) of switching between icon shapes. But notice that the property inspector also shows the actual path description of the shape, in the field labeled Path Data. That means you can paste any properly formed SVG path into this property field and it will show the shape that is described by that path.


It's relatively easy to extract path information from an SVG file. Since SVG is a special type of XML file, that means that an SVG file is just plain text. If you open up an SVG file in a text editor you'll see a <path> tag, and within the tag an attribute that begins d=. This is the vector path description.

Here's a simple SVG file describing a pentagram. I have highlighted the path tag:

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE svg>
 <svg xmlns="http://www.w3.org/2000/svg"
      width="304" height="290">
   <path d="M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z" 
 	style="fill:#FB2;stroke:#BBB;stroke-width:15;stroke-linejoin:round"/>
</svg>

To display this path in a LiveCode SVG widget, copy the string within the quotes after the d= attribute; i.e.:

M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z

Paste this path description into the iconPath field in the SVG widget's property inspector, tab out of the iconPath field, and like magic, the vector shape will appear in the widget.

It's true that this method of importing SVG path shapes is somewhat cumbersome. It is anticipated that there will eventually be a much more user friendly way of doing it. In the meantime, enjoy the ability to use SVG vector shapes in your stack.


Back     BYU LiveCode Lessons Gateway
Maintained by Devin Asay.
Copyright © 2005 Brigham Young University.
This page last updated on January 17, 2017 10:41:45.