FME PRESNIIT MUMBAI

1
The Great Banana Recipe Adding Symbols to SVG
with FME
Raghavendran (aka SRG) Product Manager-GIS
Solutions from all dimensions
2
AGENDA

• About SVG
• SVG support in FME
• Vector symbols in SVG
• GML Relay in India and NSDI
• IGDS (DGN) cells to SVG symbols A case of
• NSDI, India
• Live demonstration
• Questions

3
About SVG

• 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 handheld 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!

4
FME support for SVG

• FMEs SVG output is optimal for scripting and
  spatial information display.
• Specific features include
• coordinate preservation
• layered spatial geometry with adjustable paint
  order
• template processing for incorporation of
  predefined scripts, style sheets, images and
  other SVG entities
• single SVG element output for each FME feature
  (including features with donut and aggregate
  geometry)
• international character support
• gzip compression support.

5
Vector Symbols in SVG

• Keeping commonly used graphics in the SVG
  document separated from the remaining graphical
  content by making them as symbols allows one to
  make sweeping changes to the appearance of the
  file.
• Obviously, in the case of Web graphics, smaller
  is generally better, as many users still access
  the Web through dial-up modems.
• SVG's use of symbols offers the same value that
  Flash does
• Graphics become smaller to download as more of
  their visual components are replicated using
  symbols, and
• Graphics become easier to modify when their
  content comprises symbols.
• Getting vector symbols in SVG is bit tricky
• User defined symbols
• Symbols as stored in the source format

6
Vector Symbols in SVG

• User defined symbols at the time of writing to
  SVG
• THE RECIPE
• Name of delicacy Kingdom of Safe
• What does it look like when cooked?

7
Vector Symbols in SVG

• User defined symbols at the time of writing to
  SVG
• THE RECIPE FOR KINGDOM OF SAFE
• Ingredients
• Source format file(s)
• SVG symbols template OnClick template inside
  FME installation
• Little FME knowledge

8
Vector Symbols in SVG

• User defined symbols at the time of writing to
  SVG
• THE RECIPE FOR KINGDOM OF SAFE
• Step by step instruction
• Get the path d for the symbols to be created in
  SVG
• Edit SVG symbols template to include these path d
• Finally translate the data from the source format
  to SVG defining the symbols names in FME
  Workbench using the svg_use format attribute

9
Vector Symbols in SVG

• ltg id"FME-SYMBOL" gt
• ltpath fill"rgb(0,0,0)" stroke"rgb(0,0,0)" d"M
  0,0.259536 l 0.386162,0.431978 0.471249,0
  -0.0981769,-0.124357 -0.274895,0.00654511
  -0.0589061,-0.0654512 0.261805,0.0130903
  -0.0719964,-0.0916318 -0.261805,0.00654515
  -0.150538,-0.183263 -0.202899,0.00654511 z M
  2.13371,0.691514 l 0.412343,-0.458159
  0.464704,0.0196354 -0.104722,0.117812
  -0.26835,-0.00654511 -0.0719964,0.0785415
  0.248715,0 -0.0458159,0.0850866
  -0.25526,-0.0196354 -0.052361,0.052361
  0.24217,0.00654511 -0.0981769,0.130902
  -0.451614,-0.00654511 -0.0196354,0 z M
  0.882067,0.687348 l 0.419211,0 -0.203729,0.235071
  -0.215482,-0.235071 z M 0.874231,0.232774 l
  0.419211,0 -0.203729,0.235071 -0.215482,-0.235071
  z M 1.70873,0.24061 l 0.419211,0
  -0.203729,0.235071 -0.215482,-0.235071 z M
  1.71265,0.691163 l 0.419211,0 -0.203729,0.235071
  -0.215482,-0.235071 z M 2.12795,0.240712 l
  0.419211,0 -0.203729,-0.235071 -0.215482,0.235071
  z M 1.29344,0.236795 l 0.419211,0
  -0.203729,-0.235071 -0.215482,0.235071 z M
  0.465206,0.235071 l 0.419211,0 -0.203729,-0.235071
  -0.215482,0.235071 z M 1.30128,0.687348 l
  0.419211,0 -0.203729,-0.235071 -0.215482,0.235071
  z "/gt
• lt/ggt

10
Vector Symbols in SVG

• ltdefsgt
• ltsymbol id"FME" overflow"visible"
  stroke-width"0.1"gt
