The Great Banana recipe for SVG symbols

RECIPE 1 - SVG symbols from fonts

Chief Chef:Dmitri Bagh

Asst. Chef: SRG


Student Cooks:All potential FME users writing to SVG

INTRO

Scalable Vector Graphics (SVG) is a text-based graphics language that describes images with vector shapes, text, and embedded raster graphics.SVG files are compact and provide high-quality graphics on the Web, in print, and on resource-limited handeld devices. In addition, SVG supports scripting and animation, so is ideal for interactive, data-driven, personalized graphics.

SVG is a royalty-free vendor-neutral open standard developed under the W3C (World Wide Web Consortium) Process.

More than all, FME can write to SVG!

Adding symbols to SVG is possible and quite easy, but for now one has to make some changes to FME in order to write them.

Here is an interesting trick on writing symbols into SVG using FME.

INGREDIENTS

Download the attached SVG Symbols file.

When you Unzip the attachment, you will find under the SVG-Symbol folder:

SVG-Symbol
|--fme
|    |---metafile
|    |    |---svg.fmf
|    |---svg.dll
|
|--output
|    |---canada.svg
|
|--sourceDataset
|   |--cities.avl
|   |--cities.dbf
|   |--cities.sbn
|   |--cities.sbx
|   |--cities.shp
|   |--cities.shx
|   |--province.avl
|   |--province.dbf
|   |--province.sbn
|   |--province.sbx
|   |--province.shp
|   |--province.shx
|
|--symbols
|    |---symbols.svg
|    |---csv2svg.fmw
|
|--SRG-CHAR.csv
|
|--SRGTemplate.svg
|
|--shape2svg.fmw

THINGS TO DO

(Place the attached svg.dll to your FME install directory and svg.fmf to metafile directory) - NB: For FME 2006-GB or newer it is not necessary to do this.

In the symbols directory you will find a workspace for symbol creation.

You simply pick a font with symbols you want to see in your SVG file, find a symbol you need by getting the character key for the symbol.

The example here uses WINGDINGS fonts. You can set this to any font in your system by editing the TEXTSTROKER in the fmw

The example also uses the OnClick template inbuilt of FME which makes it easier to identify the character key for a given symbol.

You can check this by opening the Symbols.svg file inside the symbols directory (you need to have SVG plug-in installed) in your IE / other browser and clicking on the any symbol.

TextStroker will convert it to polygon, and the writer will make an SVG file for you. You will need everything containing within <path /> tag including the tag itself:

<path fme:CHARACTER_KEY="A" d="M 0.252037,0.740359 l -0.0640956,0.261271 -0.00869093,0.0 …………………………. 0,-0.474801 z "/>

Of course, you can use any other way to create these symbols according to SVG syntax.

Then you should check the template file (SRGTemplate.svg). It contains definitions of all symbols (I have added two more to Dmitri's Capital and City and also added OnClick event).

You can also take any from symbols.svg (by choosing the font of your preference).

After you add all the symbols you need, you can use them in Workbench.

To do so, you have to expose svg_use attribute on the destination feature types and set them to symbol id (#City or #Capital or anything that is available inside the SRGTemplate.svg file). Don’t forget to specify the path to the template file for the dataset. In this template you can also see an example of JavaScript, which allows highlighting elements when mouse is over them – you can specify how elements will react on different events directly within Workbench (isn’t it great?!) just by specifying functions defined in the template file. Playing with _JavaScript you can achieve quite impressive results with a lot of functionality.


There are many format attributes not exposed in FME's SVG writer. For example “stroke-width�?.

There are two options to set it:

1) use template file to define width before writing (as in the sample template file)

2) play with style attribute – it can include all color, fill, stroke attributes. For example, style="fill:white;stroke:black;stroke-width:1.5;" I didn’t test it though.


Play it out with the shape2svg.fmw for creating your SVG files.

Great Banana recipe with SVG isn't it??

SVG Plug-in for Internet Explorer

Adobe Plug-in for Internet Explorer can be downloaded here - SVG Viewer.


--Saint FME (SRG)( 04:58, 27 Jan 2006 (PST)SRG a.k.a SaintGIS


RECIPE 2-SVG symbols from DGN cell library

The Assistant Chef "SRG" greatly inspired by the taste of his masters GB recipe for SVG Symbols has come out with his very own recipe to get symbology stored in IGDS or DGN cell library to SVG vector symbols.

INGREDIENTS

Download the attached IGDS to SVG workspace.

When you Unzip the attachment,you will find the following 3 files:

IGDS-CELLS2SVG.fmw

SRG-CELLS.dgn

Symbols.svg

THINGS TO DO

There are MDL utilities available from Bentley Systems or its authorised developers (some give it away freely) to place all the cells in a cell library into a DGN file.

CellUtils.ma is one such mdl file. Cellutils.ma is a mdl file that groups cells in a grid so they can be placed into a design file or plotted to create a 'book' of cells. The utility also displays the last modification time and date stamp for the model/cell. This utility requires MicroStation version 08.00.04.00 or later. If you happen to get access to this mdl file: Start MicroStation and open a blank design file. Attach the source cell library, and then load the MDL application Cellutil.ma. (You must attach a cell library before the Cellutil MDL application is loaded or you will receive an error message.)In the Cell Library Utility dialog box first, sort by name, then key-in CRTL-A to highlight all listed cells.Select the appropriate GRID settings and place a data point in the active view to place all library cells in the open design file.

For copyright restrictions, this mdl is not included with the example.

In this example FME mapping file, the default cell library that comes with FME and has been used along with the CellUtils mdl in MicroStation to place the cells from the default.cel file into SRG-CELLS.dgn file.

Alternatively one can place the cell from the cell library manually or use FME to do that.

By running the IGDS-CELLS2SVG.fmw file, the symbols.svg file containing the path d for all the cells in the dgn file will be created.

One can run the same FMW for any dgn containing the cells placed from their own cell library.

No modification is required to the mapping file, except for changes to the source and destination files.

--Saint FME (SRG) 02:03, 21 Feb 2006 (PST) Saint FME a.k.a SRG