Jump to content
Software FX Community

Creating Custom SVGs for PowerGadgets


Recommended Posts

One request we get a lot is the procedure to create a custom SVG for PowerGadgets. The library that's included with PowerGadgets is extensive and will probably cover most user's needs but it's nice to be able to take advantage of the inherent extensibility of PowerGadgets by creating custom SVGs. It's also pretty easy to do as well. Please note that you aren't limited to creating geographical maps. I've seen very cool implementations of custom diagrams of a client's network. You can create a gadget from anything you can diagram.

The tool of choice to create your SVGs is Adobe Illustrator CS (2/3). Illustrator is nice because it gives you a graphical interface and tools and will save the file in SVG format. This is important because the paradigm of a drawing application allows you to create graphical SVGs more intuitively than a text editor. We'll go over the options you'll need to set when you save your SVG later in this post. For now we'll go over the basics of a PowerGadgets-compatible SVG.

The most important thing to remember is that any shape you want to be able to access via code will need to be grouped with a text object. In other words if you draw a square that you want to color programmatically, said square will need a text object grouped to it, e.g. 'My Square'. In its simplest form, a group contains the path that defines the object and a text object that holds the name of that path. To group objects in Adobe Illustrator, using the black pointer, press and hold the Shift key while selecting the desired objects. Once the objects are selected, click Object-Group on the menu (Ctrl + G).

There are instances when the object you are calling contains more than one path. In this case, the grouping of the paths must be slightly different. First, you must select all the paths that form the object and group them together. After the paths are grouped, select both this group and the text object, and make a group of this selection. This will result in a group of paths that is then grouped with the text object. This will allow for PowerGadgets to treat a group of paths as one object.

It's also important to point out that your illustration should be created with either the rectangle tool (for rectangular objects) or using the pen tool and clicking 'point to point' for freeform shapes. Bezier curves and circles are not supported by PowerGadgets at this time. You can easily simulate curves and circles by using smaller increments between your points.

You can also create multilevel maps where one map contains multiple levels of grouped objects. For example, you can have a map that contains the County, State and Regional subdivisions. This is done by simply selecting a set of individually grouped text/shape pairs, grouping them to create one object, then grouping that 'super shape' with another text object. This can be done for as many levels as you choose.

Any static shapes, e.g. presentational artwork that isn't meant to be accessed programmatically, should be left ungrouped. PowerGadgets assumes that any object grouped should be accessible for dynamic, data related changes, and thus should have a name associated with it.

Tip: The Adobe Illustrator Layers palette allows you to see all grouping levels on your map. This will allow you to make sure all objects are properly grouped before exporting. Remember, all dynamic objects must be grouped with a text while all static objects must remain ungrouped.

Posted Image 

The final (and very important) step before you save your SVG is to Select All (Ctrl + A) and give the entire illustration one last group (Ctrl + G).

You're now ready to save your SVG. To do this, simply go to the File menu, select Save As, select 'svg' as the file type, choose the name and location and press OK. A configuration panel will appear. Make sure the Font Subsetting is set to

Link to comment
Share on other sites

I am still looking how I can group a text object with a shape in Inkscape. But there is a Inkscape for Adobe Illustrator Users Appendix in the Inkscape User Manual.


Still working on how and if Inkscape can be used for creating svg images to use in PowerGadgets...


Stefan Stranger



Link to comment
Share on other sites

  • 4 months later...
  • Create New...