• ltpath d"M 0,0.259536 l 0.386162,0.431978
  0.471249,0 -0.0981769,-0.124357
  -0.274895,0.00654511 -0.0589061,-0.0654512
  0.261805,0.0130903 -0.0719964,-0.0916318
  -0.261805,0.00654515 -0.150538,-0.183263
  -0.202899,0.00654511 z M 2.13371,0.691514 l
  0.412343,-0.458159 0.464704,0.0196354
  -0.104722,0.117812 -0.26835,-0.00654511
  -0.0719964,0.0785415 0.248715,0
  -0.0458159,0.0850866 -0.25526,-0.0196354
  -0.052361,0.052361 0.24217,0.00654511
  -0.0981769,0.130902 -0.451614,-0.00654511
  -0.0196354,0 z M 0.882067,0.687348 l 0.419211,0
  -0.203729,0.235071 -0.215482,-0.235071 z M
  0.874231,0.232774 l 0.419211,0 -0.203729,0.235071
  -0.215482,-0.235071 z M 1.70873,0.24061 l
  0.419211,0 -0.203729,0.235071 -0.215482,-0.235071
  z M 1.71265,0.691163 l 0.419211,0
  -0.203729,0.235071 -0.215482,-0.235071 z M
  2.12795,0.240712 l 0.419211,0 -0.203729,-0.235071
  -0.215482,0.235071 z M 1.29344,0.236795 l
  0.419211,0 -0.203729,-0.235071 -0.215482,0.235071
  z M 0.465206,0.235071 l 0.419211,0
  -0.203729,-0.235071 -0.215482,0.235071 z M
  1.30128,0.687348 l 0.419211,0 -0.203729,-0.235071
  -0.215482,0.235071 z "/gt
• lt/symbolgt
• lt/defsgt

11
NSDI in INDIA

• NSDI National Spatial Data Infrastructure
• ( a FME user)
• National Spatial Data Infrastructure (NSDI) for
  India is an
• initiative undertaken jointly by Department of
  Science and
• Technology (DST) and Department of Space (DoS),
  Govt. of India.
• NSDI for India Aimed at encouraging collection,
  aggregation
• and distribution of spatial data on different
  themes on a common
• defined set of standards and formats by different
  mapping
• agencies in India.
• This infrastructure of data will provide metadata
  of all the data
• available with various participating agencies and
  facilitate users
• to obtain data as per requirements with a simple
  and smooth
• procedure from a common platform.

12
NSDI in INDIA
13
Survey of India (SOI)- Case Study

• THE REQUIREMENT
• Digitized topographic sheets are in IGDS/dgn
  format
• NSDE and DVD are other indigenous version used
  for Digital formats
• As a nodal agency for NSDI, India Required to
  move data from these formats to GML and Oracle
  Spatial, publish using SVG format.
• Over 300 symbols currently used by SOI in
  topographic maps prepared by them are in
  MicroStation cell library

14
Survey of India (SOI)- Case Study

• THE REQUIREMENT
• Over 300 symbols currently in MicroStation cell
  library needs to be converted to SVG vector
  symbols.
• Time consuming and a tedious process to redraft
  these symbols in SVG
• THE SOLUTION
• FME was the quick way out!

15
Survey of India (SOI)- Case Study

• HOW DID WE WORK IT OUT?
• Create a dgn containing all the cells A cell
  definition book (Using Macros/MDL or FME)
• Use FME to get the path d created for these
  cells (Both individually and in a single SVG
  file)
• Create a SVG template file for SOI
• Use this template when converting from GML/ DGN/
  Oracle Spatial to SVG to replace with AVG vector
  symbols

16
Survey of India (SOI)- Case Study

• Create a dgn containing all the cells A cell
• definition book using MicroStation MDL utility

17
Survey of India (SOI)- Case Study

• Create a dgn containing all the cells A cell
• definition book using FME
• A CSV file containing the cell names is used to
  create a dgn file with all the cells using
  2DPOINTREPLACER ATTRIBUTECREATOR transformers
  in FME Workbench

18
Survey of India (SOI)- Case Study

• Create a dgn containing all the cells using FME

19
Survey of India (SOI)- Case Study

• Use FME to get the path d created for these
• cells (Both individually and in a single SVG
  file)
• By default the SVG path d for all the cells in
  the dgn file created in the previous step will be
  written into a single SVG file
