Creating Custom SVGs for PowerGadgets

[JacksonS]

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.

 

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

[marco.shaw]

Great post! Thanks for the details.

I've tried a couple of other SVG tools out there, but Illustrator seems to be the only one that can be used with PowerGadgets. If anyone knows of any other SVG tools out there, let me know and I can try them out.

Contact me via my blog: http://marcoshaw.blogspot.com

[sstranger]

Hi Marco,

I'm at the moment trying to use Inkscape (www.inkscape.org) to create a SVG image to use within PowerGadgets. But it's not that easy to get a hang of using these illustrator tools.

I'll create a howto for using Inkscape if I'm succesful ;-)

Regards,

Stefan Stranger

http://weblog.stranger.nl

[sstranger]

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.

http://www.angelfire.com/mi/kevincharles/inkscape/pa-illustrator.html

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

Regards,

Stefan Stranger

http://weblog.stranger.nl

ChartAutoResize.zip

[marco.shaw]

I tried Inkscape too, but that failed. I posted to a Inkscape list, and the developers thought it should work, but it didn't, and I didn't bother continuing to try.

TestCharts.zip

[sstranger]

Hi Marco,

I also posted a question about Inkscape and creating a SVG but still waiting for a answer. Maybe you can download the eval version of Illustrator CS2?

http://download.adobe.com/pub/adobe/illustrator/win/cs2/Illustrator_CS2_ue_TryOut.exe

Regards,

Stefan Stranger

http://weblog.stranger.nl

[marco.shaw]

Stefan,

Yup, I've already got CS2 (and now CS3 is out!). I already created a custom SVG and got it working with out-map.

[penfold2007]

@Marco Shaw,

According to the File-Save As dialog box, MS Visio supports the SVG file format. I don't have access to Illustrator, anyone know if it should work with Visio?

Regards,

Dan.