• Fanout Dataset based on igds_cell_name used to
  get individual SVG files for each cell definition
  Easier to read the SVG file for path d values

20
Survey of India (SOI)- Case Study

• Use FME to get the path d created for these
  cells in a single
• SVG file

21
Survey of India (SOI)- Case Study

• Use FME to get the path d into individual SVG
  files for each cell
• definition in the dgn file

22
Survey of India (SOI)- Case Study

• Create a SVG template file for SOI
• ltdefsgt
• ltsymbol id"ARODRM" overflow"visible"gt
• ltpath d"M 85.7262,42.9479 l -1.35195,10.7018
  -3.97091,10.0294 -6.34037,8.72677
  -8.31143,6.87581 -9.76026,4.59283
  -10.5958,2.02126 -10.7656,-0.677314
  -10.2589,-3.33333 -9.10766,-5.7799
  -7.38413,-7.86329 -5.19662,-9.45261
  -2.68259,-10.448 0,-10.7869 2.68259,-10.448
  5.19662,-9.45261 7.38413,-7.86329 9.10766,-5.7799
  10.2589,-3.33333 10.7656,-0.677314
  10.5958,2.02126 9.76026,4.59283 8.31143,6.87581
  6.34037,8.72677 3.97091,10.0294 1.35195,10.7018 z
  M 43.2672,61.1651 l 0.717213,-4.44672
  1.14754,-3.72951 6.16803,-4.73361
  6.31148,-4.15984 -7.7459,1.29098 -3.29918,0
  -1.29098,-0.286885 -1.14754,-8.46311 0,-9.18033
  -1.43443,0 0.143443,12.3361 -0.717213,3.44262
  -1.86475,2.15164 -5.59426,-0.57377
  -5.7377,-1.29098 -3.44262,-1.29098
  4.73361,3.87295 5.02049,2.58197 3.29918,2.29508
  1.72131,2.72541 2.43852,5.59426 0.430328,2.58197
  0.143443,-0.717213 M 42.6935,49.8331 l
  1.43443,-0.860656 -0.57377,-1.0041
  -0.860656,1.0041 -1.86475,-0.286885
  1.43443,1.72131 0.430328,-0.57377 M
  42.9803,51.411 l 6.16803,-4.15984 -5.30738,0
  -0.430328,-2.72541 -1.72131,3.15574
  -8.60656,-1.57787 7.31557,3.72951 2.15164,4.15984
  0.430328,-2.58197 M 22.3246,39.5052 l
  -7.45902,-2.72541 8.89344,6.59836 5.7377,4.30328
  4.15984,3.0123 3.15574,1.86475 1.86475,2.58197
  1.43443,2.86885 1.0041,4.30328 0.860656,4.44672
  1.14754,5.02049 1.72131,-9.32377 1.29098,-5.02049
  1.0041,-3.29918 4.30328,-3.0123 4.44672,-2.15164
  4.01639,-3.72951 9.7541,-7.02869 -8.60656,2.58197
  -3.0123,1.0041 -3.29918,0.57377 -2.58197,0.57377
  -5.16393,0.717213 0,-0.57377 -0.430328,-5.16393
  -0.430328,-5.16393 -2.0082,-18.3607
  -1.43443,-0.286885 -1.86475,16.6393
  -0.286885,4.44672 -0.57377,6.45492
  -0.860656,1.43443 -0.143443,0.57377 -2.0082,0
  -7.88934,-2.15164 -6.7418,-2.0082 M
  11.1361,33.6241 l -4.87705,-1.86475 7.7459,7.7459
  8.31967,7.31557 7.17213,4.59016 4.87705,3.0123
  3.0123,2.43852 1.43443,6.88525 1.29098,6.59836
  1.0041,6.88525 1.29098,4.87705 3.44262,-12.1926
  1.57787,-7.7459 1.57787,-5.88115 7.45902,-4.15984
  7.31557,-5.59426 5.16393,-4.30328 8.75,-9.32377
  -11.0451,3.87295 -5.02049,1.57787 -4.01639,1.0041
  -8.17623,1.57787 0.143443,-1.43443
  -1.0041,-7.31557 -0.717213,-8.31967
  -2.58197,-13.7705 -4.59016,0 -1.86475,10.7582
  -0.57377,6.45492 -1.0041,9.61066 0,2.58197
  -0.286885,1.0041 -3.0123,0 -12.3361,-3.29918
  -10.6148,-3.58607 M 45.9926,8.3782 l
  9.46721,-1.0041 5.45082,-1.14754
  2.58197,-0.860656 -1.57787,-0.717213 -38.4426,0
  -1.57787,1.0041 11.6189,1.86475 5.7377,0.717213 M
  2.38608,28.6036 l 0.430328,1.0041 3.44262,5.7377
  9.61066,9.18033 7.45902,6.02459 7.02869,4.01639
  4.73361,2.72541 1.29098,8.17623 1.72131,7.88934
  2.43852,8.75 2.15164,3.87295 4.30328,-12.7664
  2.58197,-10.1844 1.0041,-6.02459 7.02869,-3.29918
  10.6148,-8.31967 9.61066,-8.89344
  5.45082,-7.45902 -12.7664,4.59016
  -5.02049,1.86475 -4.73361,1.14754
  -9.89754,1.57787 0,-3.0123 -0.860656,-9.7541
  -1.57787,-10.041 -2.43852,-7.02869
  -6.59836,-0.143443 -2.72541,11.7623
  -1.29098,12.0492 0,3.15574 0.430328,3.44262
  -4.59016,-1.14754 -15.4918,-4.30328
  -13.3402,-4.59016 "gtlt/pathgt
• lt/symbolgt
• ltsymbol id"BGRD2C" overflow"visible"gt
• ltpath d"M 0,0 l 5.88636,6.04545 23.2273,0
  5.88636,-6.04545 M 0,18.4545 l 5.88636,-6.04545
  23.2273,0 5.88636,6.04545 "gtlt/pathgt
• lt/symbolgt
• ltsymbol id"TEMPLE" overflow"visible"gt
• ltpath d"M 0.00303309,0 l 0,0.00218382
  0,0.000242647 -7.27941e-005,0.000339706
  -9.70588e-005,0.000169853 -0.000194118,0.000291176
  -0.000266912,0.000218382 -0.000266912,0.000121324
  -0.000315441,7.27941e-005 M 0.00279044,0 l
  0,0.00218382 0,0.000315441 -7.27941e-005,0.0002426
  47 -0.000121324,0.000315441 -0.000266912,0.0002911
  76 -0.000266912,0.000194118 -0.000145588,7.27941e-
  005 -9.70588e-005,2.42647e-005 M 0.00194118,0 l
  0,0.000922059 M 0.00169853,0 l 0,0.000922059 M
  0.000752206,0.00218382 l 0,0.000145588
  0,0.000145588 2.42647e-005,0.000145588
  4.85294e-005,0.000121324 7.27941e-005,0.000169853
  7.27941e-005,0.000145588 9.70588e-005,0.000121324
  0.000121324,0.000121324 0.000121324,9.70588e-005
  0.000194118,0.000145588 0.000315441,9.70588e-005
  M 0,0 l 0.00363971,0 M 0.00181985,0.00363971 l
  0,0.000363971 M 0.000752206,0 l 0,0.00218382 M
  0,0.00218382 l 0.00363971,0 "gtlt/pathgt
• lt/symbolgt
• ..
• ltdefsgt

23
Survey of India (SOI)- Case Study

• Use this template when converting from
  GML/DGN/Oracle Spatial
• to SVG to replace with SVG vector symbols

24
Survey of India (SOI)- Case Study

• Output SVG file of GML Relay trial data of NSDI,
  India One topographic sheet (150,000 Scale)

25
Survey of India (SOI)- Case Study

• Output SVG file of GML Relay trial data of NSDI,
  India

26
Survey of India (SOI)- Case Study

• Output SVG file of GML Relay trial data of NSDI,
  India

27
Time for a Banana!

• Hope you all had a wonderful time watching these
  Great
• Banana - FME SVG Recipes prepared in front of
  you!
• Get back home and be sure to try these out with
  your FME and let
• this SaintGIS know how you liked them!
• http//www.fmepedia.com/index.php/Scalable_Vector_
  Graphics_28SVG29

28
Thanks for Your Patience
Raghavendran (SRG) Product Manager-GIS
THANK YOU
PIXEL INFOTEK PVT. LTD. www.pixelgroup.in
QUESTIONS
Solutions from all dimensions Contact
safe_at_pixelinfotek.com PIXEL IS A FME RESELLER IN
INDIA